css基础 布局

1. list
   list-style：列表属性
   list-style-image：使用图片代替列表标记

2. 背景设置

属性	作用
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;