提起布局，盒模型是最重要的概念。
盒模型：包括 寬、高、外邊距、內邊距、邊框，
注意：當兩個垂直盒子算margin時，只會計算比較大的那個元素。盒子的大小，最好是開啟開發者模式去看看真實的是多少，有時因為一些原因自己寫的可能是樣式並沒有用上。
css3 box-sizing:border-box; 給這個塊級元素設定這個，不會計算margin值，這樣只要量出盒子大小（指邊框以內的）只要寫padding ，border ，content 內容大小會自己計算。
1. 3種定位機制：普通流、浮動、絕對定位
一般都是普通流
但是有時，我們需要在一行顯示塊級元素，用浮動或者定位都行，但是現在提倡響應式布局，浮動也可以解決，但是檔案脫離文件流，需要清除浮動。乙個好的方式是 display:inline-block;一行顯示塊級元素，但是會產生間隔，解決方案是給父級元素 font-size:0; 自己元素再設定font-size:大小;即可。
浮動：float:left right ;
定位：relative absolute fixed
2.整體頁面居中
隨著現在裝置的螢幕越來越大，最好是設計好整體頁面的寬高和，然後用
margin:0 auto居中。
3.兩列布局
3.1 浮動
左浮動 ，又浮動解決
3.2 定位
相對於父級元素 絕對定位解決
4.三列布局
現在是響應式布局，不推薦使用浮動，因為會出現很多問題，要想完美解決，推薦一種雙飛翼的布局。
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
style
>
.middle
.left
.right
style
>
head
>
<
body
>
<
div
class
>
<
div
class
="middle"
>
<
span
>中間
span
>
div>
<
div
class
="left"
>左盒子
div>
<
div
class
="right"
>又盒子
div>
div>
body
>
html
>
4.流式布局
百分比布局，但是這種算上下文的百分比實在麻煩，不停的計算器在計算。
推薦使用min-width ,max-width 設定，元素的寬高不要寫死，用margin 和padding隔離開，讓元素自動填充區域。
使用rem為單位的設定，sublime有個外掛程式可以自動將px轉換為rem 基於瀏覽器進行計算。
移動端因為物理畫素比不同，推薦使用**映象自動適配螢幕布局flexible.js
5.彈性布局
移動端的相容較好
CSS3響應式布局總結
一 摘要 今天給大家總結一下css的響應式布局,首先我們還是先弄清楚,幾種布局的概念.1.靜態布局 static layout 特點 固定死的寬高,典型的應用靜態 2.自適應 特點 1 為不同螢幕定製不同的布局 2 在每個布局中頁面元素不隨著視窗的大小而改變 3.流式布局 特點 1 只有一套布局 2...
掌握css3布局
在傳統的浮動 定位基礎之上，css3提供了一系列新的布局方式，包括彈性盒模型 多列 查詢等，利用這些布局方式我們可以靈活地應對複雜網頁布局，本文通過屬性詳解 實戰案例的方式向您展示這些新興布局方式的強大之處。1.彈性盒模型 彈性盒布局模型 flexible box layout 是 css3 規範中...
css3 布局 文字
它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...