在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.
比如边框的增加,内容进行内边距的使用,增加了原来的盒子模型的尺寸,但是我们又不想改变这个,我们又要重新减小盒子模型原来的尺寸.实属麻烦,在css3种,加入box-sizing:border-box就可以解决这个问题,盒子原来尺寸变.加入边框,内边距会重新适当的修饰元素内的内容格局,总的盒子模型不会发生改变!
box-sizing应用小例子:
代码语言：javascript复制 <style type="text/css">
div{
width:20%;
height:200px;
float:left;
background: orange;
border: 5px solid #26ffff;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
作者：24920@163.com
时间：2018-01-30
描述：box-sizing:border-box表示不改变盒子的整体大小
-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>应用说明:在网页进行布局5个div,每个div宽度占浏览器的20%,5个正好可以排下,但是给每个div加上5px的边框,5个div就出现6个边框,多出6*5px多出30px在一行无法排列则进行换行,这个肯定不是我们要的效果!然而使用了box-sizing属性,神奇的发现在一行排列了!
