今天看了一些关于box-sizing的一些资料，在这里整理一下，希望也能对大家有所帮助。
box-sizing是CSS的一个属性，很好的解决了盒模型的相关问题。CSS中的盒模型（Box model）分为两派，一派是W3C的标准模型，一派是IE的传统模型。那它们之间有什么不同的呢？首先需要明确它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一至：（下面引用一些公式向大家展示一下两者的不同之处）
box-sizing属性可以为三个值之一：
content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
color: white;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
color: white;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box">content-box</div>
<div class="padding-box">padding-box</div>
<div class="border-box">border-box</div>
</body>
</html>
我是在火狐浏览器下运行的，所以加了-moz-；-moz-代表firefox浏览器私有属性
原文链接：https://www.qiquanji.com/post/6966.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知