H5前端基礎——佈局
阿新 • • 發佈：2019-02-13
浮動
使用float來設定元素浮動
可選值none
預設值，不浮動，元素在文件流中
left
元素向左浮動
right
元素向右浮動
特點1.元素浮動以後會完全脫離文件流
2.浮動以後元素會一直向父元素的最上方移動
3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動
4.如果浮動元素的上邊是一個塊元素，則浮動元素不會覆蓋塊元素
5.浮動元素不會超過他上邊的浮動的兄弟元素，最多一邊齊
6.浮動元素不會覆蓋文字，文字會自動環繞在浮動元素的周圍，可以通過浮動來實現文字環繞的效果
浮動以後元素的特點
元素浮動以後，會使其完全脫離文件流。
塊元素
塊元素脫離文件流以後
1.不會獨佔一行
2.寬度和高度都被內容撐開
內聯元素
內聯元素脫離文件流以後會變成塊元素
父元素在文件流中高度預設是被子元素撐開的，當子元素脫離文件流以後，將無法撐起父元素的高度，也就會導致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置將會上移，導致整個頁面的佈局混亂
方法一
開啟父元素的BFC或hasLayout
BFC
Block 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
元素距離定位位置的底部距離
一般情況下，只使用兩個值即可定義一個元素的位置。