| title | layout | categories | tags | excerpt |
|---|---|---|---|---|
css佈局模型詳細介紹 |
post |
CSS |
css佈局模型 絕對定位 相對定位 固定定位 position |
css佈局類型詳細介紹與舉例說明 |
HTML中元素有三種佈局模型：流動模型、浮動模型、層模型。
流動模型（flow）
HTML網頁默認佈局就是流動模型，佈局如下：
塊級元素(block)自上而下垂直分佈，因爲塊級元素默認寬度爲瀏覽器窗口的100%，或者理解爲每個塊級元素默認佔一行。常見塊級元素有 div, p, h 等；
**內聯元素(inline)**從左到右水平分佈，即不像塊級元素那樣每個獨佔一行。常見內聯元素有 a, span, em 等。
浮動模型（float）
上面提到的塊級元素是每個獨佔一行顯示，但是定義css浮動模型後就能使兩個塊級元素並排一行顯示。 例如HTML代碼：
<div id = "div1">
<p>Hello</p>
</div>
<div id = "div2">
<p>World !</p>
</div>顯示結果是這樣：
Hello
World !
但是設置浮動css後：
div {
float: left;
}效果就是這樣：
HelloWorld !
也可以設置元素一左一右顯示：
#div1 {
float: left;
}
#div2 {
float: right;
}層模型（layer）（position）
類似於PS中的圖層編輯，HTML中也存在層模型佈局，對元素進行定位。 層模型有三種：絕對定位(absolute)、相對定位(relative)、固定定位(fixed)。
絕對定位
理解就是字面上的意思，簡言之就是相對於上級設置了 position 屬性的元素進行定位，如果沒有這類上級就是相對於 body 標籤，也是瀏覽器窗口。需要設置css：position: absolute;，然後就可以使用 top, right, bottom, left 這類屬性進行定位。例如：
div {
position: absolute;
top: 100px;
left: 150px;
}這樣就使板塊向下移動100像素，向右移動150像素。
相對定位
這裏的相對較難理解，與數理中的“相對”不太一樣，這裏是**“相對於自己原來應在的位置”，需要設置css：position: relative;，重要的是不用關心上級是否設置了position屬性**，這樣就很方便。例如：
div {
position: relative;
top: 100px;
right: 100px;
}板塊就相對於自己沒設置樣式前的位置，同時向左向下移動100px。
固定定位
這個就好理解了，所謂固定就是指固定於整個瀏覽器網頁窗口不動，即使滾動網頁內容也不改變位置，需要設置css：position: fixed，也可以設置 top, right等調整固定的位置。還記得瀏覽器某些網頁右下角的小廣告嗎，是不是固定在那怎麼瀏覽網頁都不動 -_- .