css几种布局

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS

（ 火狐自己维护的文档 ）

---

三列布局

定位，浮动，圣杯布局 , 双飞翼布局，伪等高布局, 粘连布局

要求：

1. 两边固定 当中自适应

2. 中间列完整显示

3. 中间列优先显示

---

定位实现三列布局

缺点：定位实现必须要有一个容器，并且定位会提升层级，会对以后的布局造成影响

CSS

HTML

---

浮动实现三列布局

缺点：使用浮动进行布局中间列没有办法优先加载

css

html

---

圣杯布局

思路：

浮动：三列浮动，搭建完整的布局框架

margin： 负值，调整旁边两列的位置，使三列位于一行上

父元素padding：为了显示中间列内容，为给左右两列移动腾出位置

使用相对定位：调整旁边两列的位置

css

html

---

双飞翼布局

与圣杯布局的区别：

圣杯布局是利用父容器的左右内边距+两个从列相对定位

双飞翼布局是把中间列内容嵌套在一个新的父级块中，然后通过padding使内容显示出来

css

html

---

伪登高布局

css

html

---

stickyFooter

经典的“粘连” footer布局

我们有一块内容

当

的高度足够长的时候，紧跟在

后边的元素

会跟在

元素的后边

当

元素比较短的时候（比如小于屏幕的高度），我们期望这个Footer元素能够粘连在屏幕底部

css

html

两列布局

BFC实现两列布局

overflow 值不为visible 的块元素会生成BFC，并且BFC的区域不会与float　box重叠。

css

html

box-sizing, transform, transition, border-radius应用

知识点：

1. 禁止默认滚动条

2. 垂直水平居中

css

html