CSS盒模型box-sizing属性

CSS默认容器的width为内容的宽度,即box-sizing:content-box,不包括padding,border的宽度。
这样的话如果div1的width=100%,并且div2的width=100%,而这时给div2加上个padding,这个div2就会被挤出div1,为了避免这种情况,需要把div2的box-sizing设定为border-box。

<div class=div1>
    <div class=div2>
    </div>
</div>
div1{
width:100%;  
}
div2{
width:100%;
box-sizing:border-box;
}

CSS Box Model

amazeUI中也有提到,http://amazeui.org/css/base

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,780评论 0 2
  • 听说过这样一句话,怎么利用下班后的六个小时,决定一个人的未来。 这里我不禁要问,未来是什么样的? 从字面理解,未来...
    丁于_18d4阅读 3,647评论 0 48
  • 五十岁是人生辉煌阶段的开始。人,不论你出生在什么家庭,从咿呀学语到蹒跚学步,你必须在大人的帮助下完成人生初级阶段的...
    盛涛洋阅读 4,106评论 0 0