CSS布局学习 垂直居中 二栏布局 三栏布局 设置BFC

垂直居中

1. 设置position：relative和margin-top为负数
2. 设置div的transform:translateY(-50%)
3. 设置父元素display：flex，align-items:center,justify-content:center

二栏布局

1. float+margin-left实现：
2. position:absolute+margin-left实现：
3. float+BFC:通常将右侧设为BFC，如overflowhidden
4. flex布局

一栏不定 一栏自适应

1. float:left overflow:hidden
2. flex:1

两栏等高

flex

左右宽度1:2 右边又分为上下结构，高度比1:1

flex left 33width% height 50%

三栏布局 5种方式

1. 使用float + marginleft、right方式，但这里注意要清除浮动，清除浮动的目的就是使得子元素在父元素内部浮动，
   浮动清除方式有，1添加一个兄弟浮动元素，clear：both，2父元素添加overflow：auto；zoom：1 3. outer：after{ clear：both }
2. 使用position：absolute left right设置
3. 使用父元素display：table 子元素table-cell 但是这个div内文字多了会出现问题
4. flex
5. grid 使用grid-template-columns:200px auto 200px;

BFC

哪些元素会生成BFC？

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block table-cell table-caption flex inline-flex
• overflow不为visible
  作用：
• 设置二栏布局
• 清除内部浮动
• 防止margin重叠
  BFC的第五条规则：BFC就是页面上的一个隔离独立容器，容器子元素不会影响到外面的元素，反之如此。