CSS布局汇总

笔记放在Github上，点击访问下载

---

CSS的布局包括：浮动布局、定位布局以及flex布局。

---

浮动布局：float

1. float:left; 左浮动 浮动元素脱离文档流，原先位置不保留
2. float:right; 右浮动
3. clear: both; 清除浮动 清除兄弟元素的浮动影响
4. overflow:hidden; 清除浮动，清除浮动 清除子元素的浮动对父元素产生的影响

---

定位 position

1. 静态定位 position:static; 默认的文档流的位置
2. 相对定位 position:relative; 相对于原来的位置进行定位
   原先位置保留，不脱离文档流
3. 绝对定位 position:absolute;
   如果有定位的祖先元素，相对于离它最近的祖先元素定位
   有祖先定位元素的绝对定位：为绝对定位元素的父元素设定"position:relative"可
   以将这个父元素变为当前绝对定位元素的父元素。
   如果没有定位的祖先元素，则相对于视口区的左上角定位
   原先位置不保留，脱离文档流
4. 固定定位 position:fixed;
   定在浏览器（视口区）的某个位置上
   原先位置不保留，脱离文档流
   定位元素：使用相对定位、绝对定位、固定定位，定位的元素
   定位元素才可以使用以下属性：left right top bottom

z-index 当两个绝对定位元素叠加在一起的时候，可以使用“z-index”来改变两个绝对定位元素出现
的顺序（ z-index 取值无需指定单位，值大的显示在上方。 ）

---

flex布局 也叫弹性盒布局-伸缩盒布局

1. flex-direction: row; 默认的，列布局
   flex-direction: column; 行布局
   flex-direction: row-reverse; 列布局的反转
   flex-direction: column-reverse; 行布局的反转

2. 主轴对齐方式
   justify-content: flex-start; 默认的 从主轴的起点对齐
   justify-content: flex-end; 主轴的终点对齐
   justify-content: center; 项目在主轴上居中对齐
   justify-content: space-between; 项目在主轴上，项目与项目之间有空间
   justify-content: space-around; 项目四周有空间

3. 交叉轴上的对齐方式
   align-items: flex-start; 默认 交叉轴的起点对齐
   align-items: flex-end; 交叉轴的终点对齐
   align-items: center; 垂直居中
   align-items: stretch; 如果项目没有设置高度将会占满整个容器的高度，默认的对齐方式
   align-items: baseline; 基准线对齐 项目内部的文本对齐

4. 换行 flex-wrap: wrap;
   项目多了一个主轴放不下，可以换行显示
   flex-flow: flex-direction flex-wrap
   flex-flow: row wrap;

5. 多主轴在交叉轴上的对齐方式 如果只有一根主轴，该属性不起作用
   align-content: flex-start;
   align-content: flex-end;
   align-content: center;
   align-content: space-around;
   align-content: space-between;
   align-content: stretch;

6. 等比例划分 flex: 1;占满父元素剩余空间。

7. 至小占据主轴上的空间 flex-basis: 200px;
   flex: 200px 1;表示先分200px,再和其他的进行等比例划分

---

属性值的计算calc

例：如果左边div的宽要固定，而右边div要占满屏幕，可以设置左边的div的width:200px;右边的宽就是calc(100%-200px);