相對定位和絕對定位
1.相對定位用於小幅修改某個元素的位置，使之相對於正常情況應該出現的地方稍微移動一下位置。使用position:relative屬性，再連同left，right，top和bottom等屬性，即可實現相對定位功能。
屬性名稱
屬性值用途
position
static
relative
absolute
fixed
預設值：元素按照正常流動方式渲染
配置元素位置相對於正常流動方式中的位置
配置元素在其容器中的確切位置
元素在瀏覽器視窗固定，網頁滾動時元素不動
left
數值或百分比
元素相對於元素左側的距離
right
數值或百分比
元素相對於元素右側的距離
top數值或百分比
元素相對於元素頂部的距離
bottom
數值或百分比
元素相對於元素底部的距離
2.使用絕對定位指定元素在其容器元素中的確切位置。設定絕對位置需要使用position:absolute屬性，加以下屬性：left,right,top,bottom.
浮動
1.瀏覽器逐行渲染html文件中的**。這種方式稱為「正常流動」。它按照元素在網頁源**出現的順序顯示元素。
2.元素在瀏覽器視窗或另乙個元素左右兩側浮動通常用float屬性來設定。
3.clear屬性用於清除浮動。clear屬性值為left，right或both。
一種是用換行清除浮動，在結束標記
之前，為乙個換行標記分配clearleft類。
另一種是改向h2元素應用clearleft類，h2會強行單獨佔一行。
.clearleft
屬性值用途visible
預設值；顯示內容，如果過大，內容會溢位分配給它的區域
hidden
內容被剪裁，以適應瀏覽器視窗中分配給元素的空間
auto
內容充滿分配給它的區域。如有必要，顯示滾動條訪問其他內容
scroll
內容在分配給它的區域進行渲染，並顯示滾動條
2.為容器元素配置overflow屬性清除浮動。用於配置div的示例：
div1.網頁的乙個常見設計是雙欄布局。這是通過配置其中一欄在網頁上浮動來實現的。
2.左側導航的雙欄布局模板：
width:80%;
min-width:850px;
margin:auto;
background-color:#b3c7e6;
}#leftcolumn
#rightcolumn
3.頂部logo左側導航的雙欄布局模板：
CSS頁面布局基礎
5 css頁面布局基礎 字符集不能設定寬度，如果要設定寬度必須display設定成塊級 inline 字符集 block 塊級 padding內邊距，border邊框，margin外邊距。4個 上 右 下 左，3個 上 左右 下，兩個 上下 左右，乙個 上下左右。元素浮動 float none 沒有...
頁面布局基礎3
html 5的結構元素 1.html5引入語義上的結構性元素來配置網頁區域，這些新的塊級元素並不是取代div元素，而是和div及其他元素結合使用。2.更多html5結構元素 css對列印和移動web的支援 1.為瀏覽器顯示建立乙個外部樣式樣式表和列印設定建立另乙個樣式表，現代瀏覽器會根據在螢幕上顯示...
css頁面布局基礎
1.盒模型 margin padding 行高line height 2.vertical align 垂直對齊方式 行高居中 3.如果div沒有設定高度，則會自動增加設定後，自動不變 4.絕對定位 使用position absolute 宣告 使用乙個或多個偏移屬性 top right 相對於其容...