出轨的女人高潮叫床视频网站,成人在线免费A片,国产精品久久久久久久四虎电影,尻逼免费看,国产一级片网,夜夜夜夜夜操,国产a级视频,超碰在线进入

前言

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

本文期待

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

知識網(wǎng)絡

常見布局

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

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

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

A --> B3[全屏布局]

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

每個布局類型都有他們對應的最佳實踐，衡量標準主要是兼容性和組成場景，舉柵格多列布局而言，移動端通用是 flex 新特性，而 PC 端則要更多的考慮兼容從而使用 margin 負值+盒模型 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]

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

居中布局

使用

復制粘貼

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

垂直

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

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

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

采用父容器設置line-height即可

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

塊（block）級別場景

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

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

多子容器場景

適合 flex 布局，父容器設置

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

脫離文檔流

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

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

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

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

水平

需求同樣是這六種場景

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

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

采用父容器設置line-height即可

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

塊（block）級別場景

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

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

多子容器場景

適合 flex 布局，父容器設置

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

脫離文檔流

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

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

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

平面

綜合下水平和垂直就好

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

內容總結

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

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

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

多列布局之兩列布局

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

需求：左列定寬，右列自適應

Vue 版組件復制粘貼

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

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

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

浮動：組合 margin 負值

結構


<div?id="left">div>

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

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

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

浮動：組合清浮動

處理【右側比左側高，浮動導致塌陷】的情況

改寫 html 結構，在自適應模塊外層進行包裹

<div?class="left">div>

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

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

 // 浮動：組合清浮動
// 適合 PC 端  父容器  需要在右邊自適應模塊的 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 布局默認是等高布局

// 表格
// 適合需要等高的布局  父容器  table 布局默認是等高布局
.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 負值
  // 適合 PC 端  父容器  存在【右側比左側高，浮動導致塌陷】問題
  .float-margin-mixin (@leftWidth: 0) {
    .left {
      float: left;
      width: @leftWidth;
    }
    .right {
      margin-left: @leftWidth;
    }
  }
  // 浮動：組合清浮動
  // 適合 PC 端  父容器  需要在右邊自適應模塊的 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 布局默認是等高布局
  .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); // 列高
  }
}

多列布局之三列布局

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

需求： 左中定寬右側自適應

Vue 版組件復制粘貼

鏈接：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

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

.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 布局默認是等高布局

.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 {
	
  }
}

三列布局整理匯總

/** 布局相關  
1. 命名規(guī)范：如果需要傳參，則定義成 mixin，命名后綴也需要帶上這個，便于區(qū)分
2. 每個方案的使用說明都至少存在如下信息
面向場景 設置位置 特點（可無）
*/
#layout {
  // ## 兩列布局
  #three-column {
    // 浮動：組合 margin 負值
    // 適合 PC 端  父容器  存在【右側比左側高，浮動導致塌陷】問題
    .float-margin-mixin (@leftWidth) {
      .left {
        float:left;
        width: @leftWidth;
      }
      .right {
        margin-left: @leftWidth;
      }
    }
    // 浮動：組合清浮動
    // 適合 PC 端  父容器  需要在右邊自適應模塊的 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 布局默認是等高布局
    .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 {
      
      }
    }
  }
}

多列布局之多列布局

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

需求： 兩列定寬中間自適應

Vue 版組件復制粘貼

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

圣杯布局

結構

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

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

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

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

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

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

雙飛翼布局

結構

中間部分內部增加一層結構

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

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

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

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

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

等分布局

浮動布局

html 結構：這里特殊一點，外層需要加一層 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 負值

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

// @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 結構：這里特殊一點，外層需要加一層 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 負值

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

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

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

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

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

最后匯總

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

本文布局均有在線案例，可見：https://zzmwzy.gitee.io/css-test-online/dist/index.html
本文布局均實現(xiàn)對應的 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)絡 | 前端布局篇

前言

本文期待

知識網(wǎng)絡

常見布局

常見實現(xiàn)

居中布局

使用

復制粘貼

垂直

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

塊（block）級別場景

多子容器場景

脫離文檔流

水平

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

塊（block）級別場景

多子容器場景

脫離文檔流

平面

內容總結

多列布局之兩列布局

Vue 版組件復制粘貼

浮動：組合 margin 負值

浮動：組合清浮動

浮動：組合 BFC

表格

定位

flex 布局

gird 布局

兩列布局整理匯總

多列布局之三列布局

Vue 版組件復制粘貼

浮動：組合 margin

浮動：組合 BFC

表格

定位

flex 布局

gird 布局

三列布局整理匯總

多列布局之多列布局

Vue 版組件復制粘貼

圣杯布局

結構

雙飛翼布局

結構

等分布局

浮動布局

html 結構：這里特殊一點，外層需要加一層 div

表格布局

html 結構：這里特殊一點，外層需要加一層 div

彈性布局

html 結構

最后匯總

html 結構：這里特殊一點，外層需要加一層 div

html 結構：這里特殊一點，外層需要加一層 div