概念
盒子模型 ： 就是把html页面中的布局元素看成一个矩形的盒子
CSS盒子模型 本质 是一个盒子，封装周围的html元素，包括 边框，内外边距和实际内容
盒子模型的组成
border 边框
border-width: 边框宽度
border-color: 边框颜色
border-style: 边框样式
border-style : solid 设置为实线
border-style: dotted 设置为点线
border-style: dashed 设置为破折号线
边框的复合写法 border
没有先后顺序
border:1px solid red
边框分开写 top left right bottom
border-top:1px solid red
border-left:1px solid green
....
表格的细线边框
边框会影响盒子的实际大小
给一个盒子 的 宽度，然后再给他边框，那么总宽度就是 原宽度 + 边框宽度
内边距 padding-
内边距是 盒子 与 盒子里面的内容的距离
padding-left : 左边距
padding-top : 上边距
padding-right ： 右边距
padding-bottom ： 下边距
内边距的复合写法
padding ：1个值 （上下左右都是这个值）
padding ： A值 B值 （A值 ：上下 ； B值：左右）
padding ： A值 B值 C值 （A值 ：上 ； B值 ：左右 ； C值 ： 下）
padding ： A值 B值 C值 D值（A值 ：上 ； B值 ：右 ； C值 ： 下 ； D值：左）
1个值
2个值
3个值
4个值
内边距也会影响盒子的实际大小
给 盒子加 内边距 会撑大盒子
就让 测出来的盒子宽度 - 内边距 = 本身的宽度
padding不会撑开盒子的情况
盒子本身没有指定 width/height 属性，此时padding 不会撑开盒子大小
外边距 margin
外边距是 盒子与盒子之间的距离
margin-left : 左边距
margin-top : 上边距
margin-right ： 右边距
margin-bottom ： 下边距
margin的复合写法
与padding的基本差不多
margin基本应用 01 ---- 块级盒子水平居中
水平居中 ： 左右居中 ，上下随便
满足条件
- 设置宽度
- margin: 0 auto
margin基本应用 02 ---- 行内元素 或者 行内块元素 水平居中
给 行内元素/行内块元素 设置 水平居中
- 找到要设置的 行内元素/行内块元素 的父元素
- 给父元素 设置 text-align:center
外边距合并 --- 嵌套块元素塌陷 （面试题）
注 对于两个 嵌套关系的 块元素，给父元素一个外边距，同时子元素也有一个外边距，那么此时 父元素会 塌陷较大的外边距
所以上面的 图如下所示
解决办法 （3种） 都是给父元素添加的
1、 给父元素定义上边框
2、给 父元素定义上内边距
3、给 父元素 设置 overflow：hidden
清除内外边距
因为 网页元素很多都带有默认的内外边距，不同浏览器默认的都不一样 ，所以我们要清除掉
写在 css的第一行
*{
margin： 0；
padding : 0;
}
注 行内元素 尽量只设置左右内外边距，不要设置上下的，因为设置了也不起效果 ； 不过可以转换为块元素和行内块元素就可以设置了
给盒子设置圆角边框 border-radius
border-radius 是设置4个角
border-radius : 具体单位px | 百分号
是 设置 宽度和高度的 多少多少
这个设置了 宽度和高度的 20%
4个数值的 就是上右下左
2个数值的 就是 斜对角
分开写的话
border-top-left-radius 上左
border-top-right-radius 上右
border-bottom-left-radius 下左
border-bottom-right-radius 下右
给盒子添加阴影 box-shadow
不占据空间，不会影响其他盒子排列
box-shadow : h-shadow（必写 水平阴影 可以负值）
v-shadow（必写 垂直阴影 可以负值）
（6个值） blur （选 模糊距离）
spread （选 阴影的尺寸）
color （选 颜色）
inset （选 将外部颜色（outset） 改为内部阴影）
（注 ： 可以改为inset，但不能写 outset ，这样的话就没有阴影了）
给文字添加阴影 text-shadow
box-shadow : h-shadow（必写 水平阴影 可以负值）
（4个值） v-shadow（必写 垂直阴影 可以负值）
blur （选 模糊距离）
color （选 颜色）
