常用布局總結(jié)

mingde 發(fā)布于2019-08-30 15:44 / 1409人閱讀

摘要：，塊級格式化上下文創(chuàng)建的情況浮動(dòng)元素絕對定位元素行內(nèi)塊元素表格的單元格，表格的標(biāo)題特性不為的元素彈性盒布局規(guī)則內(nèi)部的會在垂直方向，一個(gè)接一個(gè)地放置。

一、兩列布局 1.1 左列定寬，右列自適應(yīng)

1）利用float + margin實(shí)現(xiàn) （方法1）

HTML代碼：


  左列定寬
  右列自適應(yīng)

CSS代碼：

.left {
  width: 600px;
  height: 400px;
  background-color: pink;
  float: left;
}
.right {
  height: 400px;
  background-color: skyblue;
  margin-left: 600px;
}

2）利用float + margin實(shí)現(xiàn) （方法2）

HTML代碼：


  左列定寬
  
    右列自適應(yīng)

CSS代碼：

.left {
  width: 100px;
  height: 400px;
  background-color: #33cccc;
  float: left;
}
.right-fix {
  margin-left: -100px;
  width: 100%;
  float: right;
}
.right {
  margin-left: 100px;
  height: 400px;
  background-color: #876ed7;
}

3）利用float + overflow實(shí)現(xiàn)

HTML代碼：


   左列定寬
   右列自適應(yīng)

CSS代碼：

.left {
  width: 100px;
  height: 400px;
  background-color: #d25fd2;
  float: left;
}
.right {
  height: 400px;
  background-color: #d235d2;
  overflow: hidden;
}

解析: div.right設(shè)置overflow: hidden形成BFC，不與div.left的float box重疊，寬度達(dá)到自適應(yīng)。
BFC（block formatting context，塊級格式化上下文）創(chuàng)建BFC的情況：
1、浮動(dòng)元素（float: left | right）；
2、絕對定位元素（position: absolute | fixed）；
3、行內(nèi)塊元素（display: inline-block）；
4、表格的單元格（display: table-cells，td、th）；
5、表格的標(biāo)題（display: table-captions | table-caption）；
6、"overflow" 特性不為visible 的元素；
7、彈性盒 (display: flex | inline-flex)；
BFC布局規(guī)則：
1、內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。
2、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊。
3、每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。（#）
4、BFC的區(qū)域不會與float box重疊。（#）
5、BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之亦然。
6、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算（清除浮動(dòng)）。
因?yàn)锽FC內(nèi)部的元素和外部的元素絕對不會互相影響，因此，本例中當(dāng)BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動(dòng)有重疊。
1）和3）的異同：   
相同點(diǎn)：兩者的 div.left 都采用float浮動(dòng)   
不同點(diǎn)： 
1）的 div.right 使用 margin-left 改變寬度。 
3）的 div.right 使用 overflow: hidden 自身形成BFC自適應(yīng)寬度，不需要關(guān)注 div.left 的定寬。

4）利用table實(shí)現(xiàn)

HTML代碼：


   左列定寬
   右列自適應(yīng)

CSS代碼：

.two-col-4 {
  width: 100%;
  height: 400px;
  display: table;
}
.left, .right {
  display: table-cell; /* 利用單元格自動(dòng)分配寬度 */
}
.left {
  width: 100px;
  background-color: #ff9040;
}
.right {
  background-color: #ffb273;
}
.right div{
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 30px;
}

缺點(diǎn)：display: table-cell形成BFC，造成margin collapse。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊。

5）使用position實(shí)現(xiàn)

HTNML代碼：


  左列定寬
  右列自適應(yīng)

CSS代碼：

.two-col-5 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #f7fe00;
  position: absolute;
  top: 0;
  left: 0;
}
.right {
  height: 400px;
  background-color: #52e93a;
  position: absolute;
  top: 0;
  left: 100px;
  right: 0;
}

6）使用flex實(shí)現(xiàn)

HTML代碼：


   左列定寬
   右列自適應(yīng)

CSS代碼：

.two-col-6 {
  width: 100%;
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #39e639;
}
.right {
  flex: 1;
  background-color: #67e667;
}

解析：flex 是 flex-grow、flex-shrink 和 flex-basis 的簡寫。
flex-grow：用來“瓜分”父項(xiàng)的“剩余空間”
flex-shrink： 設(shè)置子項(xiàng)的縮小比例，默認(rèn)為1，即如果父項(xiàng)空間不足，該項(xiàng)目將縮小。
flex-basis：用于設(shè)置子項(xiàng)的占用空間。如果設(shè)置了值，則子項(xiàng)占用的空間為設(shè)置的值；如果沒設(shè)置或者為auto，那子項(xiàng)的空間為width/height 的值。

1.2 右側(cè)定寬，左側(cè)自適應(yīng)

1）使用float + overflow 實(shí)現(xiàn)

HTML代碼：


   右列定寬
 
   左列自適應(yīng)

CSS代碼：

.left {
  height: 400px;
  background-color: pink;
  overflow: hidden; /* BFC */
}
.right {
  width: 100px;
  height: 400px;
  background-color: skyblue;
  float: right;
}

1.3 一列不定，一列自適應(yīng)

1）使用float + overflow實(shí)現(xiàn)

HTML代碼：


  左列不定寬
  右列自適應(yīng)

CSS代碼：

.left {
  height: 400px;
  background-color: #ff9040;
  float: left; /* 只設(shè)浮動(dòng)，不設(shè)寬度 */
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 觸發(fā)BFC */
}

2）使用flex實(shí)現(xiàn)

HTML代碼：


  左列不定寬
  右列自適應(yīng)

CSS代碼：

.two-col-lr-2 {
  display: flex;
}
.left { /* 不設(shè)寬度 */
 height: 400px;
 background-color: #f63e62;
}
.right {
 height: 400px;
 background-color: #f66f89;
 flex: 1; /* 均分父項(xiàng)剩余部分 */
}

二、三列布局 2.1 兩列定寬，一列自適應(yīng)

1）使用float + margin實(shí)現(xiàn)

HTML代碼：


   左列定寬
   中間定寬
   右列自適應(yīng)

CSS代碼：

.tri-col-1 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ed002f;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #f63e62;
  float: left;
}
.right {
  margin-left: 300px;
  height: 400px;
  background-color: #f66f89;
}

2）使用float + overflow實(shí)現(xiàn)

HTML代碼：


   左列定寬
   中間定寬
   右列自適應(yīng)

CSS代碼：

.tri-col-2 {
  min-width: 300px;
}
.left {
  width: 100px;
  height: 400px;
  background-color: #ff7400;
  float: left;
}
.center {
  width: 200px;
  height: 400px;
  background-color: #ff9640;
  float: left;
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 觸發(fā)BFC */
}

3）使用table實(shí)現(xiàn)

HTML代碼：


  左列定寬
  中間定寬
  右列自適應(yīng)

CSS代碼：

.tri-col-3 {
  width: 100%;
  height: 400px;
  display: table;
}
.left {
  width: 100px;
  background-color: #ffc900;
  display: table-cell;
}
.center {
  width: 200px;
  background-color: #ffd640;
  display: table-cell;
}
.right {
  background-color: #ffe173;
  display: table-cell;
}

4）使用flex實(shí)現(xiàn)

HTML代碼：


   左列定寬
   中間定寬
   右列自適應(yīng)

CSS代碼：

.tri-col-4 {
  height: 400px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #00cc00;
}
.center {
  width: 200px;
  background-color: #39e639;
}
.right {
  background-color: #67e667;
  flex: 1; /* 均分父項(xiàng)剩余部分達(dá)到自適應(yīng) */
}

2.2 兩側(cè)定寬，中間自適應(yīng)

1）使用flex實(shí)現(xiàn)

HTML代碼：


   左列定寬
   中間自適應(yīng)
   右列定寬

CSS代碼：

.tri-col-lr-1 {
  height: 400px;
  display: flex;
}
.left{
  width: 100px;
  background-color: #bc008d;
}
.center {
  flex: 1; /*均分父項(xiàng)剩余的部分*/
  background-color: #dd37b4;
}
.right {
  width: 200px;
  background-color: #dd64bf;
}

2）使用position實(shí)現(xiàn)

HTML代碼：


   左列定寬
   中間自適應(yīng)
   右列定寬

CSS代碼：

.tri-col-lr-2 {
  position: relative;
}
.left {
  width: 100px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00af64;
}
.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 400px;
  background-color: #37dc74;
}
.right {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #63dc90;
}

三、多列等寬布局

1）利用table實(shí)現(xiàn)

HTML代碼：

CSS代碼：

.multi-col-1 {
  width: 100%;
  height: 400px;
  display: table;
}
.col {
  display: table-cell; /* 無需關(guān)注列數(shù)，單元格自動(dòng)平分 */
}
.col:nth-child(odd) {
  background: pink;
}
.col:nth-child(even) {
  background: lightgreen;
}

2）利用flex實(shí)現(xiàn)

HTML代碼：

CSS代碼：

.multi-col-2 {
  height: 400px;
  display: flex;
}
.col {
  flex: 1; /* 無需關(guān)注列數(shù)，自動(dòng)平分 */
}
.col:nth-child(odd) {
  background: lightcoral;
}
.col:nth-child(even) {
  background: yellow;
}

四、九宮格布局

1）使用table實(shí)現(xiàn)

HTML代碼：

CSS代碼：

.squ-1 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: table;
}
.row {
  display: table-row;
}
.item {
  display: table-cell;
  border: 1px solid red;
}

2）使用flex實(shí)現(xiàn)

HTML代碼：

CSS代碼：

.squ-2 {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex: 1;
}
.item {
  flex: 1;
  border: 1px solid skyblue;
}

云服務(wù)器 GPU云服務(wù)器 android常用布局年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116093.html

發(fā)表評論

登陸后可評論

0條評論

mingde

男|高級講師

我要關(guān)注我要私信

TA的文章

常用布局總結(jié)

閱讀 1410·2019-08-30 15:44
跳起來：你不知道的CSS Animation新的Steps()值

閱讀 2186·2019-08-30 11:04
前端每日實(shí)戰(zhàn)：11# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)熒光脈沖 loader 特效

閱讀 583·2019-08-29 15:17
【JavaScript】面向?qū)ο笾瓼unction類型

閱讀 2609·2019-08-26 12:12
vue 路由基礎(chǔ)

閱讀 3192·2019-08-23 18:09
javascript數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)筆記

閱讀 977·2019-08-23 15:37
webpack4系列教程（七）：使用 babel-loader

閱讀 1610·2019-08-23 14:43
vue-router懶加載時(shí)添加loading效果

閱讀 2997·2019-08-23 13:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

常用布局總結(jié)

相關(guān)文章

**靜態(tài)頁面布局總結(jié)（新手）**

**靜態(tài)頁面布局總結(jié)（新手）**

CSS常用布局

CSS布局十八般武藝都在這里了

發(fā)表評論

0條評論

mingde

男|高級講師

TA的文章