歡迎使用Markdown編輯器
提示：文章寫完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
一、浮動(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í)
.center{
background-color: yellow;
margin: 0px auto;
float:right
}
這時(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)
.center{
background-color: yellow;
margin: 0px auto;
float:right;
clear:both;
2、 overflow:hidden; 溢出隱藏。
3、 在尾部添加一個(gè)div
<div id="box">
<div class="left">div1</div>
<div class="right">div2</div>
<div class="center">div3</div>
<div></div>
</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)
.div1{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: orange;
position:relative;
top:100px;
left:100px;
}
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)行定位
#box{
width: 600px;
height: 600px;
background-color: skyblue;
margin: 0 auto;
position: relative;
}
3. 固定定位 fixed
fixed 固定定位就比較好理解了，顧名思義，固定定位就是將一個(gè)元素固定在頁面當(dāng)中的某一個(gè)位置上，不管頁面滾動(dòng)條如何移動(dòng)，這個(gè)元素的位置都不會(huì)改變。
固定定位是根據(jù)瀏覽器可視窗口來進(jìn)行固定的。就相當(dāng)于頁面當(dāng)中出現(xiàn)的小廣告位置一樣。
.div1{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: orange;
position:fixed;
bottom: 200px;
right: 100px;
}
4. z-index屬性
定位元素還有一個(gè)z-index屬性，因?yàn)槲覀兊亩ㄎ辉匾呀?jīng)脫離了文檔流，那么當(dāng)有多個(gè)元素在同一個(gè)位置時(shí)，就需要用z-index屬性來設(shè)置堆疊的層次了。z-index屬性，誰的值大誰就在最上面。
.orange{
background-color: orange;
z-index: 1;
position: absolute;
left: 100px;
}
.yellow{
background-color:yellow;
z-index: 2;
position: absolute;
top: 100px;
left: 150px;
}
.skyblue{
background-color: skyblue;
z-index: 3;
position: absolute;
top: 200px;
left: 200px;
}
注意：未使用定位屬性的元素設(shè)置z-index是無效的哦。
三 、flex 彈性布局
彈性布局：在父級(jí)元素設(shè)置display:fkex;彈性布局屬性，可以使子元素彈性伸縮。
注意：設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。文章來源：http://www.zghlxwxcb.cn/news/detail-453961.html
任何一個(gè)被設(shè)置為彈性布局的容器會(huì)有兩條抽象的軸(X,Y軸)，彈性布局的容器的有以下屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-453961.html
-
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è)容器的高度。
到了這里，關(guān)于HTML三大布局方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
