css盒子模型是css中一个重点也是难点
因为这个盒子模型与定位属性会设计到布局的问题
盒子模型具有
1.边框（border）
2.内边距（padding）
3.外边距（margin）这三个属性
网上的经典的盒子模型图
box-model.gif
一般如果最基本初始化样式就会将默认的内外边距都设置为0
*{margin: 0;padding: 0}
在使用外边距的时候注意上下盒子的外边距是叠加的，而不是相加的，间距值取两个外边距比较大的那一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#p1{
margin: 10px 0;
border:1px solid red;
}
#p2{
margin: 5px 0;
border: 1px solid black
}
</style>
</head>
<body>
<p id="p1">test1</p>
<p id="p2">test2</p>
</body>
</html>
上面代码中两个p元素的上下间距为10px，而不是想当然的15px。
margin-vertical.png
盒子默认是扩展的与父元素同宽，高度自动
如果不设置盒子的宽度的话，如果设置border，padding和margin任何一个属性的宽度，将会压缩内容区，让内容区变小
如果盒子模型设定了固定的width，则这个width指的就是内容的width了，如果再添加border，padding和margin的值，这时候总的宽度就会超过设置的宽度，这个需要注意，不然就会影响到了网页布局了
网友评论