关于width的作用-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

关于width的作用

杨冬芳 2016-06-03 09:45:16 1259

分析一个html+css案例,发现width不定义的话会出现多余的黑框,不知道为什么,所以想咨询下
screenshot
screenshot

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;
}
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:25:57

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

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章