浮動
使用float來設定元素浮動
可選值
none
預設值，不浮動，元素在文件流中
left
元素向左浮動
right
元素向右浮動
特點
1.元素浮動以後會完全脫離文件流
2.浮動以後元素會一直向父元素的最上方移動
3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動
4.如果浮動元素的上邊是乙個塊元素，則浮動元素不會覆蓋塊元素
5.浮動元素不會超過他上邊的浮動的兄弟元素，最多一邊齊
6.浮動元素不會覆蓋文字，文字會自動環繞在浮動元素的周圍，可以通過浮動來實現文字環繞的效果
浮動以後元素的特點
元素浮動以後，會使其完全脫離文件流。
塊元素塊元素脫離文件流以後
1.不會獨佔一行
2.寬度和高度都被內容撐開
內聯元素
內聯元素脫離文件流以後會變成塊元素
高度塌陷
父元素在文件流中高度預設是被子元素撐開的，當子元素脫離文件流以後，將無法撐起父元素的高度，也就會導致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置將會上移，導致整個頁面的布局混亂
方法一開啟父元素的bfc或haslayout
bfcblock formatting context
塊級格式化環境
bfc是元素的隱含屬性，預設是在關閉狀態的
可以通過一些特殊的樣式，來開啟bfc
開啟bfc以後元素將會具有如下特性
1、父元素的垂直外邊距不會與子元素重疊
2、開啟bfc的元素不會被浮動元素所覆蓋
3、開啟bfc的元素可以包含浮動子元素
開啟bfc的方式
1.設定元素浮動
2.設定元素絕對定位
3.設定元素的型別為inline-block
4.設定overflow為乙個非預設值
一般都是使用overflow:hidden來開啟bfc
haslayout
在ie6中沒有bfc，但是有乙個和bfc類似的haslayout
在ie6中可以通過開啟haslayout來解決高度塌陷的問題
***最小的開啟方式
zoom:1
當為元素設定寬度非預設值時，會自動開啟haslayout
方法二在塌陷的父元素的最後新增乙個空白的div，然後對該div進行清除浮動
使用這種方式會在頁面中新增多餘的結構
方法三使用after偽類，向父元素後新增乙個塊元素，並對其清除浮動
該種方式的原理和方法二原理一樣，但是不用向頁面中新增對於的結構
定位
通過定位可以將頁面中的元素，擺放到頁面的任意位置
使用position來設定元素的定位
可選值
static
預設值，元素沒有開啟定位
relative
開啟元素的相對定位
absolute
開啟元素的絕對定位
fixed
開啟元素的固定定位
相對定位
1.開啟元素的相對定位後，如果不設定偏移量元素不會發生任何變化
2.相對定位元素相對於其自身在文件流中的位置來定位
3.相對定位的元素不會脫離文件流
4.相對定位不會改變元素的性質，塊元素還是塊元素，內聯元素還是內聯元素
5.相對定位的元素會提公升乙個層級
絕對定位
1.元素設定絕對定位以後，如果不設定偏移量，元素的位置不會發生變化
2.絕對定位的元素是相對於距離他最近的開啟了定位的祖先元素進行定位，如果所有的祖先元素都沒開啟定位，則相對於瀏覽器視窗進行定位。
3.絕對定位的元素會完全脫離文件流
4.絕對定位會改變元素的性質。內聯變塊，塊的高度和寬度都被內容撐開，並且不獨佔一行
5.絕對定位會使元素提公升乙個層級
固定定位
固定定位是一種特殊的絕對定位，它的特點大部分都和絕對定位一樣
不同的是，固定定位的元素永遠都是相對於瀏覽器視窗進行定位的。並且他不會隨滾動條滾動
ie6不支援固定定位
層級
定位元素 > 浮動元素 > 文件流中的元素
當元素開啟了定位以後，可以通過z-index來設定元素的層級
z-index值越高元素越優先顯示
如果z-index值一樣，或者都沒有z-index則優先顯示下邊的元素
父元素永遠不會蓋住子元素
偏移量當元素開啟了定位以後，可以通過偏移量來設定元素的位置
left
元素距離定位位置的左側距離
top元素距離定位位置的上邊距離
right
元素距離定位位置的右側距離
bottom
元素距離定位位置的底部距離
一般情況下，只使用兩個值即可定義乙個元素的位置。
H5中的布局標籤
h5中的布局標籤 1.html是具有語義化的語言,針對頁面的布局,有一類標籤代表各種意義的 布局盒子 2.所有的布局標籤都主要是用來構建頁面的內容區域，是雙標籤型別，預設顯示為塊狀元素 3.標籤 布局 盒子 4.html5新增的常用的布局標籤 頁面 區域頭部 頁面 區域底部 導航 文件中的章節，區段...
H5布局 彈性盒 flex
1.彈性盒 css3的一種新的布局方式，1.改變他所有子一級元素的排列方式 除了子一級的後代元素除外 2.在你給乙個元素設定display flex 的時候 彈性父級 設定了display flex 的元素 彈性子級 其所有的子級元素 3.在開啟彈性布局以後 a.會得到一條預設的主軸 預設方向為水平...
移動h5自適應布局
問題一，解析度resolution適配 不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。問題二，單位英吋畫素數ppi適配 使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。問題三，裝置畫素比例d...