（初級）css布局
一、單列布局
1、基礎知識
塊級元素 div p ul li dl dt
行級元素 img span input strong同一行顯示、無換行
2、盒子模型
盒子模型 （邊框border、外邊距margin、內邊距padding、內容content）
盒子模型3維立體圖：自上往下（邊框、內容和內邊距、背景、背景顏色、
外邊距）
樣式追求就近原則（行內樣式》內部樣式》外部樣式）
3、自動居中
margin： 0px auto;實現自動居中（原理：外邊距=（瀏覽器的寬度-外包含層的寬度）/2）（此時不能同時設定浮動和絕對定位）
一般情況下： 父層設定一寬度，子層設定100%就可以。（子層繼承父層寬度）
4、css布局筆記
4-1 margin：auto
#main
設定塊級元素的width可以阻止它從左到右撐滿容器。然後你就可以設定左右外邊距為auto來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距。
唯一的問題是，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。讓我們再來改進下這個方案。
4-2 max-width
在這種情況下使用max-width替代width可以使瀏覽器更好地處理小視窗的情況。這點在移動裝置上顯得尤為重要，調整下瀏覽器視窗大小檢查下吧！
二、橫向兩列布局
1、浮動定位
能夠實現多列布局
float屬性（left、right、none）：當元素沒有設定寬度值，而設定了浮動屬性，元素寬度隨內容的變化而變化。
清除浮動的常用方法：
1-1、clear屬性：clear:both;或者clear:left clear:right
1-2、同時設定width:100%(或固定寬度) + overflow:hidden;
不建議使用空標籤進行消除浮動！！！
三、絕對定位布局
通過設定position屬性實現（靜態定位（static）、相對定位（relative）、絕對定位（absolute相對於最近的「positioned」祖先元素）、固定定位（fixed相對於視窗））
position:relative;top:10px;left 10px;會出現覆蓋現象（top、left、bottom、right是偏移量）
絕對定位參照基準
1、無祖先元素（已為偏移參照基準）
2、有已定位祖先元素（已距離最近的已定位的祖先元素為偏移參照基準）
當乙個元素設定絕對定位，沒有設定寬度時，元素寬度根據內容進行調節。
橫向兩列布局
使用absolute實現橫向兩列布局（常用於一列固定寬度，另一列寬度自適應。）
主要應用技能
relative-父元素相對定位
absolute-自適應寬度元素絕對定位
注意：固定寬度列的高度》自適應寬度的列。
（中級）如何用css進行網頁布局
1、網頁也設計特點
網頁寬度自適應（調節瀏覽器寬度，網頁寬度自動修改）
網頁長度理論上沒有限制。
2、自適應寬度和固定寬度兩列布局
自適應：width：50%對於每個div（只要兩者和位100%即可）
3、使用position定位實現三列布局
自適應：width：33.33%對於每個div（只要三者和位100%即可）
固定寬度：
.left
.middle
.right
CSS基礎布局
一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子，這個盒子的寬和高，外加內邊距 邊框粗細和外邊距這些東西，決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型，padding 2px，border ...
css基礎 布局
背景設定 屬性作用 background size 背景圖的大小，cover,contain background repeat 平鋪background position 背景的位置 background origin 對齊方式 object fit 可以使適應背景的大小 box sizing 在...
css基礎布局
實現乙個兩側寬度固定，中間寬度自適應的三欄布局。要點 頁面的dom結構 header this is main body this is left body this is right body footer 聖杯布局 浮動和絕對定位 雙飛翼布局 浮動 於 ued user experience d...