box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度
盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge
、内边距边界 Padding Edge
、边框边界 Border Edge
、外边框边界 Margin Edge
。
- 标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height
- IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth
两个div均统一设置属性,然后针对第二个div设置了其box-sizing属性,并赋值为border-box。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
margin: 10px;
padding: 10px;
border: 10px solid #888;
}
#bs{
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<div id="bs"></div>
</body>
</html>
效果如下:
关于box-sizing表格如下:
box-sizing属性值 | 浏览器说明 | 示例 |
---|---|---|
不设定 | 默认 | ![]() |
border-box | IE8+,其他浏览器最新版均支持 | ![]() |
content-box | IE8+,其他浏览器最新版均支持 | ![]() |
padding-box | 仅火狐浏览器 | ![]() |
参考:https://blog.csdn.net/qinshenxue/article/details/17753005