盒子模型

border-collapse:collapse; //合并相邻边框

边框会影响盒子的大小，计算的时候应该把边框粗细计算进去

内边距 padding
padding:上 右 下 左（四个值）
padding:上 左右 下
padding:上下 左右
padding:上下左右

内边距也会撑大盒子，设置盒子宽度可减去内边距
这个特性可利用在排列字数不同的盒子，使字间距相等

如果盒子本身没有指定width/height属性，则padding不会撑开盒子大小

外边距 margin
margin:上 右 下 左（四个值）
margin:上 左右 下
margin:上下 左右
margin:上下左右

#水平居中

块级：

1. 盒子必须指定了宽度
2. 盒子左右外边距设置为auto margin: 0 auto

行内或行内块：

行内元素或行内块元素水平居中给其父元素添加text-align:center即可

外边距合并问题

margin-top和上临盒子margin-bottom都有时，不会取两者之和，而是取两者之间最大值。

解决方案：尽量只给一个即可。

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

父元素与子元素都有margin-top值时，会塌陷最大值

解决方案： 1. 可以给父元素定义上边框； 2.给父元素定义上内边距；3.给父元素添加overflow:hidden(此方法不会改变盒子大小)

1. 标题要用h标签
2. 多起类名后期维护方便一些
3. margin 和padding结合实际情况选择

圆角边框 border-radius

border-radius：length 跟长度

原理:border-radius指圆的半径，椭圆与边框相交形成圆角的效果

1. 圆角矩形：border-radius设置为高度的一半
2. 圆形：border-radius设置为一半
3. border-radius：左上 右上 左下 右下（四个值）
4. 分开写border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

盒子阴影 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 必须，水平阴影的位置允许负值。
v-shadow：必须，垂直阴影的位置，可负值
blur：可选，模糊距离
spread：可选， 阴影尺寸
color：可选，阴影颜色
inset：可选，将外部阴影改为内部阴影。

默认外阴影，不可写这个单词（outset），会导致无效
盒子阴影不占空间，不会影响其他盒子排列

文字阴影 text-shadow

h-shadow：必需。水平阴影的位置，可为负
v-shadow：必需。垂直阴影的位置，可为负
blur：可选。模糊距离
color：可选。模糊距离