1)靜態定位 css
position:static(默認)html
2)相對定位瀏覽器
position:relative(要配合top、bottom、left、right等屬性來使用)ide
3)絕對定位佈局
position:absolute測試
<html>
元素或其最近的「positioned」祖先元素,一個「positioned」元素是指 position 值不是 static
的元素。4)固定定位字體
position:fixed(要配合top、bottom、left、right等屬性來使用)flex
5)堆疊順序spa
z-indexcode
幾種定位的區別:https://baijiahao.baidu.com/s?id=1631432397252663686&wfr=spider&for=pc
http://zh.learnlayout.com/position.html
屬性 | 備註 | 值 |
flex-direction | 指定主軸的方向 | row/column,默認是row |
flex-wrap | 換行 | wrap/wrap-reverse,flex-direction和flex-wrap能夠合併爲flex-flow: row wrap; |
flex | 三個屬性的縮寫,flex-grow/flex-shrink /flex-basis | flex:0 1 auto(默認) |
align-items | 控制在交叉軸的位置 | stretch(默認)/center/flex-start/flex-end |
justify-content | 控制在主軸上的位置 | flex-start(默認)/flex-end/center/space-around(均勻分佈)/space-between(不會在兩端留下任何空間) |
order | flex項排序 | 數字,默認0,越大越後面 |
3.1.1 流動模型
兩個典型的特徵:
3.1.2 浮動模型
任何元素默認不能浮動,使用css定義浮動
div{float:left;} div{float:right;}
3.1.3 層模型
三種形式:
3.1.4 z-index
利用該屬性,能夠改變元素相互覆蓋的順序
3.2.1 float多個特性
3.2.2 清除浮動
3.3.1 一列布局
固定寬和高,設置margin:0 auto來水平居中
3.3.2 二列布局
最多見的就是使用float來實現,但會出現文本環繞等效果,須要及時清除浮動
3.3.3 三列布局
兩側定寬中間自適應
首先設置父級元素的寬度,能夠左左右設置浮動。而後中間設置margin調整間距。 也能夠都設置成左浮動,設置margin,調整間距。一樣注意清除浮動的影響!
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
.main{ width: 100%; background: red; overflow: hidden; } .left{ background: yellow; float: left; width: 100px; } .middle{ background: rosybrown; float: left; width: cacl(100%-200px); } .right{ background: green; float: right; width: 100px%; }
或者爲父級元素設置relative屬性,再爲子元素設置absolute屬性,再分別定位,調整間距
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> </div> </div>
<style> p{margin: 0;} .parent{position: relative;height:40px;} .left,.right,.center{position: absolute;} .left{left: 0;width:100px;} .right{right: 0;width: 100px;} .center{left: 120px; right: 120px;} </style>
3.3.4 混合佈局
在一列布局的基礎上,保留top和foot部分,將中間的main部分改形成兩列或三列布局,小的模塊能夠再逐級同理劃分。
<div class="top"></div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div>
.top{ height: 100px; background: teal; } .footer{ height: 100px; background: wheat; } .main{ width: 100%; background: red; overflow: hidden; } .left{ background: yellow; float: left; width: 50%; } .right{ background: green; float: right; width: 50%; }
3.4.1 水平居中
(1)行內元素的水平居中
若是被設置元素爲文本、圖片等行內元素時,在父元素中設置text-align:center實現行內元素水平居中,將子元素的display設置爲inline-block,使子元素變成行內元素
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div> <style> .parent{text-align: center;} .child{display: inline-block;} </style>
(2)塊狀元素的水平居中(定寬)
當被設置元素爲定寬塊級元素時用 text-align:center 就不起做用了。能夠經過設置「左右margin」值爲「auto」來實現居中的。
<div class="parent" style="background-color: gray;"> <div class="child" style="background-color: lightblue;">DEMO</div> </div> .child{ width: 200px; margin: 0 auto; }
(3)塊狀元素的水平居中(不定定寬)
在實際工做中咱們會遇到須要爲「不定寬度的塊級元素」設置居中,好比網頁上的分頁導航,由於分頁的數量是不肯定的,因此咱們不能經過設置寬度來限制它的彈性。
能夠直接給不定寬的塊級元素設置text-align:center來實現,也能夠給父元素加text-align:center 來實現居中效果。
當不定寬塊級元素的寬度不要佔一行時,能夠設置display 爲 inline 類型或inline-block(設置爲 行內元素 顯示或行內塊元素)
<div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> .container{text-align:center;background: beige} .container ul{list-style:none;margin:0;padding:0;display:inline-block;} .container li{margin-right:8px;display:inline-block;}
3.4.2 垂直居中
和水平居中同樣,這裏要講垂直居中,首先設定兩個條件即父元素是盒子容器且高度已經設定
場景1:子元素是行內元素,高度是由其內容撐開的
這種狀況下,須要經過設定父元素的line-height爲其高度來使得子元素垂直居中
<div class="wrap line-height"> <span class="span">111111</span> </div> .wrap{ width:200px ; height: 300px; line-height: 300px; border: 2px solid #ccc; } .span{ background: red; }
場景2:子元素是塊級元素可是子元素高度沒有設定
在這種狀況下其實是不知道子元素的高度的,沒法經過計算獲得padding或margin來調整,可是仍是存在一些解法。
經過給父元素設定display:table-cell;vertical-align:middle來解決
<div class="wrap"> <div class="non-height ">11111</div> </div> .wrap{ width:200px ; height: 300px; border: 2px solid #ccc; display: table-cell; vertical-align: middle; } .non-height{ background: green; }
場景3:子元素是塊級元素且高度已經設定
計算子元素的margin-top或margin-bottom,計算方法爲父(元素高度-子元素高度)/2
<div class="wrap "> <div class="div1">111111</div> </div> .wrap{ width:200px ; height: 300px; border: 2px solid #ccc; } .div1{ width:100px ; height: 100px; margin-top: 100px; background: darkblue; }
3.4.3 水平垂直居中
(1)水平對齊+行高
text-align + line-height實現單行文本水平垂直居中
<style> .test{ text-align: center; line-height: 100px; } </style> <div class="test" style="background-color: lightblue;width: 200px;">測試文字</div>
(2)水平+垂直對齊
<style> .parent{ display: table-cell; text-align: center; vertical-align: middle; } .child{ display: inline-block; } </style>
<div class="parent" style=" width:200px; height:100px;"> <div class="child" style="">測試文字</div> </div>
<div class="parent" style="background-color: gray; width:200px; "> <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"> </div>
<style> .parent{ text-align: center; line-height: 100px; font-size: 0; } .child{ vertical-align: middle; } </style>
(3)相對+絕對定位
使用absolute,利用絕對定位元素的盒模型特性,在偏移屬性爲肯定值的基礎上,設置margin:auto
<style> .parent{ position: relative; } .child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 50px; width: 80px; margin: auto; } </style>
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">測試文字</div> </div>