盒子模型

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

• 盒子模型分布

  
  
  圖片1.png

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

• 內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域蔚袍，也就是元素 中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的谋梭。
• 如果沒有為元素設(shè)置內(nèi)邊距和邊框昼窗，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的鬼佣。
• 通過width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小瓤的。
• width和height屬性只適用于塊元素。

內(nèi)邊距

• 內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間盅抚。
• 默認(rèn)情況下width和height不包含padding的大小润脸。
• 使用padding屬性來設(shè)置元素的內(nèi)邊距柬脸。
• 例如：
  1.padding:10px 20px 30px 40px
  這樣會(huì)設(shè)置元素的上、右毙驯、下倒堕、左四個(gè)方向的內(nèi)邊距。
  2.padding:10px 20px 30px;
  分別指定上爆价、左右垦巴、下四個(gè)方向的內(nèi)邊距
  3.padding:10px 20px;
  分別指定上下、左右四個(gè)方向的內(nèi)邊距
  4.padding:10px;
  同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距
• 同時(shí)在css中還提供了padding-top铭段、padding-right骤宣、padding-
  right、padding-bottom分別用來指定四個(gè)方向的內(nèi)邊距序愚。

邊框

• 可以在元素周圍創(chuàng)建邊框憔披，邊框是元素可見框的最外部。
• 可以使用border屬性來設(shè)置盒子的邊框：border:1px red solid;
  上邊的樣式分別指定了邊框的寬度爸吮、顏色和樣式芬膝。
• 也可以使用border-top/left/right/bottom分別指定上右下左 四個(gè)方向的邊框。
• 和padding一樣拗胜，默認(rèn)width和height并包括邊框的寬度蔗候。
  邊框的樣式：

外邊距

• 外邊距是元素邊框與周圍元素相距的空間怒允。
• 使用margin屬性可以設(shè)置外邊距埂软。
• 用法和padding類似，同樣也提供了四個(gè)方向的 margin-top/right/bottom/left。
• 當(dāng)將左右外邊距設(shè)置為auto時(shí)勘畔，瀏覽器會(huì)將左右外 邊距設(shè)置為相等所灸，所以這行代碼margin:0 auto可 以使元素居中。
• 外邊距重疊

相鄰元素炫七，垂直方向爬立，取最大值

內(nèi)聯(lián)元素的盒模型

• 內(nèi)聯(lián)元素不能設(shè)置寬高
• 可以設(shè)置水平內(nèi)邊距，垂直不影響布局
• 可以設(shè)置水平邊框万哪，垂直不影響布局
• 可以設(shè)置水平外邊距侠驯，不支持垂直外邊距

display

• 我們不能為行內(nèi)元素設(shè)置width、height奕巍、 margin-top和margin-bottom吟策。
• 我們可以通過修改display來修改元素的性 質(zhì)。
• 可選值：

visibility

• visibility屬性主要用于元素是否可見的止。
• 和display不同檩坚，使用visibility隱藏一個(gè)元 素，隱藏后其在文檔中所占的位置會(huì)依然 保持诅福，不會(huì)被其他元素覆蓋匾委。
• 可選值：

overflow

• 當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度 和高度是，就會(huì)發(fā)生一些奇怪的事情氓润，瀏 覽器會(huì)讓內(nèi)容溢出盒子赂乐。
• 可以通過overflow來控制內(nèi)容溢出的情況。
• 可選值：

文檔流

• 文檔流指的是文檔中可現(xiàn)實(shí)的對(duì)象在排列時(shí)所占用的位置旺芽。
• 將窗體自上而下分成一行行沪猴，并在每行中按從左至右的順序排 放元素，即為文檔流采章。
• 也就是說在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊运嗜，如 果右邊不足以放下元素，元素則會(huì)另起一行悯舟，在新的一行中繼 續(xù)從左至右擺放担租。
• 這樣一來每一個(gè)塊元素都會(huì)另起一行，那么我們?nèi)绻朐谖臋n 流中進(jìn)行布局就會(huì)變得比較麻煩抵怎。

浮動(dòng)

• 所謂浮動(dòng)指的是使元素脫離原來的文本流奋救，在父元素中浮動(dòng)起來。
• 浮動(dòng)使用float屬性反惕。
• 可選值：

• 塊級(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)容撐開背亥，所以當(dāng)漂浮一個(gè)塊級(jí)元 素時(shí)我們都會(huì)為其指定一個(gè)寬度。
• 當(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ì)撐開父元素。
• 浮動(dòng)元素默認(rèn)會(huì)變?yōu)閴K元素衅斩，即使設(shè)置display:inline以后其依然是個(gè) 塊元素沿癞。

文字環(huán)繞

• 浮動(dòng)不會(huì)覆蓋文字，會(huì)環(huán)繞在浮動(dòng)元素周圍

內(nèi)聯(lián)元素浮動(dòng)

• 內(nèi)聯(lián)元素脫離文檔流會(huì)變成塊元素

高度塌陷

• 父元素由子元素?fù)伍_矛渴，子元素浮動(dòng)后椎扬，父元素中沒有內(nèi)容就會(huì)塌陷
• 解決辦法
  1.給父元素定height（不推薦使用）
  2.bfc

bfc的作用：

1.父元素的外邊距不會(huì)和子元素發(fā)生重疊
2.開啟bfc的元素不會(huì)被浮動(dòng)元素覆蓋
3.開啟bfc的元素可以包含浮動(dòng)的子元素

如何開啟bfc

1.設(shè)置元素浮動(dòng)（不推薦）
2.設(shè)置絕對(duì)定位（不推薦）
3.設(shè)元素為: inline-block
4.將overflow設(shè)置為一個(gè)非visble得值
（IE6應(yīng)該用haslayout zoom:1）

3.清除浮動(dòng)

.clear:after{content:' '; display:block; clear:both }

4.在父元素下添加一個(gè)空白兄弟元素

清除浮動(dòng)

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