一、学习内容
1.什么叫盒子模型
就是将HTML页面中的布局元素看做是一个矩形的盒子，盒子的内容包括边框、外边距、内边距和实际内容。
2。边框
border属性可以设置边框样式，属性值由三部分组组成：边框的粗细、边框的样式、边框的颜色
语法：border: border-width border-style border-color;
border-style常用属性：solid（实线、最常用）、dashed（虚线）、dotted（点线）。
表格的细线边框
使用border-collapse:collapse； 来设置表格的细线边框，collapse是合并的意思
边框对于盒子大小的影响
边框会影响盒子的实际大小，加了边框盒子会变大，我们可以在设置盒子大小的时候将边框的宽度加上，即可。
3.内边距
padding属性可以控制内边距，就是边框和盒子内容之间的距离
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
复合属性
padding: 10px; 上下左右内边距都是10px
padding: 10px 20px; 上下内边距是10px 左右内边距是20px
padding: 10px 20px 30px; 上内边距是10px 左右是20px 下是30px
padding: 10px 20px 30px 40px; 上右下左内边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始
内边距的特殊情况
没有宽度的盒子，padding不会撑开盒子的宽度
4.box-sizing（怪异盒模型）
属性值
content-box（默认值）
默认的盒子模型的设置，盒子的整个大小是宽度+padding+border
border-box
怪异盒模型，盒子宽度和高度设定好之后不会随着padding和border的变化而变化，前提是padding和border的值不要超过盒子的大小。
5.圆角边框
属性值可以是具体的数值或者百分比，border-radius指的是圆的半径
如果画一个正圆，可以先设置一个正方形的盒子，然后再将border-radius的值设置为50%即可，
如果要画一个椭圆，可以先设置一个长方形的盒子，然后将border-radius的值设置为50%即可
6.盒子阴影
使用属性box-shadow来设置盒子阴影
语法 box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必须值 控制阴影的水平位置
v-shadow 必须值 控制阴影的垂直位置
blur 可以省略 模糊距离
spread 可以省略 阴影的尺寸
color 可以省略 阴影的颜色
inset 可以省略，控制阴影是外部还是内部阴影，外部阴影为outset，但是如果外部阴影设置之后，阴影属性会失效，一般不做操作。
二、遇到的问题
无
|
