基本布局方式
屬性
值
定位參照物
是否仍佔據文件流的位置
描述
position
static
由文件流自然形成 是
預設值，，無需顯式定義。元素出現在正常的流中（忽略
top, bottom, left, right, z-index
宣告）。
relative
相對自己在文件流中的位置
是，該元素在文件流中佔據的空間不會釋放
生成相對定位的元素，相對於其文件流位置進行定位。
元素的位置通過
"left", "top", "right"
以及"bottom"
屬性進行規定。
absolute
相對第乙個定位過的父元素，即
position=relative/ absolute/fixed
的父元素，（
static
定位過的父元素不算）
否，已經脫離文件流
生成絕對定位的元素，相對於
static
定位以外的第乙個父元素進行定位。
元素的位置通過
"left", "top", "right"
以及"bottom"
屬性進行規定。
fixed
相對瀏覽器視窗
否，已經脫離文件流
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過
"left", "top", "right"
以及"bottom"
屬性進行規定。
inherit
繼承父元素的定位型別
由父元素的定位型別來確定
規定應該從父元素繼承
position
屬性的值。
float
left
、right
、none
、inherit
相對父元素（不論是否定位過）和前乙個浮動框
否，已經脫離文件流
浮動的框只能向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止
api
浮動布局模型
button001
button003
button002
固定布局模型
aaaaa
aaaaa
aaaaa
aaaaa
aaaaa
絕對布局模型
button001
button002
button003
button004
button005
button006
相對布局模型
aaaaa
aaaaa
aaaaa
aaaaa
線性布局模型
button01
button02
button03
aaabutton04
button05
button06
參考：html中元素的定位方式
史上最全html和css布局技巧
html css + div實現整體布局
HTML網頁布局的兩種方式
網頁布局兩種方式 浮動布局 定位布局 1.浮動布局 float left right none 注意 設定浮動之後，元素會脫離文件流，飄起來。塊級元素設定浮動，失去獨佔一行的特性。浮動元素會受 父級 元素的擠壓，可能擠到下一行去。自動擴充套件大盒子高度 1.盒子塌陷 大盒子不設定高度，小盒子又全部浮...
html 居中布局
需求，有三個內容需要居中顯示 內容居中，我們太熟悉了 content1,content2,content3 這樣，三個內容都居中了。然後，當content1 內容裡面的h1,距離頂部有50個畫素的時候，怎麼寫？第一反應，用margin title但是，緊鄰的塊級元素會發生margin collaps...
HTML 頁面布局
2.10頁面布局概述 頁面布局概述 1 table布局 通過table元素將頁面空間劃分成若干個單元格，將文字或等元素放入單元格中，隱藏 的邊框，從而實現布局。這種布局方式也叫傳統布局，目前主要使用在edm 廣告郵件中的頁面 中，主流的布局方式不用這種。2 html css布局 div css 主要...