HTML三大布局方式
歡迎使用Markdown編輯器
提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
文章目錄
- 歡迎使用Markdown編輯器
- 一、浮動布局 (float布局)
- 二、position 定位布局
- 1. 相對定位
- 2.絕對定位 absolute
- 三 、flex 彈性布局
一、浮動布局 (float布局)
使用浮動來完成左中右三欄布局
float:left----左浮動
float:right----右浮動
注意：使用float浮動時，margin:0px auto;使塊元素居中將會失效。
代碼示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 700px;background-color: skyblue;}#box>div{width: 200px;height: 200px;line-height: 200px;text-align: center;}.left{background-color: orange;float: left;}.right{background-color: deeppink;float: right;}.center{background-color: yellow;margin: 0px auto;}</style></head><body><div id="box"><div class="left">div1</div><div class="right">div2</div><div class="center">div3</div></div></body> </html>
當我們給div3也加上一個浮動屬性時
這時我們可以看到，整個盒子box的天藍色背景色會消失，這是為什么呢？
注意：float浮動屬性會使元素脫離文檔流。所以當我們把一個父級元素下的子元素全部設置float浮動屬性時，如果父級元素沒有設置固定高度，則會造成父級元素塌陷。
清除浮動的三種方式。
1、 clear:both; 清楚兩邊浮動
2、 overflow:hidden; 溢出隱藏。
3、 在尾部添加一個div
二、position 定位布局
注意：給元素設置了定位屬性，也會使這個元素脫離文檔流。
定位有四個屬性，分別是 top 上 bottom下 left 左 right 右。
1. 相對定位
position:relative; 相對定位是根據自身在頁面中的位置來進行上下左右移動定位的。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 600px;height: 600px;background-color: skyblue;}.div1{width: 200px;height: 200px;line-height: 200px;text-align: center;background-color: orange;}</style></head><body><div id="box"><div class="div1">div1</div></div></body> </html>
設置了相對定位后，div1就會根據自身現在所在的位置移動
2.絕對定位 absolute
關于絕對定位有個通用的說法 “子絕父相”。即給元素設置了絕對定位，就要在父級元素上設置一個相對定位，如果父級元素上找不到相對定位，那這個元素就會根據瀏覽器窗口的位置來進行定位。
父級元素不設置相對定位，代碼和效果如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 600px;height: 600px;background-color: skyblue;margin: 0 auto;}.div1{width: 200px;height: 200px;line-height: 200px;text-align: center;background-color: orange;position:absolute;top:100px;left:100px;} </style></head><body><div id="box"><div class="div1">div1</div></div> </body> </html>
我們再給父級元素一個相對定位，則div1就會根據這個父級盒子來進行定位
3. 固定定位 fixed
fixed 固定定位就比較好理解了，顧名思義，固定定位就是將一個元素固定在頁面當中的某一個位置上，不管頁面滾動條如何移動，這個元素的位置都不會改變。
固定定位是根據瀏覽器可視窗口來進行固定的。就相當于頁面當中出現的小廣告位置一樣。
4. z-index屬性
定位元素還有一個z-index屬性，因為我們的定位元素已經脫離了文檔流，那么當有多個元素在同一個位置時，就需要用z-index屬性來設置堆疊的層次了。z-index屬性，誰的值大誰就在最上面。
注意：未使用定位屬性的元素設置z-index是無效的哦。
三 、flex 彈性布局
彈性布局：在父級元素設置display:fkex;彈性布局屬性，可以使子元素彈性伸縮。
注意：設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
任何一個被設置為彈性布局的容器會有兩條抽象的軸(X,Y軸)，彈性布局的容器的有以下屬性
- flex-direction 決定項目主軸(X軸)的排列方向
row 主軸方向從左到右排列,主軸為橫向軸
row-reverse 主軸方向從右到左排列
column 主軸為縱向縱
column-reverse 交叉軸上從下往上排列
flex-wrap 所有項目如何被包裹
nowarp 不換行（列），項目的寬高會變化
wrap 換行（列），溢出會順序換行
wrap-reverse 反向排列
flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
justify-content 屬性定義了項目在主軸(X軸)上的對齊方式。
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items 屬性定義項目在交叉軸(Y軸)上如何對齊
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
總結
以上是生活随笔為你收集整理的HTML三大布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言数据结构校园导游系统,校园导游系统
- 下一篇： 腾讯微博新浪微博相互转发工具（Green