常用布局總結

mingde 發布于2019-08-30 15:44 / 1354人閱讀

摘要：，塊級格式化上下文創建的情況浮動元素絕對定位元素行內塊元素表格的單元格，表格的標題特性不為的元素彈性盒布局規則內部的會在垂直方向，一個接一個地放置。

一、兩列布局 1.1 左列定寬，右列自適應

1）利用float + margin實現（方法1）

HTML代碼：


  左列定寬
  右列自適應

CSS代碼：

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

2）利用float + margin實現（方法2）

HTML代碼：


  左列定寬
  
    右列自適應

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實現

HTML代碼：


   左列定寬
   右列自適應

CSS代碼：

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

解析: div.right設置overflow: hidden形成BFC，不與div.left的float box重疊，寬度達到自適應。
BFC（block formatting context，塊級格式化上下文）

創建BFC的情況：
1、浮動元素（float: left | right）；
2、絕對定位元素（position: absolute | fixed）；
3、行內塊元素（display: inline-block）；
4、表格的單元格（display: table-cells，td、th）；
5、表格的標題（display: table-captions | table-caption）；
6、"overflow" 特性不為visible 的元素；
7、彈性盒 (display: flex | inline-flex)；

BFC布局規則：
1、內部的Box會在垂直方向，一個接一個地放置。
2、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
3、每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。（#）
4、BFC的區域不會與float box重疊。（#）
5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之亦然。
6、計算BFC的高度時，浮動元素也參與計算（清除浮動）。

因為BFC內部的元素和外部的元素絕對不會互相影響，因此，本例中當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。

1）和3）的異同：
相同點：兩者的 div.left 都采用float浮動
不同點：
1）的 div.right 使用 margin-left 改變寬度。
3）的 div.right 使用 overflow: hidden 自身形成BFC自適應寬度，不需要關注 div.left 的定寬。

4）利用table實現

HTML代碼：


   左列定寬
   右列自適應

CSS代碼：

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

缺點：display: table-cell形成BFC，造成margin collapse。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。

5）使用position實現

HTNML代碼：


  左列定寬
  右列自適應

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實現

HTML代碼：


   左列定寬
   右列自適應

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：用來“瓜分”父項的“剩余空間”
flex-shrink： 設置子項的縮小比例，默認為1，即如果父項空間不足，該項目將縮小。
flex-basis：用于設置子項的占用空間。如果設置了值，則子項占用的空間為設置的值；如果沒設置或者為auto，那子項的空間為width/height 的值。

1.2 右側定寬，左側自適應

1）使用float + overflow 實現

HTML代碼：


   右列定寬
 
   左列自適應

CSS代碼：

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

1.3 一列不定，一列自適應

1）使用float + overflow實現

HTML代碼：


  左列不定寬
  右列自適應

CSS代碼：

.left {
  height: 400px;
  background-color: #ff9040;
  float: left; /* 只設浮動，不設寬度 */
}
.right {
  height: 400px;
  background-color: #ffb273;
  overflow: hidden; /* 觸發BFC */
}

2）使用flex實現

HTML代碼：


  左列不定寬
  右列自適應

CSS代碼：

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

二、三列布局 2.1 兩列定寬，一列自適應

1）使用float + margin實現

HTML代碼：


   左列定寬
   中間定寬
   右列自適應

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實現

HTML代碼：


   左列定寬
   中間定寬
   右列自適應

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; /* 觸發BFC */
}

3）使用table實現

HTML代碼：


  左列定寬
  中間定寬
  右列自適應

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實現

HTML代碼：


   左列定寬
   中間定寬
   右列自適應

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; /* 均分父項剩余部分達到自適應 */
}

2.2 兩側定寬，中間自適應

1）使用flex實現

HTML代碼：


   左列定寬
   中間自適應
   右列定寬

CSS代碼：

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

2）使用position實現

HTML代碼：


   左列定寬
   中間自適應
   右列定寬

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實現

HTML代碼：

CSS代碼：

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

2）利用flex實現

HTML代碼：

CSS代碼：

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

四、九宮格布局

1）使用table實現

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實現

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

云服務器 GPU云服務器 android常用布局年終總結網絡總結方法總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116093.html

靜態頁面布局總結（新手）

摘要：學習一個月了，對和頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。學習HTML一個月了，對HTML和Css頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面...

MasonEast 2019-08-02 12:11 評論0 收藏0
靜態頁面布局總結（新手）

摘要：學習一個月了，對和頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面的布局就不會有太大的問題再說布局之前先說一下元素的顯示模式分類。學習HTML一個月了，對HTML和Css頁面的靜態布局進行一次總結總體來說靜態頁面布局分為兩大類，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么對于靜態的頁面...

sushi 2019-08-29 17:30 評論0 收藏0
CSS常用布局

摘要：頭部主要內容左邊欄右邊欄尾部顯示為頭部主要內容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個很重要的部分，甚至我覺得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結一下使用過的CSS常...

aaron 2019-08-29 12:59 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0