分析一个html+css案例,发现width不定义的话会出现多余的黑框,不知道为什么,所以想咨询下
#templatemo_footer_outer {
clear: both;
width: 100%;
margin: 0 auto;
background: #5f5f5f url(images/templatemo_footer_wrapper_outer.jpg) top repeat-x;
}
#templatemo_footer_inner {
clear: both;
width: 100%;
margin: 0 auto;
background: url(images/templatemo_footer_wrapper.jpg) top center no-repeat;
}
#templatemo_footer {
clear: both;
width: 540px;
margin: 0 auto;
padding: 100px 20px 40px 420px;
margin-top: 30px;
background: #5f5f5f url(images/templatemo_footer.jpg) top center no-repeat;
}
这是核心代码
当
width:100%
一般用来设置子元素继承父元素的宽度.如果不设置
width
,那么默认width
是可视区域的宽度.在TZ这个例子里面,
#templatemo_footer_outer
没有设置position
所以
#templatemo_footer_outer
默认采用position:static
,也就是一个一个流式排列的方式.也就是先排
#templatemo_wrapper_outer
再贴着排#templatemo_footer_outer
,再排后面TZ没有截的(这个导致出现了黑框),这些一个一个贴着排的元素保持各自原本的宽度.然后设置
width:100%;
即各自继承各自的父元素的宽度,一个一个传递,到最后,这些嵌套的div都继承了body的宽度,直到最里面的div设置width:540px;
进行最终定位.这种嵌套div外层全部设置为
width:100%
,只在内层进行精确定位,可以保持元素的相对静止,是非常科学的定位方式.如果外层设置的不是100%的话内层的定位会随着窗口的缩放呈现出非常神奇的变化.