CSS盒子模型

1.盒子模型的组成

盒子模型由：content（内容）、padding（内边距）、border（外边距）、margin（外边距）组成

2.盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

• 语法

box-shadow: h-shadow v-shadow blur spread color inset; 

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。

3.边框

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色

• 语法

border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细
border-style	定义边框样式
border-color	边框颜色

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

border-radius:length; 

•  参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius）

4.内边距

padding 属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding 属性（简写属性）可以有一到四个值。

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距;
padding: 5px 10px;	2个值，代表上下内边距是5像素左右内边距是10像素;
padding: 5px 10px 20px;	3个值，代表上内边距5像素左右内边距10像素下内边距20像素;
padding: 5px 10px 20px 30px;	4个值，上是5像素右10像素下20像素左是30像素顺时针

5.外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-top	下外边距

块级盒子水平居中

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;
• text-align: center

相邻块元素垂直外边距的合并

•  尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

•  可以为父元素定义上边框。
• 可以为父元素定义上内边距。
• 可以为父元素添加 overflow:hidden。

清除内外边距

*{
    padding: 0;
    margin: 0;
}