box-sizing: content-box;盒子的宽度= width+padding+border
box-sizing: border-box:盒子的宽度= width
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px red solid;
}
p {
width: 100px;
height: 100px;
background-color: yellow;
padding: 10px;
border: 10px red solid;
}
<div>小猪
<p></p>
</div>
calc可以+ - 乘除
.fa {
width: 200px;
height: 200px;
background-color: pink;
}
.son {
width: calc(100% - 30px) ;
height: calc(100% - 30px) ;
background-color: yellow;
}
<div class="fa">
<div class="son"></div>
</div>
效果图:子盒子宽高少于父盒子30px