概述：成都Web前端培訓中一定會學習到CSS布局的一些內容， 本書主要講解 CSS 可視化渲染的理論部分。
為什么用整本書來寫可視化渲染的理論基礎呢？
答案是，作為一個 CSS 內包含的如此開放和強大的模型，在一本書中想要涵蓋屬性和效果的每一種可能的組合方式是不可能的。很明顯，我們會在使用 CSS 時發現更多的新方式。
內容：
成都Web前端培訓哪里好？在探索 CSS 的課程中，你會遇到瀏覽器中看似奇怪的行為。在深入理解可視化渲染模型如何在 CSS 中起作用后，你才能判斷一種行為是否是 CSS 定義的渲染引擎的正確結果（如果意外），或者是否是無意中發現的一個需要報告的 bug。
成都Web前端培訓中，CSS 假定每個元素生成一個或者多個矩形盒，這稱為元素盒（規范將來的版本可能會允許非矩形盒，并且實際上已經有三個提案，但是現在所有還是矩形）。每個元素盒的中心有一個內容區。
成都Web前端培訓哪里好？
這個內容區周圍有可選的 padding（內邊距）、border（邊框）、outline（輪廓） 和 margin（外邊距）。這些區域之所以被認為是可選的，是因為它們的寬度都可以被設置為零，實際上就是將它們從元素盒中刪除了。
圖 1 是一個示例內容區，內容區的周圍還有內邊距、邊框和外邊距。
每個外邊距、邊框和內邊距可以用各種指定邊屬性設置，比如?margin-left?或?border-bottom，以及縮寫屬性設置，比如?padding。如果有輪廓的話，它是沒有指定邊屬性的。內容的背景（例如顏色或者平鋪圖像）默認是應用在內邊距以內。外邊距總是透明的，從而可以看到父元素的背景。內邊距的長度不能為負，但是外邊距可以。在后面我們會研究負外邊距的效果。
邊框由已定義的樣式（例如?solid?或?inset）生成，其顏色用?border-color?屬性設置。如果沒有設置顏色，那么邊框顏色就會采用元素內容的前景色。例如，如果段落的文本是白色，那么除非作者顯式聲明一個不同的邊框顏色，否則圍繞該段落的任何邊框都是白色。如果邊框的樣式是有縫隙的類型，那么默認可以透過這些縫隙看到元素的背景。最后，邊框的寬度不能是負數。
元素盒的各個部分可能會被很多屬性所影響，比如?width?或?border-right。本書將會用到很多屬性，即使在這里沒有定義。
成都Web前端培訓哪里好？下面我們快速復習一下將要討論的盒子類型，以及一些重要的術語：
p?就是一個非可替換元素，因為它的文本內容是在元素本身內可以找到。img?元素，該元素只指向一個圖像文件，該文件會被插入到文檔流中?img?元素所在的地方。大多數表單元素也是可替換元素（例如，<input type="radio">）。html。在 XML 文檔中，根元素可以是語言所允許的任何任務；例如，RSS 文件的根元素是?rss。div?等元素生成的盒子。這些盒子在常規流中時，在盒子的前后產生換行，這樣常規流中的塊盒就一個挨著一個垂直堆疊。任何元素都可以通過聲明?display: block?生成塊盒。strong?或者?span?這些元素生成的盒子。這些盒子不會在其前后產生換行。任何元素都可以通過聲明為?display: inline?生成行內盒。div?像一個行內圖像一樣插入一行文本中，你就會明白。還有幾個其它類型的盒子，例如?table-cell?盒，但是它們因為各種原因不會在本書中講解 - 最主要的是它們的復雜性需要專門一本書來講解，并且極少有開發者會實際要經常對付它們。
還有一種盒子我們需要用以小節專門來詳細講解，就是包含塊（The Containing Block）。
每個元素的盒子都是相對于它的包含塊來布局，換句話說，包含塊是一個盒子的布局上下文。CSS 定義了判斷盒子的包含塊的一系列規則。為了保持專注，這里我們只講解那些與本書所講解的概念有關的規則。
對于一個在常規、西方語言文本流中的元素，包含塊由生成列表條目或者塊盒的最近的祖先的內容邊緣（content edge）組成，包括所有表格相關的盒子（例如，表格單元生成的盒子）。考慮如下的標記：
<body>
<div>
<p>This is a paragraph.</p>
</div>
</body>
在這個很簡單的標記中，?p?元素的塊盒的包含塊是?div?元素的塊盒，因為?div?元素的塊盒是?p?元素的塊盒的最近的祖先元素塊盒或者列表條目盒（本例中是塊盒）。同樣，div?的包含塊是?body?的盒子。因此，p?的布局依賴于?div?的布局，而?div?的布局又依賴于?body?元素的布局。
在此之上，body?元素的布局依賴于?html?元素的布局。html?元素生成的盒子稱為初始包含塊（initial containing block）。
比較獨特的是，這個初始包含塊的大小是由視口，而不是根元素內容的大小來決定的。對于屏幕媒介來說，視口就是瀏覽器窗口，對于打印媒介來說，視口就是頁面的可打印區域。這是一個很細微的區別，通常不是很重要，但是它確實存在。
通過給?display?屬性設置一個值，可以影響用戶代理顯示的方式。現在我們已經仔細觀察了視覺格式化，下面我們考慮一下?display?屬性，用本書早前的概念討論幾個?display?屬性值。
display?可選取值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table- footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit 初始值: inline 適用于: All elements 能夠繼承: No 計算值: Varies for foated, positioned, and root elements (see CSS2.1, section 9.7); otherwise, as specified
這里我們忽略表格相關的值，因為它們對于本文來說太復雜；我們還會忽略?list-item，因為它與塊盒很相似。我們會花了相當多的時間討論塊盒和行內盒，然后要研究?inline-block?和?run-in。不過在此之前，我們先花點時間談談如何通過改變元素的顯示角色，來改變布局。
格式化文檔時，如果能改變一個元素生成的盒子的類型，顯然是很方便的。例如，假設在?nav?元素中有一系列鏈接，我們要讓它作為垂直側邊欄布局：
<nav>
<a href="index.html">WidgetCo Home</a>
<a href="products.html">Products</a>
<a href="services.html">Services</a>
<a href="fun.html">Widgety Fun!</a>
<a href="support.html">Support</a>
<a href="about.html" id="current">About Us</a>
<a href="contact.html">Contact</a>
</nav>
我們可以把所有這些鏈接都放進表格單元中，或者把每個鏈接都包在自己的?nav?中，或者我們可以像這樣，讓這些鏈接都變成塊級元素：
nav a {display: block;}
這段代碼會讓導航?nav?內的每個?a?元素都成為塊級元素。如果再多添加點樣式，可以得到如圖 2 所示的結果：
圖 2. 將顯示角色從 inline 變為 block
成都Web前端培訓哪里好？
如果我們想讓不支持 CSS 的瀏覽器有行內元素的導航鏈接，但是讓這些鏈接像塊級元素一樣布局，那么改變顯示角色就很有用。鏈接變成塊后，我們可以像對?div?或?p?元素一樣對它們添加樣式，好處是整個元素盒都成了鏈接的一部分，這樣如果鼠標指針停留在元素盒中的任何地方，用戶都可以點擊鏈接。
我們可能還想讓元素變成行內元素。假如有如下的姓名無序列表：
<ul id="rollcall">
<li>Bob C.</li>
<li>Marcio G.</li>
<li>Eric M.</li>
<li>Kat M.</li>
<li>Tristan N.</li>
<li>Arun R.</li>
<li>Doron R.</li>
<li>Susie W.</li>
</ul>
成都Web前端培訓哪里好？
對于以上標記，假如我們想姓名變成一連串行內的姓名，每個姓名之間有豎線（并且列表的兩頭也有豎線）。要這樣做的唯一方法是改變它們的顯示角色。如下的規則有圖 3 所示的效果：
#rollcall li {
display: inline;
border-right: 1px solid;
padding: 0 0.33em;
}#rollcall li:first-child {
border-left: 1px solid;
}
圖 3. 顯示角色從 list-item 變為 inline
還有很多其它方法可以在設計中充分利用?display。要有創意，看看你能發明什么！
但是，必須指出的是，改變元素的顯示角色，并不會改變其本質。換句話說，讓一個段落生成一個行內盒，并不會讓這個段落轉變為行內元素。例如，在 XHTML 中，有些元素是塊級元素，有些是行內元素。（還有些是 'flow' 元素，不過我們暫且忽略）。行內元素可以是塊元素的后代，但是反之則不對。因此，span?可以放在?p?內，但是?span?內不能包含有?p。不管如何給元素添加樣式，都是如此。考慮如下標記：
<span style="display: block;">
<p style="display: inline;">this is wrong!</p>
</span>
這個標記是無效的，因為塊元素（p）嵌入在行內元素（span）中。顯示角色的改變與也不能改變這個事實。display?之所以得名，是因為它影響元素如何顯示，而不是因為它改變了元素的類型。
說了這么多，下面我們詳細研究不同類型的盒：塊盒、行內盒、inline-block 盒、list-item 盒和 run-in 盒。
成都Web前端培訓哪里好？塊盒的表現有時候可以預測，有時候又很讓人吃驚。例如，盒子位置沿著水平和垂直軸的處理可能是不同的。為了徹底理解塊盒是如何被處理的，你必須清晰地理解一些邊界與區域。它們在圖4 中被詳細展示。
文章來源:?肖繼潮老師在w3ctechs.com上發表的譯文《CSS 視覺格式化基礎 - CSS 布局基礎》
文章來自：成都朗沃教育 原創文章，轉載請注明出處！
