CSS怪异盒模型box-sizing:border-box
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。
1.也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。
2.大多数情况下,这使得我们更容易地设定一个元素的宽高。
不设定box-sizing:border-box效果
<body>
<div class="box">
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
</div>
</body>
/**/
<style>
.box {
width: 200px;
padding: 20px;
/*box-sizing: border-box;*/
border: 2px solid seagreen;
}
</style>
设定box-sizing:border-box效果
<body>
<div class="box">
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
这是一首简单的小情歌
</div>
</body>
/**/
<style>
.box {
width: 200px;
padding: 20px;
box-sizing: border-box;
border: 2px solid seagreen;
}
</style>