我之前整理的文章可能也不是特别深刻。因此如今开始尝试即便多花点时间收集整理,也不仅发浅层知识,这样对技术的深刻理解是颇有帮助的。css
废话很少说,咱们如今开始。web
说到css盒模型,这是大多面试基础中会常常面到的。面试
首先咱们要知道,什么是盒模型?盒模型分为两种:w3c盒模型和IE盒模型。浏览器
如今大多数浏览器默认状况下的盒模型就是w3c盒模型,由margin、border、padding、content、元素的width==content的width。也就是说w3c盒模型通常状况下会比设置的宽度要大,而IE盒模型则更为标准,元素的width==margin+border+padding+content。所以在w3c盒模型中加入了一个新的样式box-sizing。这个样式能够切换w3c盒模型和IE盒模型。咱们来作个例子:spa
咱们想设置一个如此的样式,一个div内有5个div,横向排列。div宽度可变,平分的。3d
<div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
所以,大多数状况下,能够使用%。内部的div能够使用float:left实现横排。code
.box{ background-color: yellowgreen; } .box div{ width: 16%; height: 50px; margin: 2%; float: left; background-color: yellow; text-align: center; line-height: 50px; border: 2px solid #000; }
若是直接使用这种方式会有几个问题:blog
1.由于border的关系,最后一个div被排到了第二行,显然是不对的。继承
2.外层的div高度变成0了,致使背景颜色没法展现。文档
咱们来看看解决这2个问题。
第一个就是w3c盒模型的影响,可以使用box-sizing: border-box;改变为IE盒模型。
有3种值:border-box、content-box、inherit
border-box能够转IE盒模型,content-box是默认的w3c盒模型,inherit是父元素的box-sizing继承下来的值
因此代码为:
.box div{ width: 16%; height: 50px; margin: 2%; float: left; background-color: yellow; text-align: center; line-height: 50px; border: 2px solid #000; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.box{ background-color: yellowgreen; overflow: hidden; }
2.使用子元素clear:both;清除浮动。
<div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <i class="clear"></i> </div>
.clear{ display: block; clear: both; }
为何用display:block呢?由于必须是块级元素才能达到此效果。
这样box下面才不会被影响。