《Head first HTML與CSS 第二版》讀書筆記 第十一章 佈局和定位

一、流體佈局

瀏覽器使用流在頁面中放置元素。

塊元素從上向下流，各元素之間有一個換行。默認的，每一個塊元素會佔瀏覽器窗口的整個寬度。

內聯元素在塊元素內部從左上方流向右下方。若是須要多行，瀏覽器會換行，在垂直方向上擴展外圍塊元素，來包含內聯元素。

內聯元素的左右外邊距不會摺疊在一塊兒，而塊元素的上下相鄰的外邊距會摺疊爲最大外邊距。

流體佈局指擴展瀏覽器窗口時，頁面紅的內容會擴展以適應頁面。

二、浮動元素

將元素添加float屬性，指定其爲浮動元素。浮動元素會從正常流中取出，浮動到左邊或右邊。

浮動元素放在塊元素之上，不會影響正常的頁面流。不過，內聯內容會考慮浮動元素的邊界，圍繞着浮動元素。

浮動元素必須有特定的寬度，不能設置爲auto。

clear屬性用來指定一個塊元素左邊或者右邊（或者兩邊）不能有浮動元素。設置了clear屬性的塊元素會下移，直到它旁邊沒有浮動元素。

能夠浮動內聯元素，常見的是浮動圖像。能夠把浮動元素想成是被塊元素忽略的元素，而內聯元素卻知道它們在哪裏。

三、凍結佈局是指，元素的寬度固定，不會隨瀏覽器窗口擴展或手速。

四、凝膠布局實質，元素的寬度固定，但外邊距會隨着瀏覽器窗口擴展或收縮。一般會把內容放在中央。須要將margin-left和margin-right屬性設置爲auto。

五、position屬性（定位方式）

但是設置4個值：static、absolute、fixed、relative。

（1）static是默認方式，將元素放在頁面的正常流中；

（2）absolute 使用這種定位時，瀏覽器將該元素從流中徹底刪除，而後將這個元素放置在top和right屬性指定的位置上（也能夠用bottom和left指定位置）；因爲在流以外，其餘元素不知道有這樣一個元素，它們會將其徹底忽略。流中的元素不會將其內聯元素圍繞在一個絕對定位元素周圍。

絕對元素能夠分紅放置，一個元素能夠放在另外一個絕對定位元素上面。每一個定位元素都有一個名爲z-index的屬性，會指定在虛擬z軸上的位置（z-index越大，元素越靠近你）。

塊元素和內聯元素均可以進行絕對定位。

指定元素位置除使用像素外還可使用百分數。

若是一個絕對定位元素嵌套在另外一個定位元素中，這個元素會相對於外包含元素定位。

（3）fixed 固定定位元素老是相對於瀏覽器窗口定位，頁面滾動時它不會移動。

（4）relative 相對定位元素首先正常流入頁面，而後按指定的量偏移，從而留出它們原來所在的空間。

使用相對定位時，left、right、top和bottom是指距正常流中該元素位置的偏移量。

六、表格佈局

建立表格佈局時，須要使用對應表格的一個塊元素（display: table），對應行的塊元素（display: table-row）和對應單元格的塊元素（display: table-cell）一般這些元素都是<div>元素。

border-spacing屬性爲表格中的單元格增長10像素的邊框間距。能夠把border-spacing看做是常規元素的外邊距。

vertical-align屬性控制單元格中的內容對於單元格的對齊方式（top、middle和bottom）。

width控制列的寬度。