網頁製作的基礎，在w3c盛行的今天「div+css」布局網頁
布局分為：流式布局、浮動布局、絕對定位布局
涉及標準文件流、盒子模型、float屬性、position屬性
1.自動居中-列布局—盒子模型的使用方法
2.浮動布局—float屬性來實現上中下布局和橫向兩列甚至多列布局，解決浮動影響的常用方法
3.絕對定位布局–上中下布局，實現兩列甚至多列布局
css中的定位機制：標準文件流、定位、浮動
標準文件流（normal flow）特點：
從上到下、從左到右輸出文件；
由塊級元素和行級元素組成。
塊級元素：從左到右撐滿頁面，獨佔一行 ，觸碰到頁面邊緣時會自動換行，標籤有：div ul li dl dt p…
行級元素：能在同一行內顯示，不會改變html文件結構，標籤有 span a img input strong…
塊級元素和行級元素都是盒子模型
盒子模型=網頁布局的基石，由4部分組成：
邊框（border）、外邊距（margin）、內邊距（padding）、內容（content）
行內樣式 > 內部樣式 > 外部樣式 （採用的是就近原則）
盒子3d模型(也就是盒子模型的圖層)：第一層border(邊框），第二層content+padding(邊框+內邊距)，第三層background-image(背景圖),第四層background-color(背景顏色)，第五層margin(外邊距)
盒子模型尺寸：border+margin+padding+content
1、auto會根據瀏覽的寬度自動來設定兩邊的外邊距。
2、其原理：（瀏覽器的寬度-外包含層的寬度）/2=外邊距
3、如果想讓頁面自動居中，當設定marign屬性為auto時，就不能在設定浮動或是絕對定位屬性。如果你設定了auto，又設定了浮動或是絕對定位，那麼頁面是不會居中顯示的
float浮動：可實現塊級元素橫向排列
1、3個屬性值：left-左浮動，right-右浮動，none-不浮動
2、設定了浮動的元素，仍舊處於標準文件流中，意味著會佔據標準文件流中的空間，對周圍的元素產生影響
3、當元素沒有設定寬度值，而設定了浮動屬性，元素的寬度隨內容的變化而變化（沒內容時直接縮到浮動的那一邊，看不見了）
4、當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素特指緊鄰後面的元素。
清除浮動的方法：（要對受到浮動影響的元素設定)
1、clear屬性
clear:both /right/left;
2、設定width:100%(或固定寬度)+overflow:hidden;
3.另外可以通過加空標籤（不建議使用）
橫向兩列布局的實現：這是網頁布局最常見的方式之一
一：主要應用技能：
float屬性——使縱向排列的塊級元素，橫向排列
margin屬性——設定兩列之間的間距
二：當父包含塊縮成一條時，用clear：both方法清除浮動無效，它一般用於緊鄰後面的元素的清除浮動。所以設定父的overflow:hidden
☆div塊的高度一般不需要設定，這樣高度就會隨著內容自動擴充套件。若設定了高度，又設定了overflow：hidden，當內容超過高度的時候，就無法正常顯示了
注意：
全域性選擇器*{}對整體頁面進行定義**
外層沒有設定浮動，內層設定浮動，會影響到外層，外層高度無法擴充套件
div一般不要設定高度
1.通過設定postion屬性實現，css中規定的第三種定位機制。
2.能夠實現橫向多列布局及較為複雜的定位，比如帶有遮罩層效果的提示框、固定層效果、全屏廣播
3.position 屬性
擁有3種定位形式 1、靜態定位 2、相對定位3、絕對定位
相對定位(position:relative)是相對於原來的位置經行偏移
特點:
1、相對於自身原有位置進行偏移
2、仍處於標準文件流中
3、隨即擁有偏移屬性和z-index屬性(z-index屬性是指空間的層堆疊，產生z軸。否則是預設為處在x\y軸的平面上。會產生遮蓋效果。)
絕對定位(position:absolute)特點：
建立了以包含塊為基準的定位；
完全脫離了標準文件流；
隨即擁有偏移屬性和z-index屬性；
未設定偏移量時：
無論是否存在已經定位的祖先元素，都保持在元素初始位置 脫離標準文件流
設定偏移量時：
偏移參照的基準：
無已定位的祖先元素：以為偏移參照基準
有已定位的祖先元素：以距其最近的已定位的祖先元素為偏移參照基準
注意：當乙個元素設定了絕對定位，沒有設定寬度時，元素的寬度根據內容進行調節。
如果我們要實現在a div內的b div絕對定位，相對於a的絕對定位，那麼我們應該將a div設定乙個相對定位position:relative，這樣b設定的left或top就是相對於a的，否則就會相對於html
結論：絕對定位是以他父級的已經有定位的元素來定位的，如果父級沒有定位的，則是以html作參照的。
橫向兩列布局（使用absolute實現橫向兩列布局）常用於一列固定寬度，另一列寬度自適應的情況
（主要技能：）
1.relative——父元素 相對定位
2.absolute——自適應寬度元素絕對定位
注意：固定寬度列的高度 > 自適應寬度的列寬度；
兩列之間的距離用margin來拉開距離
網頁布局基礎
由全球資訊網聯盟指定的一系列標準，包括 機構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構 樣式 行為分離。css中存在3中定位機制 1 標準文件流 normal flow 特點 從上到下，從左到右，輸出文件內容 由塊級元素和行級元...
網頁布局基礎
1 css 規定的定位機制有三種，分別是 標準文件流 normal folw 浮動 floats 絕對定位 absolute positioning 2 w3c標準 由全球資訊網制定的一系列標準，包括 結構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript...
網頁布局基礎
網頁布局參照三個方面 標準文件流 float position 1 標準文件流 note 兩個元素都屬於 盒子模型 2 float note 設定浮動後，脫離標準文件流 但不脫離標準文字流 當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素指的是緊鄰後面的元素。消除影響方法 width 100 ...