list
list-style：列表属性
list-style-image：使用图片代替列表标记背景设置
| 属性 | 作用 |
|---|---|
| background-size | 背景图的大小，cover,contain |
| background-repeat | 平铺 |
| background-position | 背景的位置 |
| background-origin | 对齐方式 |
| object-fit | 可以使图片适应背景的大小 |
| box-sizing | 在用padding和border时不会撑大盒子 |
3. 盒子模型
| 属性 | 作用 |
|---|---|
| padding | 盒子的内边距，方向：上右下左 |
| margin | 盒子之间的距离 |
| border | 边线 |
| border-radius | 边角的弧度，50%为圆形 |
| opacity | 透明度，0~1 |
| box-shadow | 阴影 |
| display | inline转换为行内元素，block转化为块级元素 |
3. float 浮动，使块级元素可以同行显示
| 属性 | 作用 |
|---|---|
| float | 浮动，left、right浮动方向 |
| clear | left清除左边的附佛那个元素 |
| overflow | hidden解决高度塌陷 |
4. position 定位
| 属性 | 作用 |
|---|---|
| static | 默认定位，既在文档流中的位置 |
| relative | 相对定位，可以用margin:auto实现居中，和绝对定位配合作为定位基准点 |
| absulote | 绝对定位，脱离文档流，float也会脱离文档流 |
| fixed | 固定定位，一般在浏览器的头部，可以设置z-index来使其不被覆盖 |
5. flex 响应式定位
| 属性 | 作用 |
|---|---|
| display:flex | 响应式定位，不会高度塌陷 |
| flex-wrap | 当宽度不足时是否换行，wrap表示换行 |
| justify-content | 水平对齐方式，center居中，space-around左右等距，space-between左右对齐，中间等距 |
| align-items | 垂直对齐，flex-end底部对齐,center居中对齐 |
| flex-direction | 设置主轴方向，默认为row横向 |
| flex | 设置子元素的权重，例：flex:1; |