一、学习内容
盒子模型：就是将HTML页面中的布局元素看做是一个矩形的盒子，盒子的内容包括边框、外边距、内边距和实际内容。
边框:border属性可以设置边框样式，属性值由三部分组组成：边框的粗细、边框的样式、边框的颜色.
语法：border: border-width border-style border-color;
border-style常用属性：solid（实线、最常用）、dashed（虚线）、dotted（点线）。
表格的细线边框:使用border-collapse:collapse； 来设置表格的细线边框，collapse是合并的意思.
边框对于盒子大小的影响:边框会影响盒子的实际大小，加了边框盒子会变大，我们可以在设置盒子大小的时候将边框的宽度加上，即可。
内边距:padding属性可以控制内边距，就是边框和盒子内容之margin-top 上外边距间的距离(padding-left 左内边距、padding-right 右内边距、padding-top 上内边距、padding-bottom 下内边距），没有宽度的盒子，padding不会撑开盒子的宽度。
box-sizing（怪异盒模型）：content-box（默认值）（默认的盒子模型的设置，盒子的整个大小是宽度+padding+border）、border-box（怪异盒模型，盒子宽度和高度设定好之后不会随着padding和border的变化而变化，前提是padding和border的值不要超过盒子的大小。）
外边距：margin属性来控制盒子的外边距，就是盒子和盒子之间的距离（margin-left 左外边距、margin-right 右外边距、margin-top 上外边距、margin-bottom 下外边距）
块元素盒子水平居中：1、盒子必须有宽度2、盒子的左右外边距设置为auto
行内元素的水平居中：行内元素或者行内块元素水平居中就给父元素加text-align-center;即可
外边距的合并问题：相邻块元素垂直外边距合并（当上面的盒子有下外边距，下面的盒子有上外边距，两个盒子之间的垂直距离会采用较大的外边距值。）
嵌套块元素的上外边距塌陷：对于嵌套的块元素，父元素和子元素都有上外边距，实际的上外边距采用它们之间的较大的上外边距值。
解决方案：（1、可以给父元素定义上边框2、给父元素定义上内边距3、给父元素添加overflow:hidden;）
清除内外边距：网页很多的元素的都有默认的内外边距，所以我们一般会在通配符选择其中将这些样式给清除掉。行内元素一般不要设置上下的内外边距，进行只设置左右的，如果想设置就将该行内元素转化为行内块元素或者块元素。
圆角边框：border-radius属性，可以设置外边框的圆角，属性值：像素值。
盒子阴影：使用属性box-shadow来设置盒子阴影。语法 box-shadow: h-shadow v-shadow blur spread color inset;
1.h-shadow 必须值 控制阴影的水平位置
2.v-shadow 必须值 控制阴影的垂直位置
3.blur 可以省略 模糊距离
4.spread 可以省略 阴影的尺寸
5.color 可以省略 阴影的颜色
6.inset 可以省略，控制阴影是外部还是内部阴影，外部阴影为outset，但是如果外部阴影设置之后，阴影属性会失效，一般不做操作。
|
