HTML三大布局方式
歡迎使用Markdown編輯器
提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
文章目錄
- 歡迎使用Markdown編輯器
- 一、浮動(dòng)布局 (float布局)
- 二、position 定位布局
- 1. 相對定位
- 2.絕對定位 absolute
- 三 、flex 彈性布局
一、浮動(dòng)布局 (float布局)
使用浮動(dòng)來完成左中右三欄布局
float:left----左浮動(dòng)
float:right----右浮動(dòng)
注意：使用float浮動(dòng)時(shí)，margin:0px auto;使塊元素居中將會(huì)失效。
代碼示例
<!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>
當(dāng)我們給div3也加上一個(gè)浮動(dòng)屬性時(shí)
這時(shí)我們可以看到，整個(gè)盒子box的天藍(lán)色背景色會(huì)消失，這是為什么呢？
注意：float浮動(dòng)屬性會(huì)使元素脫離文檔流。所以當(dāng)我們把一個(gè)父級(jí)元素下的子元素全部設(shè)置float浮動(dòng)屬性時(shí)，如果父級(jí)元素沒有設(shè)置固定高度，則會(huì)造成父級(jí)元素塌陷。
清除浮動(dòng)的三種方式。
1、 clear:both; 清楚兩邊浮動(dòng)
2、 overflow:hidden; 溢出隱藏。
3、 在尾部添加一個(gè)div
二、position 定位布局
注意：給元素設(shè)置了定位屬性，也會(huì)使這個(gè)元素脫離文檔流。
定位有四個(gè)屬性，分別是 top 上 bottom下 left 左 right 右。
1. 相對定位
position:relative; 相對定位是根據(jù)自身在頁面中的位置來進(jìn)行上下左右移動(dòng)定位的。
<!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>
設(shè)置了相對定位后，div1就會(huì)根據(jù)自身現(xiàn)在所在的位置移動(dòng)
2.絕對定位 absolute
關(guān)于絕對定位有個(gè)通用的說法 “子絕父相”。即給元素設(shè)置了絕對定位，就要在父級(jí)元素上設(shè)置一個(gè)相對定位，如果父級(jí)元素上找不到相對定位，那這個(gè)元素就會(huì)根據(jù)瀏覽器窗口的位置來進(jìn)行定位。
父級(jí)元素不設(shè)置相對定位，代碼和效果如下
<!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>
我們再給父級(jí)元素一個(gè)相對定位，則div1就會(huì)根據(jù)這個(gè)父級(jí)盒子來進(jìn)行定位
3. 固定定位 fixed
fixed 固定定位就比較好理解了，顧名思義，固定定位就是將一個(gè)元素固定在頁面當(dāng)中的某一個(gè)位置上，不管頁面滾動(dòng)條如何移動(dòng)，這個(gè)元素的位置都不會(huì)改變。
固定定位是根據(jù)瀏覽器可視窗口來進(jìn)行固定的。就相當(dāng)于頁面當(dāng)中出現(xiàn)的小廣告位置一樣。
4. z-index屬性
定位元素還有一個(gè)z-index屬性，因?yàn)槲覀兊亩ㄎ辉匾呀?jīng)脫離了文檔流，那么當(dāng)有多個(gè)元素在同一個(gè)位置時(shí)，就需要用z-index屬性來設(shè)置堆疊的層次了。z-index屬性，誰的值大誰就在最上面。
注意：未使用定位屬性的元素設(shè)置z-index是無效的哦。
三 、flex 彈性布局
彈性布局：在父級(jí)元素設(shè)置display:fkex;彈性布局屬性，可以使子元素彈性伸縮。
注意：設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
任何一個(gè)被設(shè)置為彈性布局的容器會(huì)有兩條抽象的軸(X,Y軸)，彈性布局的容器的有以下屬性
- flex-direction 決定項(xiàng)目主軸(X軸)的排列方向
row 主軸方向從左到右排列,主軸為橫向軸
row-reverse 主軸方向從右到左排列
column 主軸為縱向縱
column-reverse 交叉軸上從下往上排列
flex-wrap 所有項(xiàng)目如何被包裹
nowarp 不換行（列），項(xiàng)目的寬高會(huì)變化
wrap 換行（列），溢出會(huì)順序換行
wrap-reverse 反向排列
flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap
justify-content 屬性定義了項(xiàng)目在主軸(X軸)上的對齊方式。
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-items 屬性定義項(xiàng)目在交叉軸(Y軸)上如何對齊
flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊。
center：交叉軸的中點(diǎn)對齊。
baseline: 項(xiàng)目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
總結(jié)
以上是生活随笔為你收集整理的HTML三大布局方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言数据结构校园导游系统,校园导游系统
- 下一篇： 使用 ffmpeg 帮助制作 ppt 视