CSS——讀書筆記-03-盒子模型&定位

第三章 可視化格式模型

1.盒子模型

》IE早期版本，包括IE6，width=內容寬度+內邊距+邊框

　box-sizing屬性能夠定義要使用哪一種盒子模型：

• border-width(含內邊距邊框)
• content-width(只內容寬度)

》外邊距疊加

• 2個並列元素外邊距疊加，取2個值中最大的。
• 父子元素外邊距疊加也是取最大值。

2.定位

詳見博文CSS——佈局模型 http://www.cnblogs.com/congyue-pepsi/p/5671506.html

》對於定位的主要問題是要記住每種定位的意義：

• 相對定位是「相對於」元素在文檔流中的初始位置；
• 絕對定位是「相對於」距離它最近的已定位祖先元素，若是不存在已定位的祖先元素，那麼相對於初始包含塊。

》局對定位與文檔流無關，因此能夠覆蓋頁面的其它元素，使用z-index控制疊放順序

》包含框相對定位，元素絕對定位 舉例：

#branding {
    width: 70em;
    height: 10em;
    position: relative;
}

#branding .tel {
    position: absolute;
    right: 1em;
    bottom: 1em;
    text-align: right;
}

<div id="branding">
    <p class="tel">Tel: 1234 123 1234</p>
</div>

》注意，周圍元素的尺寸改變不會影響絕對定位元素的位置，由於它已經脫離了文檔流，因此容易產生覆蓋重疊問題，需留意。

》浮動：

• 包含塊太窄會向下移動，包含塊高度不一樣，可能會被高的那個卡住。
• 浮動元素會脫離文檔流，不影響周圍不浮動元素。
• 影響周圍浮動元素狀況：文本會圍繞浮動的圖像，設置clear(left/right/both/none)後，可清理該圍繞特性，會垂直降低到浮動元素下面。

》由於浮動元素不佔據空間，因此容器元素不包圍它們，添加一個進行清理的空元素能夠迫使容器元素包圍浮動元素。

未清理：灰色包含塊沒有高度在最頂層

.news {
    background-color: gray;
    border: solid 1px black;
}

.news img {
    float: left;
}

.news p {
    float: right;
}

<div class="news">
    <img src="/img/img.jpg" alt="my pic"/>
    <p>Some text</p>
</div>

清理後：灰色包含塊在全部內部元素底層包含

.news {
    background-color: gray;
    border: solid 1px black;
}

.news img {
    float: left;
}

.news p {
    float: right;
}

.clear {
    clear: both;
}

<div class="news">
    <img src="/img/img.jpg" alt="my pic" />
    <p>Some text</p>
    <br class="clear" />         
</div>

這種方法能夠解決，可是添加了多餘的代碼。

另外，也能夠將包含塊設置爲左浮動，能夠解決這個問題，可是會影響下一個元素，能夠選擇合適元素進行clear。

另外一種解決辦法：

>在news後添加類名clear

添加了一個點，而後設置高度爲0，同時設置不顯示。

由於被清理的元素在它們的頂外邊距上添加了控件，因此生成的內容須要將它的display屬性改成block。這樣設置以後，就能夠對生成的內容進行清理。

.clear:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}