CSS——（2）盒子模型與標準流，css盒子
上篇部落格《CSS——（1）基礎》中簡單介紹了CSS的概念和幾種使用方法，現在主要是介紹其的核心內容。
盒子模型
為了理解盒子模型，我們可以先從生活中的盒子入手。盒子是用來放置物品的，內部除了有物品外，還有填充部分的東西。盒子與盒子之間還會有間隙。如所示：
對於網頁中的大部分對象，實際呈現形式都是一個盒子形狀對象，理解了盒子模型才能更好的排版。
CSS盒子模式具備的屬性： 內容(content)、填充(padding)、邊框(border)、邊界(margin)。從上面的例子來看：內容即對應盒內的物品；填充對應盒內為了防止物品破碎的填充物；邊框則是盒子的紙殼部分；邊界就是紙殼外圍的間隙了。
標準盒子模型：
其中，margin為外邊距，padding為內邊距。填充、邊框和邊界都分為上、下、左、右4個方向，既可以分別定義，也可以統一定義。
我們可以通過一個小例子來看一下盒子模型。
HTML：
<body> <form id="TestForm" runat="server"> <div class="Test"> 盒子模型 </div> </form></body>
.Test { width: 180px; /*寬，高*/ height: 30px; margin: 5px; /*外邊距*/ padding: 20px; /*內邊距*/ border: 10px solid #0094ff; /*邊框*/ }
盒子模型顯示：
瞭解盒子模型可以協助我們更好的排版，當然僅僅知道這個是不夠的，我們還經常會談到“標準流”。標準流，是指各元素沒有特殊規則時的相片順序。它分為兩類：區塊層級元素和行內元素。二者的區別在於區塊層級元素擁有自己的地區，而行內元素沒有。
區塊層級元素：以一個塊的形式表現出來，並跟同級的塊依次豎直排列，左右撐滿。佔有獨立空間。
行內元素：各個字母之間橫向排列，到最右端自動折行，橫向排列。標籤本身不佔有獨立的地區。
在這裡，我們分別舉個例子來說明這兩類元素的不同。即區塊層級元素中的<div>標籤和行內元素中的<span>標籤。
如所示：
那麼，當我想把區塊層級元素轉換為行內元素，或者把行內元素轉換為區塊層級元素時，應該怎麼做呢？這裡就涉及到一個重要的屬性了——display屬性。
有三個常用屬性值：
1）block 顯示為區塊層級元素
2）inline 行內元素
3）none 不顯示
盒子模型可以協助我們更好的布局和規劃標籤的排版位置，標準流是在沒有特殊規則下的普遍適用的排列規則。在對標準流有了大致瞭解後，下篇部落格將繼續詳細介紹CSS的核心內容中的定位機制。
1：標準W3C盒子模型； 2：IE盒子模型（IE瀏覽器預設的模型）。
在兩種不同模型網頁裡，定義了相同CSS屬性的元素顯示效果是不一樣的，下面就用公式來區分這兩種不同的盒子模型。
1：標準W3C盒子模型
寬=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
寬=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
該模型是IE瀏覽器預設的盒子模型，當然也可以對其變更，在頁面最上方加如下代碼：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
問CSS盒子模型的有關屬性有什？
寬高、內外邊距、邊框
帶圖片說明的詳細教程看這裡：www.webjx.com/css/divcss-19521.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
