第 27 章 CSS 傳統佈局[下]

學習要點：

1.定位佈局

2.box-sizing

3.resize

主講教師：李炎恢

本章主要探討 HTML5 中 CSS 早期所使用的傳統佈局，很多情況下，這些佈局方式還是非常有用的。

一．定位佈局

在使用定位佈局前，我們先瞭解一下定位屬性的用法。CSS2 提供了 position 屬性來實現元素的絕對定位和相對定位。

//絕對定位，脫離文檔流，以視窗文檔左上角 0,0 為起點

header {
    position: absolute;
    top: 100px;
    left: 100px;
}

所謂脫離文檔流的意思，就是本身這個元素在文檔流是占位的。如果脫離了，就不占有文檔的位置，好像浮在了空中一般，有了層次感。

由於絕對定位脫離了文檔流，出現層次概念。那麼每個元素到底在那一層，會不會衝突覆蓋。這時通過 z-index 屬性來判定它們的層次關係。

//設置在 100 層上 

header {
    z-index: 100;
}

//以視窗參考定位，脫離文檔流，會隨著滾動條滾動而滾動 

header {
    position: fixed;
    top: 100px;
    left: 100px;
}

//相對定位，不脫離文檔流，占位偏移 

header {
    position: relative;
    top: 100px;
    left: 100px;
}

這三種分別都在各自的情況下使用，均比較常用。但還有一種情況，就是：1.既要脫離文檔流（這樣元素之間不會相互衝突）；2.以父元素，比如 body 或其他父元素為參考點（這樣可以實現區域性絕對定位）；3.還必須是絕對定位。

//第一步，將需要設置參考點的父元素設置為相對，且不設置坐標

body {
    position: relative;
}

//第二步，如果父元素設置了參考點，子元素的絕對定位將以它為基準 

header {
    position: absolute;
    top: 0px;
    left: 0px;
}

1.固定佈局

//CSS 部分

body {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

header {
    width: 960px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
}

aside {
    width: 200px;
    height: 500px;
    position: absolute;
    top: 120px;
    left: 0;
}

section {
    width: 760px;
    height: 500px;
    position: absolute;
    top: 120px; /*left: 200px;*/
    right: 0;
}

footer {
    width: 960px;
    height: 120px;
    position: absolute;
    top: 620px;
}

在上面，基本都用了定位來進行固定佈局。但細心的可以發現，其實只有右側需要實行絕對定位，其他就按照普通的擺放即可。對於設計成流體佈局，只要將長度設置成百分比即可。

二．box-sizing

在盒模型那個章節，我們瞭解到元素盒子如果加入了內邊距 padding 和邊框 border 後，它的總長度會增加。那麼如果這個元素用於非常精確的佈局時，我們就需要進行計算增減。這其實是比較煩人的操作，尤其是動態設置頁面佈局的時候。

CSS3 提供了一個屬性 box-sizing，這個屬性可以定義元素盒子的解析方式，從而可以選擇避免掉佈局元素盒子增加內邊距和邊框的長度增減問題。

//設置 border-box 讓 border 和 padding 不在額外增加元素大小

aside {
    width: 200px;
    height: 500px;
    background-color: purple;
    padding: 10px;
    border: 5px solid red;
    box-sizing: border-box;
    float: left;
}

//完整形式

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

三．resize

CSS3 提供了一個 resize 屬性，來更改元素尺寸大小。

一般普通元素，預設值是不允許的。但如果是表單類的 textarea 元素，預設是允許的。而普通元素需要設置 overflow:auto，配合 resize 才會出現可拖拽的圖形。

//允許修改

aside {
    resize: both;
    overflow: auto;
}