css的盒子模型分为四部分组成,margin、padding、border、content(width和height)
<div class="box">box</div>
.box{
width:200px;
height:300px;
margin:40px;
padding:20px;
border:20px;
}
本身box的宽是200px;高是300px;
padding内边距上下左右 各填充20px;
border边框上下左右各20px;
margin外边界上下左右各40px;
实际上浏览器认知的
宽20x2+20x2+40x2+200=280
高20x2+20x2+40x2+300=380
得出结论:
浏览器上自认的是在盒模型中添加margin外边界是在原本盒子扩散边界而不增添外界因素
padding、border、margin这三个可选的默认值为0,但是浏览器会自带 margin和padding,可以用*代表所有元素来清除自带的边距如下
*{
margin:0px;
padding:0px;
}