今日所学：
CSS盒子模型
页面布局的时候我们要学习三大核心：盒子模型、浮动和定位
盒子模型的组成
边框（border）
border属性可以设置元素边框，边框由三部分组成：边框的宽度、边框的样式、边框的颜色
border：border-width border-style border-color;
border-style属性值
solid实线边框
dotted点线边框
dashed虚线边框
边框会影响盒子实际大小
给表格设置细线边框
border-collapse：collapse；000000000000000
将相邻边框合并
外边距（margin）
margin的属性来设置外边距，就是盒子和盒子之间的距离
一个值（上右下左）
两个值（上下、左右）
三个值（上、左右、下）
四个值（上、右、下、左）
margin：0 auto；将块级盒子水平居中
盒子必须有宽度
将左右设置为auto即可
行内子元素水平居中，只需要给父级元素加text-align：center；
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距合并的问题
相邻块元素垂直外边距合并
当上下两个块元素相遇时，如果上面盒子由下外边距，下面盒子有上外边距时，外边距取他们外边距最大值
嵌套块元素垂直外边距的塌陷
如果两个嵌套的盒子，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决外边距塌陷
给父元素添加上边框
给父元素添加上内边距
给父元素添加overflow：hidden；
清除内外边距
网页元素很多自己带有内外边距，不同浏览器默认的也不一样，所以网页布局前，将元素自带的内边距清除掉
*{margin：0；padding：0；}
内边距（padding）
padding的属性来设置内边距，就是边框和内容之间的距离
一个值（上右下左）
两个值（上下、左右）
三个值（上、左右、下）
四个值（上、右、下、左）
padding不会撑开盒子的情况
如果盒子没有指定宽度，就不会被padding撑开盒子，如果指定就会被撑开
CSS圆角边框
在css中使用border-radius属性来设置圆角边框
border-radius：像素值/百分比；
border-radius是一个圆的半径
想画一个正圆，先画一个正方形，再将border-radius设置为正方形宽高的一半
想要设置四个圆角边框不一致
border-top-left-radius左上角边框
border-top-right-radius右上角边框
border-bottom-left-radius左下角边框
border-bottom-right-radius右下角边框
CSS的盒子阴影
在css中使用box-shadow属性来为盒子添加阴影
h-shadow必须值，水平阴影的位置，允许负值
v-shadow必须值，垂直阴影的位置，允许负值
blur可选，模糊距离
spread可选，阴影尺寸
color可选，阴影颜色
inset可选，外部阴影outset，内部阴影inset
默认的阴影是外部阴影（outset），但是不可以在box-shadow写这个单词，否则会造成阴影失效
盒子阴影不占有空间，不会影响其他盒子的排列
|
