＊＊＊＊＊＊＊＊＊＊ 未經本人允許，嚴禁轉載任何網站 ＊＊＊＊＊＊＊＊＊＊
引言
這次給大家帶來了CSS－盒子模型部分的筆記，大家一同交流??
認識盒子模型之前，先來了解一下CSS元素的分類吧，后面再細細道來～
CSS元素分類
在CSS中，html中的標簽元素大體被分為三種不同的類型：
- 塊狀元素
- 內聯元素(又叫行內元素)
- 內聯塊狀元素
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有:
<img>、<input>
元素分類--塊級元素
什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。
如下代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點：
- 每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
- 元素的高度、寬度、行高以及頂和底邊距都可設置。
- 元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
元素分類--內聯元素
在html中，<span>、<a>、<label>、 <strong> 、<em>就是典型的內聯元素（行內元素）（inline）元素。
當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素，從而使 div 元素具有內聯元素特點。
div{
display:inline;
}
......
<div>我要變成內聯元素</div>
內聯元素特點：
- 和其他元素都在一行
- 元素的高度、寬度及頂部和底部邊距不可設置
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變。
友情提示：行內元素之間會產生間隙bug問題的場景：
當行內元素之間有“回車”、“tab”、“空格”時就會出現間隙。
如下代碼：
<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
解決方法：
- 寫在一行，之間不要有空格之類的符號。
- 使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
元素分類--內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增)
<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block 元素特點：
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。
友情提示 平時開發時候 a 元素設置了寬和高，但都沒有起到作用，原因是a在默認的時候是內聯元素，內聯元素是不可以設置寬和高的
css盒子模型
在網頁設計中常聽的屬性名：內容(content)、填充/內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。
可以把它當成日常中的一個盒子去理解。content就是盒子里裝的東西，它有高度（height）和寬度（width）,可以是圖片，可以是文字或者小盒子嵌套，在現實中，內容不能大于盒子，內容大于盒子就會撐破盒子，但在css中，盒子有彈性的，頂多內容太大就會撐大盒子，但是不會損害盒子。
padding即是填充，就好像我們為了保證盒子里的東西不損壞，填充了一些東西，比如泡沫或者塑料薄膜，填充物有大有小，有軟有硬，反應在網頁中就是padding的大小了。而再外一層就是border邊框，因為邊框有大小和顏色的屬性，相當于盒子的厚度和它的顏色或者材料。margin外邊距，就是我們的盒子與其他的盒子或者其他東西的距離。假如有很多盒子，margin就是盒子堆碼直接的距離，可以通風，也美觀同時方便取出。
我們理解了盒子模型，有助于我們了解一個元素的最終尺寸是怎么樣決定的，同時也幫助我們理解元素在網頁上是如何定位的。
盒子模型的三維立體結構圖
邊框（border），位于盒子的第一層。
- 元素內容（content）、內邊距（padding），兩者同位于第二層。
- 背景圖（background-image），位于第三層。
- 背景色（background-color），位于第四層。
- 整個盒子的外邊距（margin），位于第五層。
盒模型的大小--寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容范圍。
因此一個 元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
元素的高度也是同理。
比如：
css代碼：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代碼：
<body>
<div>文本內容</div>
</body>
元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，如下圖：
插曲－標準 W3C 盒子模型 與 IE 盒模型對比
上面介紹的是我們熟悉的標準 W3C 盒子模型，然后古老的IE有一個自己的盒子模型，這里插一點新知識
標準 W3C 盒子模型
標準 W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型
IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
那應該選擇哪中盒子模型呢？當然是“標準 W3C 盒子模型”了。怎么樣才算是選擇了“標準 W3C 盒子模型”呢？很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。如果不加 DOCTYPE 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 IE 瀏覽器會采用 IE 盒子模型去解釋你的盒子，而 FF 會采用標準 W3C 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了 DOCTYPE 聲明，那么所有瀏覽器都會采用標準 W3C 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
盒模型--邊框 - border
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
border: [<br-width> || <br-style> || <color>] | inherit
border-width: [<length> | thin | medium | thick]{1,4} | inherit
border-style: [solid | dashed | dotted | ...]{1,4} |inherit
border-colro: [<color> | transparent]{1,4} | inherit
如下面代碼為 div 來設置邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框：
div{
border:2px solid red;
}
上面是 border 代碼的縮寫形式，可以分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
- border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）. - border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:
border-color:#888;//前面的井號不要忘掉. - border-width（邊框寬度）中的寬度也可以設置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）.
現在有一個問題，如果有想為 p 標簽單獨設置下邊框，而其它三邊都不設置邊框樣式怎么辦呢？css 樣式中允許只為一個方向的邊框設置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現其它三邊(上、右、左)邊框的設置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-radius
方方正正的邊框很多時候讓人感覺設計不夠優雅，圓角矩形的邊框此時不妨來嘗試一下
/* 水平半徑/垂直半徑 */
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
盒模型--填充(內邊距)- padding
CSS padding 屬性定義元素邊框與元素內容之間的空白區域.
元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：
div{padding:20px 10px 15px 30px;}
順序一定不要搞混?？梢苑珠_寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都為10px;可以這么寫 div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px，可以這么寫： div{padding:10px 20px;}
盒模型--外邊距- margin
設置外邊距的最簡單的方法就是使用 margin 屬性。
margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。
margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：
h1 {margin : 0.25in;}
下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的： margin: top right bottom left
另外，還可以為 margin 設置一個百分比數值： p {margin : 10%;},百分數是相對于父元素的 width 計算的。上面這個例子為 p 元素設置的外邊距是其父元素的 width 的 10%。
盒模型屬性 － overflow
overflow 屬性規定當內容溢出元素框時發生的事情。
這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
盒模型屬性 －box-shadow
box-shadow 屬性向框添加一個或多個陰影。
語法:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 4px 6px 3px 0px red;
| | | |
水平偏移 | | |
垂直偏移 | |
模糊半徑 |
陰影大小
注意：水平與垂直偏移可以為負值即相反方向偏移。顏色默認為文字顏色。陰影不占據空間，僅為修飾效果。
TRBL
TRBL (Top, Right, Bottom, Left) 即為順時針從頂部開始。具有四個方向的屬性都可以通過 *-top *-right *-bottom 與 *-left 單獨對其進行設置。
值縮寫
下面的值縮寫以 padding 為例。
對面相等，后者省略；四面相等，只設一個。
/* 四面值 */
padding: 20px;
padding: 20px 20px 20px 20px;
/* 上下值 右左值 */
padding: 20px 10px;
padding: 20px 10px 20px 10px;
/* 上值 右左值 下值 */
padding: 20px 10px 30px;
padding: 20px 10px 30px 10px;
CSS 外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
外邊距合并
外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖：
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖：
盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合并。
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：
如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。
外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
