【前端面试指南】CSS布局

最新推荐文章于 2022-06-12 20:52:46 发布

Light.T

最新推荐文章于 2022-06-12 20:52:46 发布

阅读量302

点赞数

分类专栏：前端面试指南

本文链接：https://blog.csdn.net/qq_41629800/article/details/105862603

版权

前端面试指南专栏收录该内容

27 篇文章 4 订阅

订阅专栏

文章目录

1.居中布局

1. 水平居中布局-8种方法

行内元素水平居中：
1. 父级元素CSS设置为text-align: center;
块级元素水平居中：
1. 子级定宽：
```
.child{
  width:100px /*没有设置会平铺整行*/
  margin:0 auto;
}
```
2. 子级不定宽：
  1. 方法一：text-align + inline-block 属性配合使用
    1. 优点：基于CSS2，浏览器兼容效果好，可设置多个子级元素
    2. 缺点：text-align有继承性，子集元素需要重新设计。
```
.father{
  text-align:center;
}
.child{
  display:inline-block;
  text-align:left;/*取消父级继承*/
}
```
    1. 方法二：table + margin属性配合使用
      1. 优点：只要对子集元素设置就可以了。
```
.child{
  display:table;
  margin:0 auto; /* 一个值:上右下左,二个值:上下 左右,三个值:上 左右 下,四个值:上右下左 */
}
```
  1. 方法三：对父级元素使用flex-box布局，指定justify-content属性为center
    1. 优点：简单
```
.father{
  display:flex;
  justify-content:center; 
}
.child{
  display:table;
}
```
  2. 方法四：父级元素设置position为relative、absolute、fixed，子级元素设置left和负margin-left
    1. 缺点：必须知道子级元素width值
```
.father{
   position:relative;/* absolute fixed 亦可 */
}
.child{
  position:absolute;
  width:100px; 
  left:50%;  
  margin-left:-50px; width值的一半
} 
```
  3. 方法五：父级元素设置position为relative、absolute、fixed，子级元素设置left/right和margin:auto（注意不是margin:0 auto）
    1. 缺点：父级元素必须设置height值，子级元素width值不设置宽度会铺满整行
```
.father{
  height:200px;
  position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  height:80px;  
  left:0;
  right:0;
  margin:auto;
        }
```
  4. 方法六：利用position和left和transform，transform: translateX(-50%)。
    1. 优点：父级无论是否脱离文档流不影响子集效果
    2. 缺点：transform属性基于CSS3，浏览器支持效果不好
```
.father{
   height:200px;
   position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
}
```

在这里插入图片描述

2. 垂直居中布局-7种方法

行内元素
1. 单行文本垂直居中
  1. 方法一：父级元素定高，设置line-height=height；
```
.father{
  height:100px;
  line-height:100px;
}
```
  2. 方法二：父级元素不定高，设置padding-top=padding-bottom；
```
.father{
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
}
```
2. 多行文本垂直居中
  1. 方法一：设置父元素table，子元素table-cell和vertical-align
```
.father{
  display:table;
}
.child{
  display:table-cell;
  vertical-align:middle;
```
块状元素垂直居中
1. 方法一：对父级元素使用flex-box布局，指定align-items属性为center
  1. 缺点：父级元素必须显示设置height值
```
.father{
  height:100px;
  display:flex;
  align-items:center;
}
```
2. 方法二：父级元素设置position为relative、absolute、fixed，子级元素设置top和负margin
  1. 缺点：父级元素必须设置height值，必须知道子级元素height值
```
.father{
   height:200px;
   position:relative;/*absolute fixed 亦可*/
}
.child{
  position:absolute;
  top:50%;
  height:80px; 
  margin-top:-40px; /*height值的一半*/
}
```
3. 方法三：父级元素设置position为relative、absolute、fixed，子级元素设置top/bottom和margin:auto（注意不是margin:0 auto）
  1. 缺点：父级元素必须设置height值，子级元素height值不设置高度会铺满
```
.father{
   height:200px;
   position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  height:80px;  
  top:0;
  bottom:0;
  margin:auto;
}
```
4. 方法四：利用position和top和transform，transform: translateY(-50%)。
  1. 优点：父级无论是否脱离文档流不影响子集效果
  2. 缺点：transform属性基于CSS3，浏览器支持效果不好
```
.father{
   height:200px;
   position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}
```

3. 水平垂直居中布局-5种方法

方法一：绝对定位+margin:auto
1.缺点：子级元素需要设置宽高

.father{
  position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

方法二：绝对定位+负margin

  1. 缺点：子级元素需要设置宽高

  .father{
    position:relative;/*absolute fixed*/
  }
  .child{
    position:absolute;
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
  }

方法三：绝对定位+transform，配合使用实现水平和垂直居中

优点：子级不需设置宽高

.father{
  position:relative;/*absolute fixed*/
}
.child{
  position:absolute;
  left:50%; 
  top:50%;
  transform: translate(-50%,-50%); 
}

方法四：flex布局

简单，3句话实现不定宽高水平垂直居中

.father{
  display:flex;
  justify-content:center;  
  align-items:center; 
}

方法五：table + margin属性实现水平居中，table-cell 和 vertical-algin 配合实现垂直居中
1. 优点：对浏览器友好
```
.father{
  display:table;
  text-align:center;
}
.child{
  display:table-cell;
  vertical-align: middle;
} 
```

2.多列布局

1. 两列布局：左列固定宽+右列自适应布局

float+margin属性
1. 优点：实现简单
2. 缺点：右边的margin-left要等于左边定宽的width ，左侧定宽是浮动的，与右侧自适应结合，浏览器兼容性不好。
```
.left{
  height:100px;
  width:50px;
  float:left;
}
.right{
  height: 100px;
  margin-left: 50px; /*和left的width值一样*/
}
```

float+margin属性，优化版本

优点：两边都是浮动的

.left{
  width: 100px;
  height: 300px;
  float: left;
  background-color: red;
}
.right-container{
  float: right;
  margin-left: -100px;
  width: 100%;
}
.right{
  height: 300px;
  background-color: blue;
}

float+overflow属性，配合使用

优点：实现简单

缺点：开启了BFC模式，设置了内容溢出的情况

.left{
  width: 100px;
  height: 300px;
  float:left;
}
.right{
  height: 300px;            
  overflow: hidden;
}

display属性的table相关值使用

优点：浏览器兼容性好

缺点：设置了table值

.parent{
  width: 100%;               
  display: table;
  table-layout: fixed;
}
.left{
  height: 300px;   
  width: 200px;
  display: table-cell;
}
.right{ 
  height: 300px;   
  display: table-cell;              
}

2. 三列布局：左两列定宽+自适应

float+margin属性配合使用

.left{
  height: 300px;   
  width: 200px;
  float: left;
}
.center{
  float: left;
  height: 300px;   
  width: 200px;
}
.right{ 
  margin-left: 400px;
  height: 300px;   
}

3.圣杯\双飞翼布局：

圣杯布局：两边定宽+中间自适应：

方法一：设置margin-left和margin-right

.left{
    height: 300px;   
    width: 200px;
    float: left;
}
.center{
  margin-left: 200px;
  margin-right: 200px;
  height: 300px;   
}
.right{ 
  height: 300px;   
  width: 200px;
  float: right;
}

4.等分布局

等分布局：

方法一：float属性实现等分布局效果

.col1,.col2,.col3,.col4 {
  width: 25%;
  height: 100px;
  float: left;
}

方法二：display属性 table 实现等分布局效果

.col1,.col2,.col3,.col4 {
  height: 100px;
  display: table-cell;
}

等分+间隙布局：

方法一：margin和padding属性

.parent-container{
  overflow: hidden;
}
.parent{
  height: 100px;
  margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
  width: 25%;
  height: 100px;
  float: left;
  box-sizing: border-box;
  padding-left: 10px;
}
.inner {
  height: 100px;
}

方法二：table和table-cell属性

.parent-fix{
  overflow: hidden;
}
.parent{
  display: table;
  height: 100px;
  width: 602px;
  margin-left: -20px;
}
.col1,.col2,.col3,.col4 {
  height: 100px;
  display: table-cell;
  box-sizing: border-box;
  padding-left: 20px;
}
.inner {
  height: 100px;
}

方法三：CSS3属性

.parent {
  column-count: 4;
  column-width: 100px;
  columns: 4 100px ;/*等价于上两式*/
  column-gap:20px ;/*间隙宽度*/
  /*间隙样式*/
  column-rule-width:5px;
  column-rule-color: red;
  column-rule-style: double;
  column-rule:5px red double;/*等价于上三式*/
}
.col1,.col2,.col3,.col4 {
  height: 100px;
}

5.等高布局

方法一：display属性 table 实现等分布局效果，表格中的单元格默认等高
1. 优点：对浏览器友好
```
.parent{
  display: table;
  table-layout: fixed;
}
.left,.right{
  display: table-cell;
}
```

方法二：padding + margin 属性实现等高布局效果

.parent{
   overflow: hidden;
}
.left,.right{
  float: left;
  width: 300px;
  padding-bottom: 999px;
  margin-bottom: -999px;
}

Light.T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录