三级无码AV在线,夜夜被躁高潮A片免费看视频,新亚洲天堂,欧美日本中文在线,欧美在线综合,国内精品久久久久久久久久98,国产灬性灬淫…乱…视频…,黄色毛片A级

前言

一篇文章的時間，讓我們回到畫頁面的那個夏天，徹底搞懂前端頁面布局。

本文期待

整合布局知識網(wǎng)絡(luò)
整合最佳實現(xiàn)并整理樣式片段（以 less 為例），拿走即用
高頻面試題梳理回答

知識網(wǎng)絡(luò)

常見布局

對于 CSS 的布局，在應(yīng)用層面，分為三類，居中布局、多列布局、全屏布局；

居中分為垂直、水平和平面；
多列分為兩列、三列、圣杯、雙飛翼；
全屏分為等分、等高、全屏；

graph 	TB
A[常見布局] --> B1[居中布局]
B1 --五種方案--> C11[水平居中]
B1 --五種方案--> C12[垂直居中]
B1 --五種方案--> C13[平面居中]

A --> B3[全屏布局]

A --> B2[多列布局]
B2 --七種方案--> C21[兩列右側(cè)自適應(yīng)布局]
B2 --四種方案--> C22[三列右側(cè)自適應(yīng)布局]
B2 --兩種方案--> C23[三列中間自適應(yīng)布局,圣杯-雙飛翼]

每個布局類型都有他們對應(yīng)的最佳實踐，衡量標(biāo)準(zhǔn)主要是兼容性和組成場景，舉柵格多列布局而言，移動端通用是 flex 新特性，而 PC 端則要更多的考慮兼容從而使用 margin 負(fù)值+盒模型 inline-block 技巧；

常見實現(xiàn)

這些布局的實現(xiàn)有六種常用實現(xiàn)：盒模型、浮動、定位、flex 布局、Grid 布局和 Shapes 布局。

graph TB
B4[常見實現(xiàn)] --> C1[Float]
B4 --> C2[盒模型]
B4 --> C3[定位]
B4 --> C4[Flex 和 grid]
B4 --> C5[Columns 和 Shapes]

接下來，我們以應(yīng)用層面為分析主線，梳理分別的最佳實現(xiàn)吧！

居中布局

使用

復(fù)制粘貼

鏈接：https://github.com/Sympath/duojiUI/blob/master/src/packages/less/center.less

垂直

需求可以分為四大類六種場景，從而衍生出對應(yīng)的六種最佳處理

graph 	TB
A[垂直居中] --> B1[內(nèi)聯(lián)場景]
A --> B2[塊元素場景]
A --> B3[多元素場景]
A --> B4[脫離文檔流場景]
B4 --> C1[定高]
B4 --> C2[不定高]
B4 --> C3[包裹性]

內(nèi)聯(lián)（inline）級別場景

采用父容器設(shè)置line-height即可

 // 內(nèi)聯(lián)（inline）級別 父容器設(shè)置 
.inline-mixin (@line-height) {
  line-height: @line-height;
}

塊（block）級別場景

采用子元素轉(zhuǎn)為inline-block然后復(fù)用內(nèi)聯(lián)場景即可

// 塊（block）級別  父容器設(shè)置
.block-mixin (@line-height) {
  .center-y-inline(@line-height);
  .item {
    display: inline-block;
  }
}

多子容器場景

適合 flex 布局，父容器設(shè)置

// flex 布局級別+多子容器  父容器設(shè)置
.flex {
  display: flex;
  justify-content: center;
}

脫離文檔流

這些類均需要自身設(shè)置，包含兩種情況，定高、不定高，不定奧存在兩種解決方案，transform 和包裹性 margin

// 定位級別+脫離文檔流+不定高  
.position {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); // 存在多瀏覽器兼容性問題，所以需要寫多套
}
// 定位級別+脫離文檔流+定高  自身設(shè)置
.position-mixin (@height : 100%) {
  position: absolute;
  top: 50%;
  margin-top: -@height/2;
}
// 定位級別+脫離文檔流+包裹性 （最佳方案）  自身設(shè)置
.position-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

匯總記憶：匯總來說可以這么記憶，一共六種。

父級設(shè)置有三類，內(nèi)聯(lián)line-height，塊級inline-block+line-height，多子容器flex+align-items: center；
自身設(shè)置有三類，脫離文檔選定位，定高 margin-top 負(fù)值，不定高 translate，最佳包裹配置margin: auto

水平

需求同樣是這六種場景

	graph 	TB
A[水平居中] --> B1[內(nèi)聯(lián)場景]
A --> B2[塊元素場景]
A --> B3[多元素場景]
A --> B4[脫離文檔流場景]
B4 --> C1[定高]
B4 --> C2[不定高]
B4 --> C3[包裹性]

內(nèi)聯(lián)（inline）級別場景

采用父容器設(shè)置line-height即可

 // 內(nèi)聯(lián)（inline）級別 父容器設(shè)置 
.inline-mixin () {
	 text-align: center;
}

塊（block）級別場景

采用子元素轉(zhuǎn)為inline-block然后復(fù)用內(nèi)聯(lián)場景即可

// 塊（block）級別  自身設(shè)置
.block {
  margin-left: auto;
  margin-right: auto;
}

多子容器場景

適合 flex 布局，父容器設(shè)置

.flex {
  display: flex;
  align-items: center;
}

脫離文檔流

這些類均需要自身設(shè)置，包含兩種情況，定高、不定高，不定奧存在兩種解決方案，transform 和包裹性 margin

// 定位級別+脫離文檔流+不定寬  自身設(shè)置
.position {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); // 存在多瀏覽器兼容性問題，所以需要寫多套
}
// 定位級別+脫離文檔流+定寬  自身設(shè)置
.position-mixin (@width:100%) {
  position: absolute;
  left: 50%;
  margin-left: -@width/2;
}
// 定位級別+脫離文檔流+包裹性 （最佳方案）  自身設(shè)置
.position-wrap {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

匯總記憶：匯總來說可以這么記憶，一共六種，父級設(shè)置有兩類，內(nèi)聯(lián)text-align，多子容器display: flex+align-items: center；自身設(shè)置有 1+3，塊級margin:auto；；脫離文檔選定位，定寬 margin 負(fù)值，不定寬 translate，最佳包裹配置margin: auto

平面

綜合下水平和垂直就好

#center {
  .inline-mixin(@line-height) {
    #center > #x > .inline;
    #center > #y > .inline-mixin(@line-height)
  }
  // 塊（block）級別  父容器設(shè)置+注意需要把子容器設(shè)置 item 的類名
  .block-mixin (@line-height) {
    .center-x-block;
    .center-y-block(@line-height)
  }
  // flex 布局級別 多子容器  父容器設(shè)置
  .flex {
    #center > #x > .flex;
    #center > #y > .flex;
  }
  // 定位級別  脫離文檔流+定寬高  自身設(shè)置
  .position-mixin (@width, @height) {
    .center-x-position(@width);
    .center-y-position(@height);
  }
  // 定位級別+脫離文檔流+不定寬  自身設(shè)置
  .position {
    #center > #x > .position();
    #center > #y > .position();
    transform: translate(-50%, -50%);
  }
  // 定位級別+脫離文檔流  自身設(shè)置  利用了包裹性（最佳方案）
  .position-wrap {
    #center > #x > .position-wrap();
    #center > #y > .position-wrap();
    margin: auto;
  }
}

內(nèi)容總結(jié)

綜合如上我們可以得出一個超牛的代碼模塊，居中相關(guān)的拿走即用，這里說幾條規(guī)定便于使用

命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
每個方案的使用說明都至少存在如下信息（面向場景設(shè)置位置特點（可無））

/** 居中相關(guān)  
1. 命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
2. 每個方案的使用說明都至少存在如下信息
面向場景 設(shè)置位置 特點（可無）
*/
#center {
  //>>>>>>>>>>>>>>>>>> 垂直居中
  #y {
    // 內(nèi)聯(lián)（inline）級別 父容器設(shè)置 
    .inline-mixin (@line-height) {
      line-height: @line-height;
    }
    // 塊（block）級別  父容器設(shè)置
    .block-mixin (@line-height) {
      .center-y-inline(@line-height);
      .item {
        display: inline-block;
      }
    }
    // flex 布局級別+多子容器  父容器設(shè)置
    .flex {
      display: flex;
			align-items: center;
    }
    // 定位級別+脫離文檔流+不定寬  自身設(shè)置
    .position {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); // 存在多瀏覽器兼容性問題，所以需要寫多套
    }
    // 定位級別+脫離文檔流+定高  自身設(shè)置
    .position-mixin (@height : 100%) {
      position: absolute;
      top: 50%;
      margin-top: -@height/2;
    }
    // 定位級別+脫離文檔流+包裹性 （最佳方案）  自身設(shè)置
    .position-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
			margin: auto 0;
    }
  }
  //>>>>>>>>>>>>>>>>>> 水平居中
  #x {
    // 內(nèi)聯(lián)（inline）級別 父容器設(shè)置
    .inline {
      text-align: center;
    }
    // 塊（block）級別  自身設(shè)置
    .block {
			margin-left: auto;
      margin-right: auto;
    }
    // flex 布局級別+多子容器  父容器設(shè)置
    .flex {
      display: flex;
			justify-content: center;
    }
    // 定位級別+脫離文檔流+不定寬  自身設(shè)置
    .position {
      position: absolute;
      left: 50%;
      transform: translateX(-50%); // 存在多瀏覽器兼容性問題，所以需要寫多套
    }
    // 定位級別+脫離文檔流+定寬  自身設(shè)置
    .position-mixin (@width:100%) {
      position: absolute;
      left: 50%;
      margin-left: -@width/2;
    }
    // 定位級別+脫離文檔流+包裹性 （最佳方案）  自身設(shè)置
    .position-wrap {
      position: absolute;
      left: 0;
      right: 0;
			margin: 0 auto;
    }
  }
  .inline-mixin(@line-height) {
    #center > #x > .inline;
    #center > #y > .inline-mixin(@line-height)
  }
  // 塊（block）級別  父容器設(shè)置+注意需要把子容器設(shè)置 item 的類名
  .block-mixin (@line-height) {
    .center-x-block;
    .center-y-block(@line-height)
  }
  // flex 布局級別 多子容器  父容器設(shè)置
  .flex {
    #center > #x > .flex;
    #center > #y > .flex;
  }
  // 定位級別  脫離文檔流+定寬高  自身設(shè)置
  .position-mixin (@width, @height) {
    .center-x-position(@width);
    .center-y-position(@height);
  }
  // 定位級別+脫離文檔流+不定寬  自身設(shè)置
  .position {
    #center > #x > .position();
    #center > #y > .position();
    transform: translate(-50%, -50%);
  }
  // 定位級別+脫離文檔流  自身設(shè)置  利用了包裹性（最佳方案）
  .position-wrap {
    #center > #x > .position-wrap();
    #center > #y > .position-wrap();
    margin: auto;
  }
}

多列布局之兩列布局

在線預(yù)覽 Demo：https://zzmwzy.gitee.io/css-test-online/dist/index.html

需求：左列定寬，右列自適應(yīng)

Vue 版組件復(fù)制粘貼

鏈接：https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/two-column-layout.vue

存在七種解決方案，選出四種根據(jù)場景的最佳方案，另外三種擴展思路

浮動：組合清浮動（非等高布局推薦）
表格（等高-pc 端推薦）
flex 布局（等高-移動端推薦）
定位（需要脫離文檔流）
浮動：組合 margin 負(fù)值
浮動：組合 BFC（可以overflow或display: flex；都會有副作用，需要考慮場景使用）
gird 布局

浮動：組合 margin 負(fù)值

結(jié)構(gòu)


<div?id="left">div>

<div?id="right">
??<div?id="inner">div>
div>

這種適合右側(cè)比左側(cè)高的情況，如果右側(cè)比左側(cè)高就涼了，因為浮動形成 bfc 從而會導(dǎo)致高度塌陷

// 適合 PC 端  父容器  存在【右側(cè)比左側(cè)高，浮動導(dǎo)致塌陷】問題
.float-margin-mixin (@leftWidth: 0) {
  .left {
    float: left;
    width: @leftWidth;
  }
  .right {
    margin-left: @leftWidth;
  }
}

浮動：組合清浮動

處理【右側(cè)比左側(cè)高，浮動導(dǎo)致塌陷】的情況

改寫 html 結(jié)構(gòu)，在自適應(yīng)模塊外層進行包裹

<div?class="left">div>

<div?class="right-fix">
??<div?class="right">
????<div?class="inner">div>
??div>
div>

樣式設(shè)置：左右均浮動，然后在右側(cè)外層下清除浮動

 // 浮動：組合清浮動
// 適合 PC 端  父容器  需要在右邊自適應(yīng)模塊的 html 外層再包裹一層 right-fix 類名元素
.float-clear-mixin (@leftWidth: 0) {
  .left,
  .right-fix {
    float: left;
  }
  .left {
    width: @leftWidth;
  }
  .right {
  }
}

浮動：組合 BFC

浮動元素不會和 BFC 重疊

// 浮動：組合 BFC flex
// 適合 PC 端  父容器  均浮動（最佳方案）
.float-bfc-mixin (@leftWidth: 0) {
  .left,
  .right-fix {
    float: left;
  }
  .left {
    width: @leftWidth;
  }
  .right {
    display: flex;
    // 或 overflow: hidden;
  }
}

表格

table 布局默認(rèn)是等高布局

// 表格
// 適合需要等高的布局  父容器  table 布局默認(rèn)是等高布局
.table-mixin (@leftWidth: 0) {
  display: table;
  width: 100%;
  .left {
    display: table-cell;
    width: @leftWidth;
  }
  .right {
    display: table-cell;
  }
}

定位

// 定位
// 適合需要脫離文檔流的布局  父容器
.position-mixin (@leftWidth: 0) {
  position: relative;
  .left {
    position: absolute;
    width: @leftWidth;
  }
  .right {
    position: absolute;
    left: @leftWidth;
    right: 0;
  }
}

flex 布局

// flex 布局
// 適合不需要考慮兼容性的布局  父容器
.flex-mixin (@leftWidth: 0) {
  display: flex;
  .left {
    width: @leftWidth;
  }
  .right {
    flex: 1;
  }
}

gird 布局

// gird 布局
// 適合不需要考慮兼容性的布局（目前更建議使用 flex）  父容器
.gird-mixin (@leftWidth: 0) {
  display: grid;
  grid-template-columns: @leftWidth auto; // 列寬
  grid-template-rows: repeat(2, 600px); // 列高
}

兩列布局整理匯總

// ## 兩列布局
#two-column {
  // 浮動：組合 margin 負(fù)值
  // 適合 PC 端  父容器  存在【右側(cè)比左側(cè)高，浮動導(dǎo)致塌陷】問題
  .float-margin-mixin (@leftWidth: 0) {
    .left {
      float: left;
      width: @leftWidth;
    }
    .right {
      margin-left: @leftWidth;
    }
  }
  // 浮動：組合清浮動
  // 適合 PC 端  父容器  需要在右邊自適應(yīng)模塊的 html 外層再包裹一層 right-fix 類名元素
  .float-clear-mixin (@leftWidth: 0) {
    .left,
    .right-fix {
      float: left;
    }
    .left {
      width: @leftWidth;
    }
    .right {
    }
  }
  // 浮動：組合 BFC flex
  // 適合 PC 端  父容器  均浮動（最佳方案）
  .float-bfc-mixin (@leftWidth: 0) {
    .left,
    .right-fix {
      float: left;
    }
    .left {
      width: @leftWidth;
    }
    .right {
      display: flex;
      // 或 overflow: hidden;
    }
  }
  // 表格
  // 適合需要等高的布局  父容器  table 布局默認(rèn)是等高布局
  .table-mixin (@leftWidth: 0) {
    display: table;
    width: 100%;
    .left {
      display: table-cell;
      width: @leftWidth;
    }
    .right {
      display: table-cell;
    }
  }
  // 定位
  // 適合需要脫離文檔流的布局  父容器
  .position-mixin (@leftWidth: 0) {
    position: relative;
    .left {
      position: absolute;
      width: @leftWidth;
    }
    .right {
      position: absolute;
      left: @leftWidth;
      right: 0;
    }
  }
  // flex 布局
  // 適合不需要考慮兼容性的布局  父容器
  .flex-mixin (@leftWidth: 0) {
    display: flex;
    .left {
      width: @leftWidth;
    }
    .right {
      flex: 1;
    }
  }
  // gird 布局
  // 適合不需要考慮兼容性的布局（目前更建議使用 flex）  父容器
  .gird-mixin (@leftWidth: 0) {
    display: grid;
    grid-template-columns: @leftWidth auto; // 列寬
    grid-template-rows: repeat(2, 600px); // 列高
  }
}

多列布局之三列布局

在線預(yù)覽 Demo：https://zzmwzy.gitee.io/css-test-online/dist/index.html

需求： 左中定寬右側(cè)自適應(yīng)

Vue 版組件復(fù)制粘貼

鏈接：https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/muti-column-layout.vue

<div?class="layout-wrapper"?:class="mode">
????<div?class="left">
????div>
????<div?class="center">
????div>
????<div?class="right">
????div>
??div>

浮動：組合 margin

這種適合右側(cè)比左側(cè)高的情況，如果右側(cè)比左側(cè)高就涼了，因為浮動形成 bfc 從而會導(dǎo)致高度塌陷

.layout-tree-column-float-margin (@leftWidth: 0) {
  .left, .center{
		float:left;
    width: @leftWidth;
  }
  .right {
		margin-left: @leftWidth;
  }
}

浮動：組合 BFC

浮動元素不會和 BFC 重疊

.layout-tree-column-float-bfc (@leftWidth) {
  .left, .center {
		float:left;
    width: @leftWidth;
  }
  .right {
      overflow: hidden;
  }
}

表格

table 布局默認(rèn)是等高布局

.layout-tree-column-table (@leftWidth) {
  display: table;
  width: 100%;
  .left, .center {
    display: table-cell;
    width: @leftWidth
  }
  .right {
    display: table-cell;
  }
}

定位

.layout-tree-column-position (@leftWidth) {
  position: relative;
  .left, .center {
    width: @leftWidth
  }
  .right {
    position: absolute;
		left: @leftWidth;
    right: 0;
  }
}

flex 布局

.layout-tree-column-flex (@leftWidth) {
  display:flex;
  .left, .center {
    width: @leftWidth
  }
  .right {
    flex:1;
  }
}

gird 布局

.layout-two-column-gird (@leftWidth, @centerWidth, @leftHeight) {
  display: grid;
  grid-template-columns: @leftWidth @centerWidth auto; // 列寬
  grid-template-rows: repeat(2,@leftHeight); // 列高
  .left {

  }
  .right {
	
  }
}

三列布局整理匯總

/** 布局相關(guān)  
1. 命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
2. 每個方案的使用說明都至少存在如下信息
面向場景 設(shè)置位置 特點（可無）
*/
#layout {
  // ## 兩列布局
  #three-column {
    // 浮動：組合 margin 負(fù)值
    // 適合 PC 端  父容器  存在【右側(cè)比左側(cè)高，浮動導(dǎo)致塌陷】問題
    .float-margin-mixin (@leftWidth) {
      .left {
        float:left;
        width: @leftWidth;
      }
      .right {
        margin-left: @leftWidth;
      }
    }
    // 浮動：組合清浮動
    // 適合 PC 端  父容器  需要在右邊自適應(yīng)模塊的 html 外層再包裹一層 right-fix 類名元素
    .float-clear-mixin (@leftWidth) {
      .left, .right-fix {
        float:left;
      }
      .left {
        width: @leftWidth;
      }
      .right {
        .inner {
          clear: both;
        }
      }
    }
    // 浮動：組合 BFC
    // 適合 PC 端  父容器  均浮動（最佳方案）
    .float-bfc-mixin (@leftWidth) {
      .left, .right-fix {
        float:left;
      }
      .left {
        width: @leftWidth;
      }
      .right {
        .inner {
          clear: both;
        }
      }
    }
    // 表格
    // 適合需要等高的布局  父容器  table 布局默認(rèn)是等高布局
    .table-mixin (@leftWidth) {
      display: table;
      width: 100%;
      .left {
        display: table-cell;
        width: @leftWidth
      }
      .right {
        display: table-cell;
      }
    }
    // 定位
    // 適合需要脫離文檔流的布局  父容器
    .position-mixin (@leftWidth) {
      position: relative;
      .left {
        width: @leftWidth
      }
      .right {
        position: absolute;
        left: @leftWidth;
        right: 0;
      }
    }
    // flex 布局
    // 適合不需要考慮兼容性的布局  父容器
    .flex-mixin (@leftWidth) {
      display:flex;
      .left {
        width: @leftWidth
      }
      .right {
        flex:1;
      }
    }
    // gird 布局
    // 適合不需要考慮兼容性的布局（目前更建議使用 flex）  父容器
    .gird-mixin (@leftWidth) {
      display: grid;
      grid-template-columns: @leftWidth auto; // 列寬
      grid-template-rows: repeat(2,600px); // 列高
      .left {

      }
      .right {
      
      }
    }
  }
}

多列布局之多列布局

在線預(yù)覽 Demo：https://zzmwzy.gitee.io/css-test-online/dist/index.html

需求： 兩列定寬中間自適應(yīng)

Vue 版組件復(fù)制粘貼

鏈接：https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/three-column-layout.vue

圣杯布局

結(jié)構(gòu)

注意：這里把 center 放在第一位，是為了優(yōu)先加載

<div?class="parent">
????<div?class="center">中間div>
????<div?class="left">左邊div>
????<div?class="right">右邊div>
??div>

水平排列：三個容器同時浮動，此時會引起左右側(cè)內(nèi)容掉落
騰出位置：父容器加內(nèi)填充，準(zhǔn)備左右側(cè)放置空間
擺放位置：margin 負(fù)值實現(xiàn)同行排列，相對定位實現(xiàn)位置移動

/** 布局相關(guān)  
1. 命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
2. 每個方案的使用說明都至少存在如下信息
面向場景 設(shè)置位置 特點（可無）
*/
#layout {
  // ## 三列布局
  #three-column { 
    .holy-grail(@leftWeight, @rightWeight){
        /* 第 1 步: 三個容器同時設(shè)置浮動  - 在一行排列
          放不下  left 和 right 掉下去
        */
        #center,#left,#right{float:left}

        /*  第 2 步 給父容器加內(nèi)填充 -  放 left 和 right 2 個容器*/
        #parent{
          padding-left: @leftWeight;
          padding-right: @rightWeight;
      	}

        /* 第 3 步: 把 left 移動到原本的位置  -  left 在 center（100%）的前面
                  把 right 移動到原本的位置 -  right 在 center 的后面
           技巧: margin 負(fù)值  -  移動  
                 定位方位    -  移動       
        */
        #left{margin-left:-100%;position: relative;left:-@leftWeight;}
        #right{margin-left:-@rightWeight;position: relative;right:-@rightWeight;}
    }
  }
}

雙飛翼布局

結(jié)構(gòu)

中間部分內(nèi)部增加一層結(jié)構(gòu)

<div?class="parent">
????<div?class="center">
??????<div?class="inner">中間div>
????div>
????<div?class="left">左邊div>
????<div?class="right">右邊div>
??div>

水平排列：三個容器同時浮動，此時會引起左右側(cè)內(nèi)容掉落
騰出位置：中間的容器的子容器設(shè)置 margin 外間距
擺放位置：margin 負(fù)值實現(xiàn)

/** 布局相關(guān)  
1. 命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
2. 每個方案的使用說明都至少存在如下信息
面向場景 設(shè)置位置 特點（可無）
*/
#layout {
  // ## 三列布局
  #three-column { 
    .threesome-wing(@leftWeight, @rightWeight){
        /* 第 1 步: 三個容器同時設(shè)置浮動  - 在一行排列
          放不下  left 和 right 掉下去
        */
        #center,#left,#right{float:left}
        
        /* 第 2 步: 給中間的容器的子容器設(shè)置 margin 外間距 => left 和 right 的位置給留出來*/
        #inner{
          margin-left:@leftWeight;
          margin-right:@rightWeight;
				}

        /* 第 3 步: 把 left 移動到原本的位置  -  left 在 center（100%）的前面
              把 right 移動到原本的位置 -  right 在 center 的后面
       			技巧: margin 負(fù)值  -  移動  
        */
        #left{margin-left:-100%}
        #right{margin-left:-@rightWeight;}
    }
  }
}

總結(jié)： 雙飛翼把圣杯的定位位移的屬性給優(yōu)化掉了 ?margin + padding

等分布局

浮動布局

html 結(jié)構(gòu)：這里特殊一點，外層需要加一層 div


??<div?id="parent"?class="clearfix">
????<div><div?class="col1">div>div>
????<div><div?class="col2">div>div>
????<div><div?class="col3">div>div>
????<div><div?class="col4">div>div>
????<div><div?class="col5">div>div>
??div>

浮動+盒模型+margin 負(fù)值

水平排列：浮動實現(xiàn)水平排列
等分：設(shè)置寬度
間距：盒模型box-sizing: border-box + padding-left實現(xiàn)，設(shè)置在外層上，避免內(nèi)容被影響
最左側(cè)間隙：父容器 margin 負(fù)值，這里不能對第一個元素特殊處理，會導(dǎo)致這個元素內(nèi)容偏大

// @numberOfRow 一行個數(shù)
// @space 元素間隙
.float(@numberOfRow, @space: 0) {
  	.parent{
      margin-left: -@space;
    }
    .parent>div{
      float: left;
      width:1/@numberOfRow;
      /* padding + border */
      box-sizing: border-box;
      padding-left: @space;
    }
}

表格布局

html 結(jié)構(gòu)：這里特殊一點，外層需要加一層 div


<div?class="wrap">
??<div?id="parent"?class="clearfix">
????<div><div?class="col1">div>div>
????<div><div?class="col2">div>div>
????<div><div?class="col3">div>div>
????<div><div?class="col4">div>div>
????<div><div?class="col5">div>div>
??div>
div>

表格+margin 負(fù)值

水平排列：表格布局實現(xiàn)水平排列，注意表格必須設(shè)置寬度 100%，不然不會繼承父容器寬度
等分：默認(rèn)等分等高
間距：border實現(xiàn)
最左側(cè)間隙：margin 負(fù)值，但這里不能對父容器處理，而是要在父容器外面再加一層，因為父容器身上設(shè)置了寬度 100%

// @space 元素間隙
.table(@space: 0) {
    .wrap {
			margin-left: -@space;
    }
  	.parent{
	     display: table;
       width: 100%;
    }
    .parent>div{
      display: table-cell;
			border-left: @space solid #fff;
    }
}

彈性布局

html 結(jié)構(gòu)

<div?id="parent">
??????<div?class="col1">
??????div>
??????<div?class="col2">
??????div>
??????<div?class="col3">
??????div>
??????<div?class="col4">
??????div>
????div>

水平排列：彈性布局
等分：父容器設(shè)置flex: 1即可
間距：border實現(xiàn)
最左側(cè)間隙：父容器 margin 負(fù)值，

擴展：flex: 1是一個綜合值，其值包含flex-grow、flex-shark和flex-basic，默認(rèn)值為0 1 auto，即父多時子原樣，父少時一起小，這個屬性有繼承性，所以可以放在父項目上進行統(tǒng)一設(shè)置。

// @space 元素間隙
.flex(@space: 0) {
  	.parent{
      display: flex;
      flex: 1;
			margin-left: -@space;
    }
    .parent>div{
			border-left: @space solid #fff;
    }
}

最后匯總

至此，我們也就完成了前端知識中布局的梳理，知識網(wǎng)絡(luò)的構(gòu)建非一日之功，但成體系了，就成了正規(guī)軍，加油！

本文布局均有在線案例，可見：https://zzmwzy.gitee.io/css-test-online/dist/index.html
本文布局均實現(xiàn)對應(yīng)的 vue 組件，拿走即用，其他框架可以類比自實現(xiàn)，倉庫地址：https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/
本地組件發(fā)布至自己的組件倉庫，可以去瞅瞅或點個 star，感謝！npm 地址：https://www.npmjs.com/package/duoji-ui

前往微醫(yī)互聯(lián)網(wǎng)醫(yī)院在線診療平臺，快速問診，3分鐘為你找到三甲醫(yī)生。(https://wy.guahao.com/?channel=influence)

前端知識網(wǎng)絡(luò) | 前端布局篇

前言

本文期待

知識網(wǎng)絡(luò)

常見布局

常見實現(xiàn)

居中布局

使用

復(fù)制粘貼

垂直

內(nèi)聯(lián)（inline）級別場景

塊（block）級別場景

多子容器場景

脫離文檔流

水平

內(nèi)聯(lián)（inline）級別場景

塊（block）級別場景

多子容器場景

脫離文檔流

平面

內(nèi)容總結(jié)

多列布局之兩列布局

Vue 版組件復(fù)制粘貼

浮動：組合 margin 負(fù)值

浮動：組合清浮動

浮動：組合 BFC

表格

定位

flex 布局

gird 布局

兩列布局整理匯總

多列布局之三列布局

Vue 版組件復(fù)制粘貼

浮動：組合 margin

浮動：組合 BFC

表格

定位

flex 布局

gird 布局

三列布局整理匯總

多列布局之多列布局

Vue 版組件復(fù)制粘貼

圣杯布局

結(jié)構(gòu)

雙飛翼布局

結(jié)構(gòu)

等分布局

浮動布局

html 結(jié)構(gòu)：這里特殊一點，外層需要加一層 div

表格布局

html 結(jié)構(gòu)：這里特殊一點，外層需要加一層 div

彈性布局

html 結(jié)構(gòu)

最后匯總

html 結(jié)構(gòu)：這里特殊一點，外層需要加一層 div