HTML & CSS 之小白再續前緣

CSS

盒子模型

（點擊查看官方解釋）

實際上網頁中的每個標籤均可以當作一個盒子模型，而這個盒子模型從內到外有如下這幾個元素組成

• content 內容區域

• padding 內邊距

• border 邊框

• margin 外邊距

而且margin, border, padding分別有上下左右4個值

如上圖所示，能夠很容易的得出盒子的大小，也就是對應標籤真正大小。
所謂的寬高不是width和height,而是盒子的寬度和高度。

高度 = 內容高度 + 上下內邊距 + 上下邊框 + 上下外邊距
寬度 = 內容寬度 + 左右內邊距 + 左右邊框 + 左右外邊距

margin,border,padding三個屬性在設值的時候都可以對上下左右進行單獨設置：

margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
margin-right: 50px;

也能夠一次性使用簡寫的方法設置：

/* 上 右 下 左*/
margin: 100px 100px 50px 50px;
/* 上下 左右*/
margin: 100px 50px;
/* 上 左右 下*/
margin: 100px 20px 50px;

這裏須要注意的是，屢次設置時要先寫大後寫小：

/* 錯誤寫法 */
margin-left: 20px;
margin: 10px;

這個種寫法會致使 margin-left:20px失效。

在使用盒子模型進行佈局的時候要格外注意的一個問題是： margin塌陷。

* {
        margin:0;
    }
    div {
        width: 300px;
        height: 300px;
    }
    .d1 {
        background-color: #c1c1c1;
        margin-bottom: 20px;
    }
    .d2 {
        background-color: pink;
        margin-top: 30px;
    }
<div class="d1"></div>
<div class="d2"></div>

上述代碼實際效果以下圖所示

肉色部分是Chrome瀏覽器檢查div.d2屬性的margin邊距，很明顯它的top是30px,也就是說margin距離是距離上下左右容器border的距離，因此形成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top裏了。


在計算盒子之間的距離時須要考慮margin，但margin也有一個很好用的方法使塊劇中：

margin: 0 auto;

border屬性的三要素：

• border-width 粗線

• border-style 線形

• border-color 顏色

通常設置border的樣式時通常使用簡寫方式：

border: 1px solid red;

再說行內元素的盒模型與塊級元素的盒模型之間的差別：

• 行內元素不能設置寬和高。行內元素的寬高是由其內容決定的；而塊級元素能夠設置寬和高。

• 塊級元素會獨佔一行。而行內元素卻部可以獨佔一行，只能和其餘的行內元素共用一行。

• 若是塊級元素不設置寬度，那麼塊級元素會自動的沾滿父元素的所有寬度。

能夠經過設置dispaly屬性將元素在行內和塊之間轉換，其參數包括：

• inline

• block

• inline-block

標準文檔流

標準文檔流其實是一個不太好的翻譯，一開始不是很理解，查了一下發現，標準中說的是 normal flow 翻譯爲普通流或者常規流更好。

當瀏覽器解析網頁的時候，遵循從上往下，從左到右的順序。
一旦元素脫離了標準文檔流的時候，行內元素和塊元素的特性將消失。

標準文檔流的常見現象：

1. 空白摺疊現象。

2. 高矮不齊，底邊對齊。

3. 自動換行，一行寫不完，自動換行。

4. 單詞沒寫完不換行。

浮動

float: left / right;

浮動的特色：

1. 脫離標準文檔流，元素一旦脫離標準文檔流(脫標)，後面的元素會佔據浮動元素本來的位置，並且元素就再也不遵照文檔流中塊級元素和行內元素的特性。

2. 元素浮動會脫離文檔流可是不會脫離文本流，因此會產生字圍效果。

3. 相互貼靠。

浮動會帶來的影響：

• 能讓浮動後的元素佈局混亂

• 子元素浮動會對父元素產生影響

HTML代碼：

<div class="box">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</div>
<div class="box2">
    <ul>
        <li>測試文字</li>
        <li>測試文字</li>
        <li>測試文字</li>
        <li>測試文字</li>
    </ul>
</div>

CSS代碼：

.box  ul li {
        float: left;
        width: 100px;
        height: 50px;
        background-color: orange;
        margin-left: 10px;
    }

此時效果以下圖：

如何清除浮動帶來的影響：

1.首先能夠經過爲父元素設置高度來消除浮動：

.box {
        height: 50px;
}

2.使用overflow:hidden屬性清除浮動：

.box {
    overflow:hidden;
}

3.在父元素底部插入一個具備clear:both屬性的空標籤：

<div class="box">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <div class="clear"></div>
</div>

.clear {
    clear:both;
}