DIV+CSS布局中无法显示背景颜色是怎么回事

div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下:

1、由使用float浮动造成浮动产生无法显示css背景颜色
2、高度不够而产生背景无法显示

接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法。

一、css float浮动产生浮动无法显示背景样式颜色

假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属性样式,这个时候该对象浮动产生,导致该对象不能撑开,所以css背景颜色就不能无法显示,解决方法有三种,一个是设置clear清除浮动、设置css高度、设置css overflow样式。

详细教程可进入:css清除浮动

二、高度限制造成了背景颜色不能显示完整

原因分析:
假如你有个对象没有计算好高度(或无意设置了一个很小高度属性样式),因为不确定内容有多少,当内容超过你设置高度限制,这个时候超出部分背景就可能无法显示。

解决方法:
设置够高的高度,或取消删除高度样式即可。

时间: 2024-10-26 12:56:57

DIV+CSS布局中无法显示背景颜色是怎么回事的相关文章

div+css布局中header部分的优化

在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"></div><div id="footer"></div>而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <

如何使文本在DIV+CSS布局中垂直居中

css DIV+CSS布局中垂直居中的实现. <html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><

DIV+CSS布局中的兼容性问题hack做法

DIV+CSS布局中的兼容性问题,除了一些小技巧外,常常还需要结合CSS Hack写法来解决.CSS Hack的原理是针对各浏览器对CSS属性的支持和解析结果不同,以及CSS执行中的优先级问题,来针对不同浏览器写不同的CSS. 1)IE中浮动错位问题 经常,我们定义一个DIV浮动的时候,特别是CSS里有用到margin属性,Mozilla Firefox正常,但是IE中这个DIV会跑到下一行去,解决办法很简单,你只需要在你的CSS属性里加上句:display:inline,如:  代码如下 复制

DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags_经验交流

做DIV+CSS页面,不推荐使用的标签代码,请尽量不要使用这些HTML标签: Do not use these html elements in html pages.  Presentational elements should not be used.  Support for some elements has been (or will be) deprecated; they should not be used.  Don't Use These Tags  Presentatio

网页文字在DIV+CSS布局中垂直居中的问题

css|网页|问题 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围. div{ height: 20px; line-height: 20px;

DIV+CSS布局中如何组织样式表以便于简化和维护

对于简单的Web站点,可以只使用一个CSS文件.对于大型的复杂站点,对样式表进行分割以便简化维护是一种好做法.如何分割样式表是需要仔细考虑的.我一般用一个CSS文件处理基本布局,用另一个文件处理版式和设计修饰.这样的话,在布局确定之后,就很少需要修改布局样式表.这可以防止布局样式表被意外地改动或破坏. 还可以进一步细分,比如用单独的CSS文件处理颜色.这样的话,如果希望提供新的颜色方案,就只需要创建一个新的颜色样式表.如果站点上有许多表单,那么可以用单独的CSS文件处理所有表单样式.可以只在需要

DIV+CSS布局中如何组织CSS样式表

对于简单的Web站点,可以只使用一个CSS文件.对于大型的复杂站点,对样式表进行分割以便简化维护是一种好做法.如何分割样式表是需要仔细考虑的.我一般用一个CSS文件处理基本布局,用另一个文件处理版式和设计修饰.这样的话,在布局确定之后,就很少需要修改布局样式表.这可以防止布局样式表被意外地改动或破坏. 还可以进一步细分,比如用单独的CSS文件处理颜色.这样的话,如果希望提供新的颜色方案,就只需要创建一个新的颜色样式表.如果站点上有许多表单,那么可以用单独的CSS文件处理所有表单样式.可以只在需要

DIV+CSS布局中的居中问题

1.DIV居中 body {text-align: center;} div {margin-right: auto; margin-left: auto;} 说明:对于IE,在父元素定义"text-align: center;"就可以了对于FF等其他浏览器,仅这样不能居中,需在子元素中定义"margin-right: auto; margin-left: auto;". 2.背景居中 body {background:url(#) #fff no-repeat c

div+css布局优化中的整体布局

在div+css布局中,一般都这样来整体构架的 <div id="header"></div><div id="center"></div><div id="footer"></div> 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <