# 盒子模型

 在網(wǎng)頁(yè)中“一切皆是盒子
  CSS處理網(wǎng)頁(yè)時(shí)捆探，它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見(jiàn)的盒子里玄渗。
> *   為什么要想象成盒子呢？因?yàn)槿绻阉械脑?素都想象成盒子霹购，那么我們對(duì)網(wǎng)頁(yè)的布局就相 當(dāng)于是擺放盒子搔弄。
*   我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁(yè)中相應(yīng)的 位置即可完成網(wǎng)頁(yè)的布局竹宋。

 一個(gè)盒子我們會(huì)分成幾個(gè)部分：
> 內(nèi)容區(qū)(content)
> 內(nèi)邊距(padding)
> 邊框(border)
> 外邊距(margin)



### 內(nèi)容區(qū)

   內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域救斑，也就是元素 中的文本內(nèi)容泵琳，子元素都是存在于內(nèi)容區(qū)中的。
   如果沒(méi)有為元素設(shè)置內(nèi)邊距和邊框烙荷，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的镜会。
  通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小。
   width和height屬性只適用于塊元素

### 內(nèi)邊距

   顧名思義终抽，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。
   默認(rèn)情況下width和height不包含padding的大小。
   使用padding屬性來(lái)設(shè)置元素的內(nèi)邊距昼伴。

 例如：
 padding:10px 20px 30px 40px
 這樣會(huì)設(shè)置元素的上匾旭、右、下圃郊、左四個(gè)方向的內(nèi)邊距价涝。
 padding:10px 20px 30px;
 分別指定上、左右持舆、下四個(gè)方向的內(nèi)邊距
>padding:10px 20px;
> 分別指定上下色瘩、左右四個(gè)方向的內(nèi)邊距
> padding:10px;

> 同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距
> 同時(shí)在css中還提供了
> padding-top、padding-right逸寓、padding-right居兆、padding-bottom
> 分別用來(lái)指定四個(gè)方向的內(nèi)邊距。

### 邊框

*   可以在元素周圍創(chuàng)建邊框竹伸，邊框是元素可見(jiàn)框的最外部泥栖。
    可以使用border屬性來(lái)設(shè)置盒子的邊框：
    border:1px red solid;
    上邊的樣式分別指定了邊框的寬度、顏色和樣式勋篓。
*   也可以使用border-top/left/right/bottom分別指定上右下左 四個(gè)方向的邊框吧享。
*   和padding一樣，默認(rèn)width和height并包括邊框的寬度譬嚣。

> 邊框可以設(shè)置多種樣式：
> none（沒(méi)有邊框）
> dotted（點(diǎn)線）
> dashed（虛線）
> solid（實(shí)線）
> double（雙線）
> groove（槽線）
> ridge（脊線）
> inset（凹邊）
> outset（凸邊）

### 外邊距

*   外邊距是元素邊框與周圍元素相距的空間钢颂。
*   使用margin屬性可以設(shè)置外邊距。
    用法和padding類似拜银，同樣也提供了四個(gè)方向的 margin-top/right/bottom/left殊鞭。
*   當(dāng)將左右外邊距設(shè)置為auto時(shí)，瀏覽器會(huì)將左右外 邊距設(shè)置為相等盐股，所以這行代碼margin:0 auto可 以使元素居中钱豁。

### display

*   我們不能為行內(nèi)元素設(shè)置width、height疯汁、 margin-top和margin-bottom牲尺。
*   我們可以通過(guò)修改display來(lái)修改元素的性 質(zhì)。

> 可選值：
> block：設(shè)置元素為塊元素
> inline：設(shè)置元素為行內(nèi)元素
> inline-block：設(shè)置元素為行內(nèi)塊元素
> none：隱藏元素（元素將在頁(yè)面中完全消失）

### visibility

*   visibility屬性主要用于元素是否可見(jiàn)幌蚊。
*   和display不同谤碳，使用visibility隱藏一個(gè)元 素，隱藏后其在文檔中所占的位置會(huì)依然 保持溢豆，不會(huì)被其他元素覆蓋蜒简。

> 可選值：
> visible：可見(jiàn)的
> hidden：隱藏的

overflow

*   當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度 和高度是，就會(huì)發(fā)生一些奇怪的事情漩仙，瀏 覽器會(huì)讓內(nèi)容溢出盒子搓茬。
*   可以通過(guò)overflow來(lái)控制內(nèi)容溢出的情況犹赖。

> 可選值：
> visible：默認(rèn)值
> scroll：添加滾動(dòng)條
> auto：根據(jù)需要添加滾動(dòng)條
> hidden：隱藏超出盒子的內(nèi)容

* * *

### 文檔流

*   文檔流指的是文檔中可現(xiàn)實(shí)的對(duì)象在排列時(shí)所占用的位置。
*   將窗體自上而下分成一行行卷仑，并在每行中按從左至右的順序排 放元素峻村，即為文檔流。
*   也就是說(shuō)在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊锡凝，如 果右邊不足以放下元素粘昨，元素則會(huì)另起一行，在新的一行中繼 續(xù)從左至右擺放窜锯。
*   這樣一來(lái)每一個(gè)塊元素都會(huì)另起一行张肾，那么我們?nèi)绻朐谖臋n 流中進(jìn)行布局就會(huì)變得比較麻煩。

### 浮動(dòng)

*   所謂浮動(dòng)指的是使元素脫離原來(lái)的文本流锚扎，在父元素中浮動(dòng)起來(lái)吞瞪。
    浮動(dòng)使用float屬性。

> 可選值：
>  none：不浮動(dòng)
> left：向左浮動(dòng)
> right：向右浮動(dòng)

*   塊級(jí)元素和行內(nèi)元素都可以浮動(dòng)工秩，當(dāng)一個(gè)行內(nèi)元素浮動(dòng)以后將會(huì)自動(dòng)變?yōu)橐?個(gè)塊級(jí)元素尸饺。
*   當(dāng)一個(gè)塊級(jí)元素浮動(dòng)以后，寬度會(huì)默認(rèn)被內(nèi)容撐開(kāi)助币，所以當(dāng)漂浮一個(gè)塊級(jí)元 素時(shí)我們都會(huì)為其指定一個(gè)寬度浪听。

> Tip：當(dāng)一個(gè)元素浮動(dòng)以后，其下方的元素會(huì)上移眉菱。元素中的內(nèi)容將會(huì)圍繞 在元素的周圍迹栓。
> 
> *   浮動(dòng)會(huì)使元素完全脫離文本流，也就是不再在文檔中在占用位置俭缓。
>     元素設(shè)置浮動(dòng)以后克伊，會(huì)一直向上漂浮直到遇到父元素的邊界或者其他 浮動(dòng)元素。
> *   元素浮動(dòng)以后即完全脫離文檔流华坦，這時(shí)不會(huì)再影響父元素的高度愿吹。也 就是浮動(dòng)元素不會(huì)撐開(kāi)父元素。
> *   浮動(dòng)元素默認(rèn)會(huì)變?yōu)閴K元素惜姐，即使設(shè)置display:inline以后其依然是個(gè) 塊元素犁跪。

### 清除浮動(dòng)

*   clear屬性可以用于清除元素周圍的浮動(dòng)對(duì)元素的影響。
*   也就是元素不會(huì)因?yàn)樯戏匠霈F(xiàn)了浮動(dòng)元素而改變位置歹袁。

> 可選值：
> left：忽略左側(cè)浮動(dòng)
> right：忽略右側(cè)浮動(dòng)
> both：忽略全部浮動(dòng)
> none：不忽略浮動(dòng)坷衍，默認(rèn)值

### 定位

*   position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
*   可以使用position屬性把一個(gè)元素放置到網(wǎng) 頁(yè)中的任何位置条舔。

> 可選值：
> static
> relative
> absolute
> fixed