首先盒子模型有两种,一种是W3C和IE盒子模型。
W3C盒子模型包括:内容(width,height),padding,border,margin;
W3C盒子模型的可视宽度:width+border+padding;
IE盒子模型包括(怪异盒子模型):内容(width,height),padding,border,margin;
IE盒子模型的可视宽度是:width;
在css3中新增了box-sizing样式:
box-sizing样式可以指定盒子模式;
box-sizing:content-sizing样式可以指定W3C盒子模型;(浏览器默认是W3C盒子模型)
box-sizing:border-box样式可以指定IE盒子模型。
总结:W3C盒子模型的可视宽度是width+border+padding;设置时会不断向外扩张,而IE盒子模型IE盒子模型的可视宽度是:width;设置时border和padding时会不断向内争夺width的大小。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.w3c{
width: 100px;
height: 100px;
padding: 10px;
box-sizing: content-box;
background: green;
border: 10px solid red;
}
.IE{
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 10px;
background: red;
border: 10px solid yellow;
}
</style>
</head>
<body>
<div class="w3c">W3C盒子模型</div>
<div class="IE">IE盒子模型</div>
</body>
</html>
W3C盒子模型
IE盒子模型
我遇到的疑问:为什么我设置的boder和检查中的boder不一致?
如有想法,可以评论区交流!