【前端面試指南】CSS佈局

文章目錄

1.居中佈局

2.多列布局

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;/*取消父級繼承*/
}

方法二：table + margin屬性配合使用

優點：只要對子集元素設置就可以了。

.child{
  display:table;
  margin:0 auto; /* 一個值:上右下左,二個值:上下 左右,三個值:上 左右 下,四個值:上右下左 */
}

方法三：對父級元素使用flex-box佈局，指定justify-content屬性爲center
1. 優點：簡單
```
.father{
  display:flex;
  justify-content:center; 
}
.child{
  display:table;
}
```

方法四：父級元素設置position爲relative、absolute、fixed，子級元素設置left和負margin-left

缺點：必須知道子級元素width值

.father{
   position:relative;/* absolute fixed 亦可 */
}
.child{
  position:absolute;
  width:100px; 
  left:50%;  
  margin-left:-50px; width值的一半
}

方法5：父級元素設置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;
}
```
方法六：利用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

缺點：子級元素需要設置寬高

.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;
}
``

【前端面試指南】CSS佈局

文章目錄

1.居中佈局

1. 水平居中佈局-8種方法

2. 垂直居中佈局-7種方法

3. 水平垂直居中佈局-5種方法

2.多列布局

1. 兩列布局：左列固定寬+右列自適應佈局

2. 三列布局：左兩列定寬+自適應

3.聖盃\雙飛翼佈局：

4.等分佈局

5.等高佈局

工作中用到的腳本合集

24-5-18 X

多臂賭博機與生涯規劃

【前端面試指南】JS編程題彙總

【前端面試指南】應屆生該怎麼談期望薪酬？

【前端面試指南】如何讓你的簡歷脫穎而出？

【玩轉算法】入門心得

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結