2. 程式人生 > 其它 >CSS佈局之等分佈局與等高佈局

CSS佈局之等分佈局與等高佈局

阿新 • • 發佈：2021-01-13

技術標籤：玩轉CSS佈局csscss3flex前端網頁設計

等分佈局

  • 等分佈局就是指一行被分為若干列，每一列的寬度是相同的值；
    方法一：float 屬性實現等分佈局效果
    給各個元素設定浮動和寬度
 {
  float: left;
  width: 25%; //寬度用百分比等分
  //給每個元素設定浮動-- 子元素浮動  -  導致父元素的高度塌陷
}

清除浮動

 1.固定的高度  height   固定寫死（不推薦）

2.父元素加overflow:hidden  => BFC 特點: 把浮動的高度給計算進去
    優點：程式碼簡潔
    缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素。

3.clear:both 清除浮動 => 加在浮動子元素的末尾   <div style="clear:both"></div>
    優點：通俗易懂，方便
    缺點：新增無意義標籤，語義化差

4.利用偽元素::after    =》 clearfix 公用類名  =  直接在html中進行呼叫 (最常用)
               .clearfix::after
 
{
                                  content: '';
                                  display: block;
                                  clear: both;
                                  }
            父級呼叫<div id="parent" class="clearfix">
   優點：符合閉合浮動思想，結構語義化正確
   缺點：ie6-7不支援偽元素：after，使用zoom:1觸發hasLayout.

 5.使用before和after雙偽元素清除浮動

     .clearfix:after,.clearfix:before
 
{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"
 
></div>
優點：程式碼更簡潔
缺點：用zoom:1觸發hasLayout.
推薦使用

2.display 屬性的值有關 table 實現等分佈局效果；

給父元素新增 display:table;
給子元素新增 display: table-cell;

3.flex 屬性實現等分佈局效果；

  • 父元素設定 display: flex;
  • 子元素設定 flex:1;

4.Grid 屬性實現等分佈局效果；

等分佈局間距處理
方法一：利用浮動+手動計算寬度
考慮用 padding 和 border 來設定間隙
怪異盒模型 ：box-sizing: border-box;
盒子模型box-sizing：

  • content-box: width 寬度 = width + padding-left/right + border-left/right
  • border-box: width 寬度 = width(padding+border 計算進去了)
  • margin 不影響盒子模型的大小 = > 間距 / 位置移動

具體步驟(四個盒子等分相互之間有間隙)：

  • 1.給四個盒子設定
    {
    width: 25%;
    float: left;
    border-left:10px solid #fff;
    box-sizing: border-box;
    }
  • 2.給父盒子設定 margin-left:-10px;把第一個盒子的左間距隱藏起來
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分佈局解決方法1-修改版-border邊框線</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .parent-fix {
        overflow: hidden;
      }

      #parent {
        height: 300px;
        /* 整體往左邊進行移動  - 間距隱藏起來 */
        margin-left: -10px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        width: 25%;
        float: left;
        border-left: 10px solid #fff;
        box-sizing: border-box;
      }
      .col1 {
        background-color: hotpink;
      }

      .col2 {
        background-color: lightblue;
      }

      .col3 {
        background-color: green;
      }

      .col4 {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="parent-fix">
      <!-- 作為父級容器 -->
      <div id="parent" class="clearfix">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分佈局解決方法1-修改版- padding內填充</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .parent-fix {
        overflow: hidden;
      }

      #parent {
        height: 300px;
        margin-left: -10px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        width: 25%;
        float: left;
        padding-left: 10px;
        /* padding已經計算在了25%
         padding是內容的一個部分,所以看不到，可以在他的父元素裡面巢狀一個子元素，背景顏色加到子元素身上
       */
        box-sizing: border-box;
      }

      .col1 .inner {
        height: 300px;
        background-color: hotpink;
      }

      .col2 .inner {
        height: 300px;
        background-color: lightblue;
      }

      .col3 .inner {
        height: 300px;
        background-color: green;
      }

      .col4 .inner {
        height: 300px;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="parent-fix">
      <!-- 作為父級容器 -->
      <div id="parent" class="clearfix">
        <div class="col1">
          <div class="inner"></div>
        </div>
        <div class="col2">
          <div class="inner"></div>
        </div>
        <div class="col3">
          <div class="inner"></div>
        </div>
        <div class="col4">
          <div class="inner"></div>
        </div>
      </div>
    </div>
  </body>
</html>

用 table 實現等分佈局加間隙

  • 1.父元素設定 display: table;子元素設定 display: table-cell;
  • 2.給子元素設定 padding-left: 20px;並內嵌一個盒子，將子元素的顏色加到內嵌的盒子裡面。
  • 3.給所有的盒子外面巢狀一個大盒子，並給其設定 margin-left: -20px;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分佈局解決方法2-table+table-cell</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        width: 100%;
        /* table */
        display: table;
      }
      .parentWrap {
        margin-left: -20px;
      }
      .inner {
        height: 600px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        /* td */
        display: table-cell;
        height: 300px;
        padding-left: 20px;
      }

      .col1 .inner {
        background-color: hotpink;
      }

      .col2 .inner {
        background-color: lightblue;
      }

      .col3 .inner {
        background-color: green;
      }

      .col4 .inner {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 作為父級容器 -->
    <div class="parentWrap">
      <div id="parent">
        <div class="col1">
          <div class="inner"></div>
        </div>
        <div class="col2"><div class="inner"></div></div>
        <div class="col3"><div class="inner"></div></div>
        <div class="col4"><div class="inner"></div></div>
      </div>
    </div>
  </body>
</html>

用 flex 實現有間隙的等分佈局

  • 1.父元素設定 display: flex;子元素設定 flex: 1;
  • 2.給子元素設定 padding-left: 20px;並內嵌一個盒子，將子元素的顏色加到內嵌的盒子裡面。
  • 3.給父元素設定 margin-left: -20px;並刪除其 width: 100%;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分佈局解決方法3-flex</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        //width: 100%;
        /* 子元素排列   =  水平排列 */
        display: flex;
        margin-left: -20px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        /* 四個容器  佔1等份  1/4  = 100%/ 4 */
        flex: 1;
        padding-left: 20px;
      }
      .inner {
        height: 300px;
      }
      .col1 .inner {
        background-color: hotpink;
      }

      .col2 .inner {
        background-color: lightblue;
      }

      .col3 .inner {
        background-color: green;
      }

      .col4 .inner {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 作為父級容器 -->
    <div id="parent">
      <div class="col1"><div class="inner"></div></div>
      <div class="col2"><div class="inner"></div></div>
      <div class="col3"><div class="inner"></div></div>
      <div class="col4"><div class="inner"></div></div>
    </div>
  </body>
</html>

等高分局

等高佈局就是一行被劃分成若干列，每一列的高度是相同的值；

display 屬性的值有關 table 實現

  • 父元素設定 display: table;
  • 子元素設定 display: table-cell;

padding + margin 屬性實現等高佈局效果

  • 給子元素設定足夠大的內填充和外間距
    padding-bottom:9999px;
    margin-bottom:-9999px;

相關推薦

CSS佈局之等分佈局與等高佈局

技術標籤：玩轉CSS佈局csscss3flex前端網頁設計 等分佈局 等分佈局就是指一行被分為若干列，每一列的寬度是相同的值； 方法一：float 屬性實現等分佈局效果 給各個元素設定浮動和寬度

CSS佈局之盒子模型[一]

每個HTML標籤都會生成一個盒模型，盒模型是正常流佈局非常重要的概念。盒模型由內邊距(padding)+長度(width)+高度(height)+邊框(border)+外邊距(margin)組成。

CSS 佈局之 —— Grid 佈局速覽

1. 定義網格 　　任何一個容器都可以指定為 Gird 佈局，行內元素也可以使用 Gird 佈局。

CSS 佈局之—— 用 Grid 佈局模擬 WPF 風格佈局

1. 實現程式碼：　 <html> <div class=\"grid\" style=\"grid-template-rows: auto auto; grid-template-columns: 150px 150px;\">

聖盃、雙飛翼佈局、真假等高，圖片優化，測試檢查

多欄佈局解決方案 聖盃佈局 <style> * { padding: 0; margin: 0; } .center { width: 100%; height: 400px;

響應式佈局之css單位

1.css單位CSS 有幾種表示長度的不同單位。 許多 CSS 屬性接受“長度”值，諸如 width、margin、padding、font-size 等。

Java物件記憶體佈局之謎

一個Java物件在堆上除了成員資訊，還有其他內容嗎？他在堆上是如何佈局的？接下來本文將以Hotspot為例分析Java物件記憶體佈局之謎。

CSS學習之選擇器優先順序與屬性繼承

CSS學習之選擇器優先順序與屬性繼承 選擇器優先順序 　　其實選擇器是具有優先順序的，我們來看下面這一組案例：

網頁佈局之bootStrap柵格系統（2020年7月19日）

今日完成任務---網頁佈局 1. bootStrap柵格系統 響應式web佈局是讓使用者通過不同尺寸的瀏覽器都可以獲得良好視覺的一種方法。是目前比較流行的一種佈局方法。通過CSS3 Media Queries（媒體查詢），媒體查詢是讓頁面

CSS3網頁佈局之文字佈局和文字超出處理

一、Css 文字水平方向展示 direction樣式 ltr：文字流從左到右。預設 rtl：文字流從右到左

css 列表多列多行 同行等高樣式

<ul> <li>車我</li> <li>車我華服日UC金額我我何潤鋒v車我華服日UC金額我我何潤鋒v車我華服日UC金額我我何潤鋒v車我華服日UC金額我我何潤鋒v</li>

CSS實現左側固定，右側自適應佈局

網頁基本結構： <!DOCTYPE html> <html lang=\"zh-CN\"> <head> <meta charset=\"utf-8\">

C#開發PACS醫學影像處理系統(四)：介面佈局之狀態列

狀態列一般用於顯示系統狀態，例如影像數量統計、CPU和記憶體使用情況、全屏時顯示日期等，

C#開發PACS醫學影像處理系統(三)：介面佈局之工具欄

工具欄佈局採用WPF中Grid作為容器，按鈕採用自定義樣式和圖示，並採用Separator分割線：

JavaScript基礎之瀏覽器——DOM/CSS/渲染樹、解析與載入、迴流與重繪

DOM/CSS/渲染樹、解析與載入、迴流與重繪 1. domTree (深度優先解析原則) 2. 先有解析，再有載入。

【第1篇】Gephi—結合GeoLayout和Maps of countries layouts的地理位置佈局之新手上路

一、感謝以下部落格內容提供的參考 部落格1：《Gephi—結合GeoLayout和Maps of countries layouts的地理位置佈局》

移動端開發rem佈局之less+媒體查詢佈局的原理步驟和心得

rem： rem即是以html檔案中font-size的大小的倍數 rem佈局的原理： 通過媒體查詢設定不同螢幕寬度下的html的font-size大小，然後在css佈局時用rem單位取代px，從而實現頁面元素大小的動態適配，做出更漂亮整潔的頁面

佈局之左側固定，右側自適應

1，固定側左浮動，右側設定margin 給左邊的固定寬度區left浮動並設定一個寬度，右邊的自適應區right只設置margin值，假設right的寬度是100%，那麼設定margin後，它得寬度就變為100%-margin；left發現自己的寬度可以和

谷歌、華為、騰訊等紛紛佈局，代表未來遊戲方向的雲遊戲搶灘登陸

雲遊戲“搶灘登陸”，由來已久，也備受期待。新舊技術更迭下，難以計數的廠商已經在“雲遊戲”佈局多年，傳統廠商和新入局者相互博弈，也在客觀上探索著雲遊戲的商業模式。

HTML&CSS課程之影象與連結使用技巧

常用格式：jpeg=jpg png gif 比較大的圖片推薦使用jpg格式，ps匯出成web格式，建議選擇品質80，或者不低於60