一、如何用css進行網頁布局
二、網頁布局基礎
三、網頁簡單布局之結構和表現原則
四、css sprite雪碧圖應用
什麼叫布局？
網頁的特點：
網頁自適應寬度；
網頁長度無限延長；
（分欄也叫分列，混合布局，一列布局，二列布局，三列布局。）
使用float和絕對定位position:relative都會脫離文件流.
清除浮動兩個方法：
1.為受浮動影響元素設定屬性
2.為受浮動影響元素設定固定長度以及溢位隱藏屬性
網頁布局：流式布局(標準文件流)、浮動布局、絕對定位布局
w3c標準：
結構化標準語言（html和xml）
表現標準語言（css）
行為標準語言（dom和ecmascript）
標準文件流：
從上到下，由左到右，輸出文件內容
由塊級元素和行內元素組成
塊級元素:
由左到右填滿頁面，獨佔一行，到頁面邊緣時會自動換行div,p,ul,ol,dt.....
行級元素：
能在同一行顯示，不會改變html文件結構span，strong，input，img
盒子3d模型—網頁布局的基石
1.border
2.content + padding
3.background-image
4.background-color
5.margin
盒子大小=邊框border+內邊距padding+＋外邊距margin＋內容content
行內樣式 > 內部樣式 > 外部樣式 （採用的是就近原則）
1、auto會根據瀏覽的寬度自動來設定兩邊的外邊距。
2、其原理：（瀏覽器的寬度-外包含層的寬度）/2=外邊距
3、如果想讓頁面自動居中，當設定marign屬性為auto時，就不能在設定浮動或是絕對定位屬性。如果你設定了auto，又設定了浮動或是絕對定位，那麼頁面是不會居中顯示的
自動居中一列布局：
1、三個技能點:標準文件流、margin屬性、塊級元素。
**自動居中一列布局需要設定 margin 左右值設定為 auto，而且一定要設定width為乙個定值。
**元素未設定寬度，但設定了浮動float屬性，元素的寬度隨內容的變化而變化。當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素特指緊鄰後面的元素
當父包含塊被壓縮成一條線的時候使用不能起到清除浮動的作用，只能用溢位屬性hidden方法來清除浮動影響
橫向兩列布局，主要設定float屬性和margin。
div一般不要設定高度.
(1)position ４個值
static relative absolute fixed(後面兩個都屬於絕對定位)
相對定位
即對自身原有位置進行偏移，隨即擁有偏移值和z-index,仍處於標準文件流中
絕對定位
建位了而包含塊為基準的定位，完全了脫離了標準文件流， 父元素要設定position:relative 如果沒有就再而上乙個元素為基準，直到.
positive設定相對定位，以自身為相對基準進行偏移，設定相對定位屬性之後會有偏移屬性（top left right bottom 相對於自身進行偏移，會覆蓋其他內容進行偏移）和z-index屬性（空間的層堆疊z軸的堆疊，沒有的話是預設存在y和x軸的乙個平面上）
相對定位和絕對定位的異同
1、相對定位
特點：相對於自身原有位置進行偏移
元素仍處於標準文件流中
隨即擁有偏移屬性和z-index屬性（多了z軸更具空間感）
移動同時會將瀏覽器撐開
絕對定位特點：
建立了以包含塊位基準的定位
完全脫離標準文件流
隨即擁有偏移屬性跟z-index屬性
未設定偏移量時：
無論是否存在已經定位的祖先元素，都保持在元素初始位置 脫離標準文件流
設定偏移量時：
偏移參照的基準：
無已定位的祖先元素：以為偏移參照基準
有已定位的祖先元素：以距其最近的已定位的祖先元素為偏移參照基準
注意：當乙個元素設定了絕對定位，沒有設定寬度時，元素的寬度根據內容進行調節。
＊＊＊使用絕對定位實現橫向兩列布局一般用於：一列固定寬度，一列自適應寬度。
主要應用技能：
relative-父元素相對定位。
absolute-自適應寬度元素絕對定位
注意：固定寬度列的高度》自適應寬度的列，否則會造成文件的溢位。
開發思路：
先按結構和語義編寫**
再進行樣式設定
減少html與css的契合度
先考慮設計圖中的文字內容和內容模組之間的關係，重點放在編寫html結構和語義化，然後考慮布局和表現形式。
什麼是網頁**？相同的html結構，不同的css樣式。
xuebitu雪碧圖
使用sprite，將多張小整合成一張大，可以減少http請求數，加速內容顯示。
cssscrpite雪碧圖
靜態，不隨使用者資訊變化而變化。
小，容量比較小
載入量比較大。（目的是：有效的減少http請求的數量）
大圖不建議拼成雪碧圖，載入時間長
雪碧圖原理：通過css的背景定位屬性：background-position來控制
座標軸,拼合背景圖的小圖(x,y)為負值
以雪碧圖左上角的定點為(0,0)座標
當需要對座標系中的某個小圖示進行展示的時候，只需要取左上角的座標進行偏移，例如(-100,0)，只需要將background-position:-100,0;
實現原理：控制乙個層，可顯示的區域範圍大小，通過乙個視窗，進行背景圖的滑動。
在對元素設定固定定位時，如果希望本元素包含其父包含塊中，不需要對其設定偏移量.
html css 網頁布局
1.css 選擇符命名規則 關於 css命名法，和其他程式命名一樣，分為 駝峰，帕斯卡，匈牙利法 駝峰命名法 除第乙個單詞首字母小寫外，其餘所有單詞首字母都大寫 帕斯卡命名法 與駝峰相似，區別就是所有單詞首字母都大寫 公司都有命名規範文件 css選擇符 選擇符的作用？指定 css樣式作用的物件 範圍...
HTML CSS 簡單網頁布局
常用標籤列舉 元素選擇器 匹配元素基本選擇器 按標籤名選擇 tagname class類選擇器 classname id選擇器 id 直接子元素 ul li 所有後代元素 屬性選擇器 tagname class id tagname class id 樣式 定位position 偽類 visited...
網頁布局基礎
網頁製作的基礎，在w3c盛行的今天 div css 布局網頁 布局分為 流式布局 浮動布局 絕對定位布局 涉及標準文件流 盒子模型 float屬性 position屬性 1.自動居中 列布局 盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局，解決浮動影響的常用方...