1.標準文件流：從上到下，從左到右輸出文件內容
2.浮動
3.絕對定位
需要注意的是塊級元素如div p ul 等
行級元素如span strong img input等
塊級元素與行級元素都是盒子模型，下面說下盒子模型
盒子模型是網頁布局的基石，border padding margin
下面給出盒子3d模型圖便於理解
布局時候最重要的是把握三個技能點：標準文件流，塊級元素，margin屬性
自動居中**：margin：0 auto； auto會根據瀏覽器寬度自動設定兩邊外邊距
需要注意的是：不能同時在設定float與絕對定位了！
float屬性：left right none； float屬性意思就是元素會左移或者右移直到碰到容器
設定float屬性後，相鄰元素即緊鄰之後的元素受到了影響
清楚浮動的**為：clear：both；
或者：width：100%；overflow：hidden；
首先可以用浮動方法來實現
其次可以用絕對定位的方法，但用的不多主要用於一列寬度固定另一列寬度自適應的時候，需要注意的是 固定寬度列的高度要大於自適應列的高度
這裡給出一段網頁布局的**
>無標題文件
title
>
6<
style
type
="text/css"
>7*
8#wrap
9#mainbody
10#left
11#mid
12#right
13style
>
14head
>
1516
<
body
>
17<
div
id="wrap"
>
18<
div
id="header"
><
img
src=""
width
="970"
height
="88"
/>
div>
19<
div
id="mainbody"
>
20<
div
id="left"
><
img
src=""
width
="109"
height
="487"
/>
div>
21<
div
id="mid"
><
img
src=""
width
="649"
height
="439"
/>
div>
22<
div
id="right"
>
><
img
src=""
width
="177"
height
="329"
/>
div>
23div
>
24div
>
25body
>
26html
>
從中可以看出 left與mid的橫向兩列採取了浮動的方法
right採取了絕對定位的方法
css網頁布局基礎
塊級元素，行級元素都是盒子模型 三種定位機制 標準文件流 浮動 float 及絕對定位 margin auto 1 設定了浮動的元素仍然處於標準文件流中 2 當設定浮動，沒有輸入內容，就會縮成乙個點 3 浮動會影響接下來的下乙個元素 4 清除浮動 clear both width 100 overf...
CSS 網頁布局
一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...
CSS 網頁布局
頭部區域位於整個網頁的頂部，一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術，更學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是學的不僅是技術，更是夢想 學的不僅是技術，更是夢想！學的不...