CSS 盒模型、佈局和包含塊

時間 2019-11-24

標籤 css 模型佈局包含欄目 CSS 简体版

原文原文鏈接

CSS 基礎盒模型

CSS 盒模型是頁面佈局的基礎。css

當對一個文檔進行佈局的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型（CSS basic box model），將全部元素表示爲一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。html

每一個盒子由四個部分（或稱區域）組成，分別爲：內容區域 content area、內邊距區域 padding area、邊框區域 border area 、外邊距區域 margin area，分別對應 width、height、padding、border、margin。前端

注意 box-sizing 這個 CSS 屬性。瀏覽器

content-box （W3C 盒模型）是默認值。若是你設置一個元素的寬爲 100px，那麼這個元素的內容區會有 100px 寬，而且任何邊框和內邊距的寬度都會被增長到最後繪製出來的元素寬度中。也就是說，最終盒子的寬高 >= 設置的寬高。
border-box （IE 盒模型）告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在 width 內的。也就是說，若是你將一個元素的 width 設爲 100px，那麼這 100px 會包含它的 border 和 padding，內容區的實際寬度是 width 減去(border + padding)的值。大多數狀況下，這使得咱們更容易地設定一個元素的寬高。

看下面的例子。佈局

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
複製代碼

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
複製代碼

從結果能夠看得比較明白，border-box 的總寬高不會超過設定的 width 和 height，而 content-box 的大小是不肯定的，會受到 border 和 padding 影響。flex

佈局和包含塊

元素的尺寸及位置，經常會受它的包含塊所影響。對於一些屬性，例如 width, height, padding, margin，絕對定位元素的偏移值（好比 position 被設置爲 absolute 或 fixed），當咱們對其賦予百分比值時，這些值的計算值，就是經過元素的包含塊計算得來。spa

`position`

肯定一個元素的包含塊的過程徹底依賴於這個元素的 position 屬性。咱們先看看 position 屬性。code

static 該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative 該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。
absolute 不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。
fixed 不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出如今的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改成該祖先。
sticky 盒位置根據正常流計算(這稱爲正常流動中的位置)，而後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在全部狀況下（即使被定位元素爲 table 時），該元素定位均不對後續元素形成影響。當元素 B 被粘性定位時，後續元素的位置仍按照 B 未定位時的位置來肯定。position: sticky 對 table 元素的效果與 position: relative 相同。 粘性定位能夠被認爲是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。 它能夠很方便的實現 IOS 中的列表 title 吸頂效果。

<head>
    <style> #box { height: 5000px; } #sti { position: sticky; top: 100px; } p { height: 1000px; } </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      <p>hello div</p>
      <div id="sti">sti</div>
    </div>
  </body>
複製代碼

肯定包含塊

肯定一個元素的包含塊的過程徹底依賴於這個元素的 position 屬性：orm

若是 position 屬性爲 static 或 relative ，包含塊就是由它的最近的祖先塊元素(inline-block、block、list-item)，或者 BFC(table、flex、grid) 的內容區的邊緣組成的。
若是 position 屬性爲 absolute ，包含塊就是由它的最近的 position 的值不是 static （也就是值爲fixed, absolute, relative 或 sticky）的祖先元素的內邊距區的邊緣組成。
若是 position 屬性是 fixed，能夠認爲包含塊就是視口 viewport。

注意: 根元素(<html>)所在的包含塊是一個被稱爲初始包含塊的矩形，可認爲是視口 viewport。.cdn

根據包含塊計算百分值

若是某些屬性被賦予一個百分值的話，它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性：

要計算 height top 及 bottom 中的百分值，是經過包含塊的 height 的值。若是包含塊的 height 值會根據它的內容變化，並且包含塊的 position 屬性的值被賦予 relative 或 static ，那麼，這些值的計算值爲 0，也就是說包含塊自身能先肯定高度纔可讓子元素的百分比計算生效。

看下面例子， .con 這個父元素沒有設置高度， .c1 子元素設置了高度 500px，.c2 設置的是百分比高度，根據上面的規則，因爲父元素 .con 的 position 爲 static，因此子元素設置百分比高度將會無效。

<head>
<style> .con { background-color: red; } .c1 { background-color: cyan; height: 500px; } .c2 { background-color: green; height: 100%; } </style>
  </head>
  <body>
    <div class="con">
      <div class="c1"></div>
      <div class="c2"></div>
    </div>
  </body>
複製代碼