學習要點：
1.布局模型
2.**布局
3.浮動布局
主講教師：李炎恢
本章主要** html5 中 css 早期所使用的傳統布局，很多情況下，這些布局方式還是非常有用的。
一．布局模型
在早期沒有平板和智慧型手機等移動裝置大行其道的時期，web 頁面的設計主要是面向 pc 端電腦解析度展開的。這種解析度比例比較單一，基本上只要滿足最低解析度設計即可。一般來說有 4:3、16:10、16:9 這樣的主要解析度。那麼，從這種比例上來看，長度總是大於寬度的。從最低解析度 1024 * 768 設計即可。為了使瀏覽器底部不出現滾動條，需要減去適當的寬度，比如減去 28，最終固定長度設定為 996 即可。當然，也有一些**在近兩年講最低解析度設定為 1280 減去滾動條寬度，因為大顯示器逐步主流。
除了剛才所說的固定長度的布局，還有一種是流體布局，就是布局的長度為百分比，比如 100%。不管你是什麼解析度，它都能全屏顯示，當然，侷限性也特別大，只適合一些單一頁面，複雜的頁面，會隨著不同瀏覽器產生各種閱讀障礙。
我們建立乙個三行兩列模型。並採用**布局和浮動布局，構建固定和流體布局的方式，模型圖如下：
二．**布局
**布局，就是通過設定固定的單元格，去除**邊框和填充實現的布局。當然這個布局非常不建議使用，只是教學了解。**應該用它最為語義的地方，就是二維表的資料顯示。
1.固定布局
//html 部分
<//css 部分table
border
="0"
>
<
tr>
<
td colspan
="2"
class
="header"
>header
td>
tr>
<
tr>
<
td class
="aside"
>aside
td>
<
td class
="section"
>section
td>
tr>
<
tr>
<
td colspan
="2"
class
="footer"
>footer
td>
tr>
table
>
body table .header .aside .section .footer2.流體布局**的固定布局改成流體布局非常簡單，只需要設定 table 為 100%即可。
//修改 table
table三．浮動布局浮動布局主要採用 float 和 clear 兩個屬性來構建。
1.固定布局
//html 部分
<//css 部分header
>
header
header
>
<
aside
>
aside
aside
>
<
section
>
section
section
>
<
footer
>
footer
footer
>
body header aside section footer2.流體布局流體布局只要更改 body 元素的限定長度為 auto 或 100%。然後左右兩列分別設定 20% 和 80%即可。
//css 部分
body aside section
css傳統布局
1 position.1 position relative 相對定位.以自己所在位置為參考點.自己所在位置為 top 0 left 0 設定position relative 後，元素位置不變，而且會佔據自己所在位置.通過設定left,top,這兩個很常用 right,bottom,來改變元素所在...
第29章 CSS3彈性伸縮布局 上
index.html 從技術上來說，ip internet procotol，網際網路協議 是一種位址協議，是網際網路資訊傳輸的規範和標準，也是網際網路賴以存在的基礎。現在的網際網路大多是建立在ipv4這個版本的位址協議基礎上，這個協議所 產生 的ip位址約有45億個，由國際組織統一分配。簡單來說，...
精通CSS 第8章 布局
所有css布局技術的根本都是3個基本概念 定位 浮動和外邊距操作。8.1 計畫布局 要想建立可伸縮且容易維護的css系統，首先應該檢查設計，尋找重複的模式，這包括頁面結構中的模式或在站點中元素反覆出現的方式。8.2 設定基本結構 使用margin auto 讓設計居中 html lang en cl...