关于width的作用

Question

分析一个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;
}

这是核心代码

Answer 1

当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%的话内层的定位会随着窗口的缩放呈现出非常神奇的变化.

Answer 2

关于width的讨论