一. 长度单位
1. px
2. em
em 是相对于当前元素或父元素的font-size的倍数，如果当前没有设置font-size则查找父元素的font-size。
3. rem
rem 是相对于根元素的font-size的倍数
4. 百分比
相对其父元素的百分比
二.显示模式
1. 块级元素 block
- 独占一行
- 宽度默认撑满整个body
- 高度由内容撑开
- 可以通过css设置宽高
html body h1~h6 , 列表ul , ol，表格table， 表单form，下拉框option
2. 行内元素 inline
- 不会独占一行，一行写不下自动跳转到下一行，自动从左向右排列
- 宽高默认由内容撑开
- 不能由css设置宽高
br span em strong del ins a label
3. 行内块元素 inline-block
- 不会独占一行，一行写不下自动跳转到下一行，自动从左向右排列
- 宽高默认由内容撑开
- 可以由css设置宽高
img 单元格 表单控件 iframe
4. 修改元素的显示模式 display
display：normal , inline-block, inline, none
三. 盒子模型的组成
1.
- 内容content
- 内边距padding
- 边框border 背景色会填充到content+padding+border
- 外边距margin
2.盒子内容区
3.默认宽度
- 没有设置宽度的情况下，margin影响div的宽度，padding和border不会影响div的宽度，但是padding和border会影响content的宽度
总宽度 = 父content - margin
内容区的宽度 = 父content - margin - border - padding
4.内边距padding
padding: 上 右 下 左
padding：10px // 10是上下左右
padding： 10px 20px // 10是上下 20是左右
padding: 10px 20px 30px // 10是上 20是左右 30是下
padding: 10px 20px 30px 40px // 上 右 下 左
padding-left:左侧内边距
padding-top：上侧内边距
padding-right：右侧内边距
padding-bottom：底侧内边距
行内样式的内边距padding
padding-left: 正常设置
padding-right: 正常设置
padding-top,padding-bottom: 会遮盖
块级和行内块元素都可以完美设置padding，行内元素不可以完美设置
5.边框 border
border-width: 10px
border-top-width
booder-left-width
border-right-width
border-bottom-width
border-color: red
border-top-color
border-left-color
border-rigth-color
border-bottom-color
border-style: solid
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top: border-width border-style - border-color
border-right
border-bottom
border-left
border
5.盒子的外边距margin
margin 和 border是一样的
5.1 margin注意事项：
1. 子元素的margin是参考父元素的content计算的
2. 块级：上margin，左margin影响自己的位置，右margin和底margin影响后面的元素
3. 块级元素和行内块元素都可以设置margin；行内元素可以设置margin-left，margin-rigth，不可以设置margin-top，maigin-bottom
4.
margin-left：auto，能距离左端要多远就有多远
margin-right： auto // 能距离右端要多远就有多远
所以，div居中的
margin: 10px, auto
width: 100px
6. margin塌陷问题
第一个子元素设置了margin-top，最后一个子元素margin-bottom 直接表现在父元素上
1. 给父元素添加border
2. 给父元素添加padding
3. overflow: hidden // 溢出之后的处理模式
7. margin合并问题
margin 只上下存在这个问题，左右没有这个问题
8. 解决内容的溢出
- overflow
overflow:hidden // 水平和垂直方向上都会隐藏
visible(默认), scroll , auto , hidden
9.隐藏元素的两种方式
- display
display: none
- visibility
visibility:none , hidden
区别：display不会占位，visibility会占位
10.样式的继承 MDN上查看
font-系列， text-系列， line-系列，基本上都是不影响布局的属性
element.style: 行内样式
内部样式：
外部样式：会有文件路径
默认样式：user agent style
继承样式： inherit from xx
11. 元素的默认样式
a
h1 ~ h6
p
body: {
margin: 8px
}
