CSS高频面试题
1.元素水平垂直居中
1.1 水平居中
1.1.1行内元素
- 给其父元素添加text-align: center;（父元素是块级元素的情况下，否则先转换为块级元素）
- 将该元素转换为块元素display:block;再用 margin: 0 auto;
注意： margin auto是自动根据剩余的长度居中对齐，并不是0
1.1.2 块元素
- 具有宽高的块级元素： margin: 0 auto;
- 没有宽高的块级元素
法1：
子元素：display:inline
父元素：text-align:center
法2：
首先子绝父相，
子元素：left：50%；
margin-left：-50px（元素宽度一半）
translateX（-50%）
父元素：display:flex
justify-center:center
1.2 垂直居中
前提：
html模板：
内容垂直居中
1.2.1 单行文本
可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中
针对行内元素，可通过设置vertical-align: middle;以及line-height进行垂直居中
1.2.2 多行文本
针对文本，通过display:flex;配合align-items和justify-content实现文本居中
1.2.3 块级元素
参考css实现垂直居中的几种方式（布局常用）_Deng冬的博客-CSDN博客_垂直居中的几种方法
1.3 水平垂直居中（五种）
1.盒子有宽高
1）
父：position: relative
子：position: absolute；
top：50%；
left：50%；
margin-top：-25px；
margin-left：-25px；
2）
父：position: relative
子：position: absolute；
top：0；
left：0；
right:0；
bottom：0；
margin：auto；
2. 盒子没有给宽高
父：position: relative
子：position: absolute；
top：50%；
left：50%；
transform：translateX（-50%）；
transform：translateY（-50%）；
//transform：translate(-50%, -50%)
3. 利用伸缩盒的方式：当普通盒子被调整为伸缩盒后，要让子盒子水平垂直居中，就得给父盒子设置为：
display：flex；
justify-content：center；//项目在主轴上的对齐方式
align-items：center；//在交叉轴上的对齐方式
4.利用JS的方式
5.将显示方式设置为表格
.father{
display: table-cell;//使子元素成为表格单元格
vertical-align: middle;//控制文本垂直居中
text-align: center;//控制文本水平居中
width: 500px;
height: 600px;//必须要有固定宽高
}
.son{
display:inline-block;
}
2.两列布局(左列定宽，右边自适应）
1. float + margin 布局
左：float: left; 给宽高
右：只给高，给margin-left(大于或等于左列的宽度)
2. float + overflow 布局（float+BFC）
左：float: left; 给宽高
右边：只给高， overflow: hidden
3. float
左右盒子双浮动，
左width: 200px;
右width: calc(100% - 200px);
4. 绝对定位布局
左：position: absolute; 给宽高
右：只给高，给margin-left。
5. table布局
父display:table；width：100%，给高
左display：table-cell；只给width：200px（给宽）
右display：table-cell，不给宽高
6. flex
父display: flex; width：100%，给高
左只给宽200px;
右只flex: 1;
7.grid布局
#parent {
width: 100%;
height: 400px;
display: grid;
grid-template-columns: 200px auto;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
3.三列布局（中间自适应，两边固定）
1.flex布局（注意三个盒子的顺序）
flex布局
左边
右边
2. 圣杯布局