css盒子模型
盒子模型包含四个部分：内容(centent)、内边距(padding)、边框(border)和外边距(margin)
边框(border)
| 属性 | 说明 |
|---|---|
| border-style | 设置边框的样式，常用 dotted:点线 dashed：虚线 solid：实线 |
| border-width | 设置边框的宽度，一般用像素点设置 |
| border-color | 设置边框的颜色 |
表格有自己的边框，单元格也有自己的边框，如果两个叠加在一起会造成边框比较宽，可以使用border-collapse设置表格行和单元格的行是否合并。
| 属性 | 属性值 |
|---|---|
| border-collapse | separate：边框独立(标准html) collapse：相邻边框被合并 |
每条边框可以分别设置
通过指定top left buttom right 设置单个边框的样式
border的复合写法
border: color style size,顺序没有严格要求
注意
border会影响盒子实际大小
像这种带边框的盒子，边框大小会影响盒子实际大小
解决方案：
1. 量盒子宽度的时候不要把边框算进去
2. 对盒子大小进行调整，减去边框的宽度内边距(padding)
内边距设置的是内容与边框之间的距离
padding同border一样，可以设置上下左右内边距，padding的不同写法。
| 写法 | 说明 |
|---|---|
| padding: 15px | 一个数值，设定了上下左右的内边距 |
| padding: 15px 15px | 两个数值，设定的是上下 和 左右 的内边距 |
| padding: 15px 20px 34px | 三个数值，设定的是上 左右 下的内边距 |
| padding: 15px 23px 12px 23px | 四个数值，设定的是上 右 下 左，顺时针方向设定内边距 |
可能的值：
注意
内边距也会影响盒子的实际大小，会把盒子撑大
解决办法： 设置盒子大小的时候减去内边距
应用： 解决盒子之间的距离问题
没有使用内边距，由于文字长度的原因，文字之间的距离不相等。
使用了内边距就可以解决这样的问题。
外边距(margin)
控制盒子与盒子之间的距离
没有使用margin
使用了margin
![]Snipaste_2020-04-18_11-01-59.png)
margin的写法
margin跟padding一样有种写法，遵循的规则也一样
margin的典型应用-块级元素水平居中
盒子默认位置是靠左显示，设置水平居中需要满足两个条件
1: 必须指定盒子的宽度
2：左右外边距需要指定为auto
设置水平居中的写法有三种：
- margin-left : auto, margin-right : auto
- margin : auto
- margin : 0 auto
最后一种最常用
行内元素跟行内块元素的水平居中
把他们看为文字类型一样，使用
text-align = ecnter
外边距的合并
当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距等于发生合并外边距的高度的较大者
元素相互独立时的合并
元素包含时的合并
外边距的自身合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
清除元素的内外边距
元素会默认带上内外边距，使用通配符选择器去清除
* {
padding : 0;
margin : 0;
}
