盒模型重置
重置盒模型,使width
和height
不受border
或padding
的影响。
- 使用
box-sizing: border-box
,在计算元素的width
和height
时包括padding
和border
的宽度和高度。 - 使用
box-sizing: inherit
将box-sizing
属性从父元素传递给子元素。
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
div {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
display: inline-block;
width: 120px;
height: 120px;
padding: 8px;
margin: 8px;
background: #F24333;
color: white;
border: 1px solid #BA1B1D;
border-radius: 4px;
}
.content-box {
box-sizing: content-box;
}