本節(jié)大綱

• 盒模型、內(nèi)邊距、外邊距、邊距合并
• 定位、相對(duì)定位、絕對(duì)定位
• 浮動(dòng)、清除浮動(dòng)、文檔流概念

課程內(nèi)容

• 盒模型

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

image

(1)Margin - 清除邊框區(qū)域。Margin沒(méi)有背景顏色，它是完全透明
(2)Border - 邊框周?chē)奶畛浜蛢?nèi)容。邊框是受到盒子的背景顏色影響
(3)Padding - 清除內(nèi)容周?chē)膮^(qū)域。會(huì)受到框中填充的背景顏色影響
(4)Content - 盒子的內(nèi)容，顯示文本和圖像

邊距寬高
設(shè)置寬度和高度是指Content部分的寬度和高度

width:250px;
padding:10px;
border:5px solid gray;
margin:15px;

div總寬度為：250 ＋ 10×2 ＋ 5×2 + 15×2＝ 310
如果只有固定寬度250像素的空間，那么設(shè)置寬度為:250-padding×2-border×2-margin×2 = content

邊距寫(xiě)法

padding: 10px 10px 10px 10px; /* 上邊距 右邊距 下邊距 左邊距 */
padding: 10px;                /* 等同于 10px 10px 10px 10px */
margin: 10px 5px;             /* 等同于 10px 5px 10px 5px */
margin: 0 auto;               /* 等同于 0 auto 0 auto */
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;

• 邊距合并
  外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

  
  
  image
  
  

  因此，外邊距設(shè)置最好一致（要上邊距都上邊距，要下邊距都下邊距）。

• 定位
  CSS 定位 (Positioning) 屬性允許你對(duì)元素進(jìn)行定位。定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

通過(guò)使用 position 屬性，我們可以選擇 4 種不同類(lèi)型的定位，這會(huì)影響元素框生成的方式

div{
    position: absolute; /* static, relative, fixed */
}

static
默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。如"left:20px" 會(huì)向元素的 LEFT 位置添加 20 像素.

image

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

注意，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

absolute
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣。

image

#box_absolute {
    position: absolute;
    left: 30px;
    top: 20px;
}

相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊。

fixed

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

對(duì)于定位元素（非static），z-index用來(lái)控制層疊元素的顯示優(yōu)先級(jí)，值越大優(yōu)先級(jí)越高

• 浮動(dòng)
  浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

  當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣
  

  image

再請(qǐng)看下圖，當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。 如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

image

如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：

image

• 清除浮動(dòng)
  浮動(dòng)元素引起的問(wèn)題：

  • 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素
  • 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
  • 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)
    使用CSS中的clear:both;屬性來(lái)清除元素的浮動(dòng)可解決2、3問(wèn)題。

  語(yǔ)法：

   clear : none | left | right | both
  

  取值：

   none  :  默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
   left   :  不允許左邊有浮動(dòng)對(duì)象
   right  :  不允許右邊有浮動(dòng)對(duì)象
   both  :  不允許有浮動(dòng)對(duì)象
  

注意：清除浮動(dòng)時(shí)，添加clear屬性只能對(duì)自己有效。如

對(duì)于問(wèn)題1，給父元素添加clearfix樣式。

.clearfix:after{
    content: "";
    display: block;
    clear:both;
}