一、学习内容
1、cass的盒子模型
概念：盒子就是用来封装周围html元素的，盒子的模型有边框、内边距、外边距、内容
2、边框border
1）、border的属性值有border-width 边框的宽度 border-style 边框的样式 border-color 边框的颜色
border-style：默认值是none 表示没有边框 solid 实线边框 dashed 虚线边框 dotted 圆点边框
2）、边框的控制：
border-left 左边框 border-ringh他 有边框 border-top 上边框 border-bottom 下边框
3）、表格的细线边框
border-collapse：collapse collapse的意思是塌陷。
4）、边框会影响盒子的实际大小的解决办法：
测量距离的时候不测量边框。
设置盒子的宽和高的时候都减去边框宽度的2倍
3、内边距padding
1）、内边距的属性：
padding-left：像素值 左内边距 padding-right右内边距 padding-top 上内边距 padding-bottom 下内边距
1）、内边距的复合写法
padding 只有一个值得时候 表示所有的内边距都是一样的
padding 两个值得时候 第一个值代表上下 第二个代表左右
padding 三个值得时候 第一个代表上 第二个代表左右 第三个下
padding四个值得时候 第一个上 第二个右 第三个下 第四个代表左
2）、注意：
没有高度的盒子是不会被撑开的
内边距会撑开盒子，如果想要盒子不变，需要盒子的宽高减去内边距宽度。
4、外边距margin
外边距的属性：
margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottm 下外边距
外边距的复合写法：
margin一个值得话上下左右都是一个值
margin两个值的话第一个值是上下外边距 第二个 是左右
margin 三个值得话 第一个是上边距 第二个是左右边距 第三个是下外边距
marigin 四个值得的话 顺序是上右左下
外边距的典型应用
水平居中 margin：0 auto；
外边距的塌陷问题
父类盒子和子类盒子同事设置外边距，外边距会出现合并，只显示最大的那个值。
解决塌陷：
给父类设置边框
父类设置设置内边距
overflow：hidden
清除外边距
*{ margin：0 ； padding ：0} 清除默认的内外边距
css圆角边框
border-radius ：像素值 也可以是百分比 要画一个正圆的话，需要先设置一个正方形盒子
四个角分别控制
border-top-left-radius：左上角圆的控制
border -top-right-radius ： 右上角控制
border-bottom-left-rardius：左下角控制
border-bottom-right-radius：右下角控制
box-shadow阴影控制
h-shadow 横向阴影控制
v-shadow 纵向控制
blur 模糊距离
spread 阴影尺寸
color 阴影颜色
inset 外部阴影转换成内部阴影，默认值是outset，但是不能写在属性值里
注意
outset不写在属性值里面
阴影不占空间，不影响盒子的排列。
|
