CSS的盒子模型
概念
CSS盒子模型本质上就是一个盒子来封装周围的HTML元素。盒子模型包括：边框、外边距、内边距和盒子内的实际内容。
一个标签就是一个盒子，不仅仅是div标签，所有的标签都是盒子。
边框（border）
border可以设置盒子的边框
语法为：
border： border-width border-style border-color;
边框的样式也可以单独设置
border-style
属性值
solid 代表实线边框（最常用）
dashed 代表虚线边框
dotted 代表点线边框
none 可以取消边框
边框的宽度可以单独设置
border-width：像素值;
边框颜色可以单独设置
border-color：颜色;
设置不同位置的边框
上边框：border-top
左边框：border-left
下边框：border-bottom
有边框：border-right
表格的细线边框
border-collapse
属性值为：collapse
collapse代表合并/塌陷的意思，目的是将相邻的边框合并在一起，边框重叠。
边框会影响盒子的实际大小
解决边框影响盒子大小的方法
1、测量盒子大小的时候不量边框
2、测量的时候包括了边框，那么设置盒子的宽高时，应该减去边框的宽度*2(边框有上下左右四个部分)
内边距（padding）
属性
内边距的简写（复合写法）
注意点
如果盒子本身没有指定宽度，则padding不会撑开盒子大小
内边距会撑大盒子，如果想添加了内边距之后不改变盒子的整体大小，那么用盒子原来的大小减去内边距的值即可
外边距（margin）
属性
外边距的复合写法
外边距的典型应用
外边距可以让块级盒子水平居中
需要满足以下条件
1、盒子必须指定宽度
2、盒子左右的外边距设置为auto即可
如果是行内元素或者行内块元素设置水平居中，使用text-algin：center；来实现即可（给父元素添加该属性）。
外边距合并的问题
相邻块元素垂直外边距的合并问题
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是两个外边距的值相加，而是取两个值中的较大者，这种情况就是相邻块元素垂直外边距的合并。
嵌套块元素的垂直外边距塌陷
如果父元素和子元素同时都有上外边距，此时父元素会塌陷较大的外边距值。
解决办法
1、给父元素添加上边框
2、给父元素添加上内边距
3、给父元素添加overflow：hidden；
清除内外边距
网页中的各个元素基本上都有自己所自带的内外边距，使用通配符选择器进行清除后，方便后期的样式调整。
CSS的圆角边框
语法：border-radius:length（像素值）;
属性值可以为具体的数值或者百分比，border-radius指的是圆的半径
如果想要画一个正圆，先画一个正方形，将border-radius的属性值设置为50%即可
可以分别设置四个角的圆角边框，可以使用如下属性
border-top-left-radius 左上角圆角
border-top-right-radius 右上角圆角
border-bottom-left-radius 左下角圆角
border-bottom-right-radius 右下角圆角
CSS的盒子阴影
属性名为 box-shadow
属性值
注意：
1、阴影默认的就是外阴影（outset），但是这个属性值不能写在box-shadow属性内，否则阴影无效
2、盒子阴影不会占用空间，也就是不会影响盒子的排列
|
