盒子模型有两种 一种是 内容盒子模型(content-box)一种是边框盒子模型(border-box)。
content-box:设置的尺寸,只设置内容区域,
左外边距+左边框+左内边距+内容区域宽度+右内内边距+右边框+右外边距
border-box:设置的尺寸,设置的是包含边框在内,边框内部的尺寸.
元素实际占地宽度:左外边距+width+右外边距
元素实际占地高度: 上外边距+height+下外边距
网上搜索了两张配图不错 很直观。
边框盒子模型(IE6 的盒子模型)起源于IE的怪异模式中的一个bug。对元素指定的width和height 包括了内边距和边框的高度。
在CSS3中引进了 box-sizing属性,默认值为content-box(标准盒子模型)如果替换为border-box 浏览器会给该元素应用IE盒子模型。即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸,又想以像素的单位制定边框和内边距时候,边框模型特别有用。
比如:我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间,于是设置内部元素的尺寸为100%
<div class="outdiv"></div> <div class="innerdiv"></div>
1 .outdiv{ 2 position:relative; 3 left:40px; 4 top:40px; 5 width:200px; 6 height:200px; 7 padding:10px; 8 background:red 9 } 10 .innerdiv{ 11 border:3px solid blue; 12 padding:4px; 13 width:100%; 14 height:100%; 15 background:green; 16 }
结果如下
这种结果是非常糟糕,元素的大小比与想要的结果要大了。于是给内部的div增加一个box-sizing:border-box属性,结果如下
边框模型在CSS3中的另一个可选方案可以使用calc来计算尺寸。width设置为100%-2*border-2*padding比如把CSS 设置为如下,也可以达到上述的效果Demo
.innerdiv{ border:3px solid blue; padding:4px; width:calc(100% - 2 * 3px - 2 * 4px); height:calc(100% - 2 * 3px - 2 * 4px); background:green; }
(注意运算符用空格隔开)
原文链接:https://www.cnblogs.com/dubaokun/p/3493733.html