CSS布局小结

CSS小结

实现水平居中：

a.方案一text-align:center(只控制文字、行内元素、行内块级元素)
如果是块级元素可以设置display:inline-block去实现。
b.方案二marigin:auto（只对块级元素有效 ）
元素必须要设定width值，且不能为auto
c.方案三：子绝父相
对子元素设置
left:50%
transform:translateX(-50%) 在X轴上移动自身宽度的-50%
d.方案四flex
对父元素 display:flex justify-content:center（默认情况是水平方向，如果改变可设置flex-direction

实现垂直居中：

1.方案一：line-height:height/行数 （或者用span包裹多行文本则设置=height）
2.方案二：子绝父相
对子元素设置 top:50% transform:tanslateY(-50%)
3.方案三：flex 设置flex-direction:column或者align-items:center
（align-items定义fel）
4.对图片实现居中（利用line-height和vertical-align:middle的关系）
父元素设置line-height img这种 vertical-align:middle 注意：还要对父元素设置font-size：0才能完全居中（vertical-align是基线对齐的，图片底端和文字底端对齐，但是文字块受Line-height会有字符高度）
5.方案四：对父级设置display:table-cell;vertical-align：middle;
PS:设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height;

实现水平垂直居中：

1.方案一：text-align:center（水平居中）+line-height与vertical-align:middle（垂直居中）配合使用 （使用于行内/行内块级/图片）
2.方案二：table-cell+text-algin/margin:0 auto
3.方案三：绝对定位 子绝父相+transform
4.方案四：绝对居中
子绝父相+子元素margin:auto;top:0;bottom:0;left:0;right:0
5.方案五：flex

实现两列布局：

左列定宽，右列自适应：
1.浮动实现，对左列元素设置float:left
2.table实现 父元素display:table 子元素：display:table-cell 单元格自动分配宽度
3.使用绝对定位实现
4.flex布局 父元素：display:flex 右列：flex:1 /均分了父元素剩余空间/
5.grid布局 父元素 display:grid grid-template-columns:各列宽度
eg:grid-template-columns: 100px auto; /就设置了两列，一列100，一列自适应/

右列定宽，左列自适应
1.float+margin
右列float:right+左列float:left;width:100%;margin-left:-右列宽度;
2.float+overflow:hidden
右列在html中必须写在左列前，对右列float:right 左列：overflow:hidden
3.table布局
设置父元素display:table 子元素display:table-cell
4.使用绝对定位实现
子绝父相，对右列设置right:0 对左列设置left:0 right:右列宽度
5.使用flex布局
6.使用grid布局

三列布局

1.圣杯布局
（两侧定宽，中间自使用，html代码中中间列先写，优先渲染）
利用float+margin+定位实现
三列float:left
优先处理中间列：width:100%
左列：margin-left:-100%；右列：margin-left:-右列宽度;
中间列内容将部分被覆盖：
解决：外层容器设置padding:0 200px 0 200px（上右下左）
造成：左右列也到中间去了，解决方案 relative
左列 left:-左列宽度 右列 right:-右列宽度。

2.双飞翼布局
浮动+padding实现 与圣杯布局的主要不同在于圣杯布局处理中间列被覆盖问题的解决办法是给最外层设置padding，而双飞翼布局的解决办法在于给中间块
增加一个内层的inner,然后设置inner层的magrin

关于比较详细的文章讲解：
https://juejin.im/post/5aa252ac518825558001d5de#heading-8