盒子规格Box-sizing
html
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
CSS
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
display: inline-block;
width: 150px;
height: 150px;
padding: 10px;
background: tomato;
color: white;
border: 10px solid red;
}
.content-box {
box-sizing: content-box;
}
关键点:
box-sizing :
- content-box: 默认, 指定元素内容的宽度和高度
- border-box: 增加padding 和 border 都不影响元素的宽高
- inherit: 该元素继承父元素的box-sizing
