首頁 > 開發者 > 網站開發

css盒子模型

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：網頁   media   情況   換行   ima   dex   尺寸   base   pyc   

 Css3引入了新的盒模型——彈性盒模型，該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與XUL（Firefox使用的使用者互動語言）相似，其它語言也使用相同的盒模型，如XAML 、GladeXML。      使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用以下的HTML代碼：      <body>      <div id="box1">1</div>      <div id="box2">2</div>      <div id="box3">3</div>      </body>      傳統的盒模型基於HTML流在垂直方向上排列盒子。使用彈性盒模型可以規定特定的順序，也可以反轉之。要開啟彈性盒模型，只需設定擁有子盒子的盒子的display的屬性值為box（或inline-box）即可。      display: box;      水平或垂直分布      “box-orient”定義分布的座標軸：vertical和horizional。這兩個值定義盒子如何顯示      body{      display: box;      box-orient: horizontal;      }      反向分布      “box-direction”可以設定盒子出現的順序。預設情況下，只需定義分布座標軸——box隨html流分布。如果為水平座標軸，則從左到 右分布；垂直座標軸則從上到下分布。定義“box-direction”的屬性值為“reverse”，則反轉盒子的排列順序。      body {      display: box;      box-orient: vertical;      box-direction: reverse;      }      具體分布      屬性“box-ordinal-group”定義盒子分布的順序。可以隨意的控制其分布順序。這些組以一個從“1”開始的數字定義，盒模型將首先分布這些組，所有這些盒子將在每個組中。分布將從小到大排列。      body {      display: box;      box-orient: vertical;      box-direction : reverse;      }      #box1 {      box-ordinal-group: 2;      }      #box2 {      box-ordinal-group: 2;      }      #box3 {      box-ordinal-group: 1;      }      盒子尺寸      預設情況下，盒子並不具有彈性，如果box-flex的屬性值至少為1時，則變得富有彈性。      如果盒子不具有彈性，它將儘可能的寬使其內容可見，且沒有任何溢出，其大小由“width”和“height”來決定（或min-height、min-width、max-width、max-height）。      如果盒子是彈性的，其大小將按下面的方式計算：
  1.       具體的大小聲明（width、height、min-width、min-height、max-width、max-height）；
  2.       父盒子的大小和所有餘下的可利用的內部空間
      如果盒子沒有任何大小聲明，那麼其大小將完全取決於父box的大小。即：盒子的大小等於父級盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。      如果一個或更多的盒子有一個具體的大小聲明，那麼其大小將計算其中，餘下的彈性盒子將按照上面的原則分享剩下的可利用空間。      看看下面的例子，理解起來更容易。      所有盒子都是彈性的      下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣。看起來好像是用百分比定義盒子的大小，但是有一個區別：使用彈性盒模型，增加一個盒子，無須重新計算其大小。      body {      display: box;      box-orient: horizontal;      }      #box1 {      box-flex: 2;      }      #box2 {      box-flex: 1;      }      #box3 {      box-flex: 1;      }      一些盒子有固定大小      下面的例子中，box3並不是彈性的，寬度為160px；這樣box1和box2將有240px的可利用空間。因此，box1的寬度為160px(240*2/3)，box2的寬度為80px(240*1/3)。      body {      display: box;      box-orient: horizontal;      width: 400px;      }      #box1 {      box-flex: 2;      }      #box2 {      box-flex: 1;      }      #box3 {      width: 160px;      }      溢出管理      因為是彈性盒子、非彈性盒子混排，有可能所有盒子的尺寸大於或小於父盒子的尺寸。這樣就有可能空間太多或空間不足。      空間太多如何處理      可利用空間的分布取決於兩個屬性值：box-align 和 box-pack。      屬性“box-pack”管理水平方向上的空間分布，有以下四個可能屬性：start、end、 justify、 or center。
  1.       start 所有盒子在父盒子的左側，餘下的空間在右側；
  2.       end所有盒子在父盒子的右側，餘下的空間在左側；
  3.       justify 餘下的空間在盒子間平均分配；
  4.       center 可利用的空間在父盒子的兩側平均分配。
      屬性“box- align”管理垂直方向上的空間分布，有以下五個可能屬性之：start、 end,、center、 baseline和 stretch。
  1.       start 每個盒子沿父盒子的上邊緣排列，餘下的空間位於底部；
  2.       end 每個盒子沿父盒子的下邊緣排列，餘下的空間位於頂部；
  3.       center 可用空間平均分配，上面一半，下面一半；
  4.       baseline 所有盒子沿著它們的基準排列，餘下的空間可前可後；
  5.       stretch 每個盒子的高度調整到適合父盒子的高度
      body {      display: box;      box-orient: horizontal;      width: 400px;      }      #box1 {      box-flex: 2;      }      #box2 {      box-flex: 1;      }      #box3 {      width: 160px;      }      空間不足怎麼辦      與傳統的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢出，你可以設定box-lines為multiple使其換行顯示。      彈性盒模型看起來很不錯，Gecko 和 WebKit對該模型都有一些嘗試性的測試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說，firefox、safari、chrome可以使用這些特性，可以看看這個彈性盒模型的demo。      作為前端開發人員來說，該模型對我們解決網頁設計中一些常見的問題非常方便，如：表單布局、垂直置中、視覺上分離html流，等等。不就的將來它將成為一個web標準，早早熟悉它不是什麼壞事。

css盒子模型

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More