一、复习
盒模型
- width
- height
- border
- border: border-width border-style border-color
- margin
- padding
简写值分配的规则： 1234个值
背景
- background-image
- background-color
- background-attachment
- fixed
- background-position
- background-size
二、盒模型的注意事项
盒子分为正常的内容盒和怪异盒
内容盒：（设置的宽度为内容的宽度-----边框、内边距不占据宽度）
- 宽度 = border-left + padding-left + width + padding-right + border-right
- 高度 = border-top + padding-top + height + padding-bottom + border-bottom
怪异盒：（设置的宽度为总宽度----- 边框、内边距在宽度中内减）
- 宽度 = width
- 高度 = height
外边距问题：
盒子的外边距问题汇总
- 上下元素出现外边距重叠，以最大值为准
- 存在嵌套关系的父子元素，如果父元素没有任何边界的设置，子元素设置margin-top会将父元素向下移动
- 设置父元素: overflow、border、padding
- 存在嵌套关系，父元素的padding和子元素的margin会出现合并，合并为和值
盒子居中
- 父元素的宽度要大于子元素的宽度
- 子元素设置margin： 0 auto;完成水平居中
- 父元素不设置高度，设置padding来完成高度靠子元素和padding撑起
三、块元素和内联元素
css将元素分为以下三类:
- 块元素
- 独占一行，自上而下排列
- 默认宽度为父元素的100%
- 自动换行
- 可以设置宽度和高度
- 行内元素 - 并列显示，自左向右排列
- 不能设置宽度和高度，但是可以设置padding、margin、border
- 不会自动换行
- 行内块 - 可以设置宽高
- 可以在一行显示，不会自动换行
display:显示方式
- inline： 将元素设置为行内元素
- block：将元素设置为块元素
- inline-block：将元素设置为行内块
- none：不显示
四、边框的圆角
border-radius: 边框的圆角