關於前端position屬性和display屬性，這篇文章已足夠

在我初學前端的時候，對position和display，尤爲是flex特別的混亂，故總結一套，但願能幫助到有須要的同窗。這裏我想特別告誡一下移動端學習web的同窗，例如position:relative，web端叫相對定位，意思是這個屬性加在一個元素上，這個元素就使用相對定位的規則在ui上去渲染；而不是和移動端那樣設置了相對佈局，子佈局裏都按相對佈局去排列，和移動前端仍是有很大的差異的，只要記住相對定位和相對佈局是有區別的。
css

1、關於position屬性

1.一、position:static

默認值，沒有定位，置頂元素使用正常的佈局行爲，即文檔常規流中當前的佈局位置，此時top、bottom、left、right屬性無效。
前端

例：我在外層黃色div往裏放了1個紅色和藍色div標籤，以下（固然position不寫默認就是static）。vue

1.二、position:relative

相對定位，不脫離文檔流。參考自身靜態位置，經過top、bottom、left、right定位，而且能夠經過z-index進行層次分級
git

例：我在藍色div裏放置了一個紅色div；紅色div的css以下，github

.box1 {
  width: 400px;
  height: 300px;
  background: red;
  position: relative;
  left: 50%;
}
複製代碼

最終ui以下圖，能夠看到紅色div確實離左邊的距離爲藍色的一半 web

1.三、position:absolute

絕對定位，脫離文檔流。經過top、bottom、left、right、定位。定位的起始位置由最近不爲static的父元素。不然爲body的座標原點。能夠經過z-index進行層次分級
瀏覽器

例：粉色div設置爲position:static。在粉色div放入一個紅色div設置爲position:absolute,使用了left:10%。最終以下圖，能夠看到紅色div不是以粉色區域定位，而是往上找到黑色區域定位。markdown

假如把粉色div改爲position:absolute或者是position:relative的話最終以下：oop

1.四、position:fixed

固定定位，脫離文檔。相對於瀏覽器窗口進行定位。怎麼拖動滾動條都不會發生變化
佈局

例：紅色div設置position:fixed。

1.五、position:sticky

粘性定位，他是relative和fixed的結合。立即將要畫出屏幕時他就是fixed，不然和relative無異。使用sticky要搭配top、bottom、left、right來使用，不然不生效。例如寫上top:0%，意思就是在top:0%這個臨界點時會在relative和fixed之間切換

例：給紅色div設置position:sticky，top:0%

2、關於display屬性

2.一、display:block

塊級元素:

老是以一個塊的形式表現出來，佔領一整行。若干塊級元素會從上到下依次排列(使用float屬性除外)
能夠設置寬度、高度，各個方向margin及padding
當元素寬度width沒有設置時，他的寬度充滿容器
塊級元素能夠嵌套其餘塊級元素及行內元素
塊級元素的display默認爲block
塊級元素有：div、h一、h二、p等等

例：頁面放了4個塊級元素。對第3個紅色div,寫上了float:right後。就如同上面的第一條說的那樣打亂了它的結構不會依次排列了

2.二、display:inline

行內元素：

它不會單獨佔據一行，只佔據自身高度和寬度所在空間，即元素的寬高是由其文本內容撐開。若干行內元素從左到右(行內元素能夠共處一行)，從上到下排列
行內元素不能設置寬高
行內元素只能設置左右margin和padding，不能設置上下margin和padding
行內元素使用float屬性後，設置寬高生效
行內元素有：title、span、a、strong

2.四、display:inline-block

行內塊級元素：

結合了inline和block特性，既能設置寬高也不會換行
行內塊級元素起始就是行內元素設置寬高能夠生效

3、比較特殊的display:flex

彈性元素：這裏雖然是在display裏，可是我我的感受他更像是position屬性，準確點更像是移動端的佈局，由於position準確的說是定位方式。設爲flex佈局後，子元素的float，clear和vertical-align屬性將失效。簡單說設置爲display:flex後，此元素即爲彈性佈局容器，接下來是說此容器的屬性

3.一、容器屬性：flex-direction

row(默認值)：主軸爲水平方向，起點在左端
row-reverse：主軸爲水平方向，起點在右端
column：主軸爲豎直方向，起點在上沿
column-reverse：主軸爲豎直方向，起點在下沿

3.二、容器屬性：flex-wrap

nowrap(默認值)：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方

3.三、容器屬性：justify-content

flex-start(默認值)：左對齊
flex-end：右對齊
center: 橫軸方向居中
space-between：兩端對齊，項目之間的間隔都相等
space-around：每一個item之間間隔相等，因此2個item之間的間隔比邊緣item到邊框的距離大一倍

3.四、容器屬性：align-items(單根軸線)

flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center: 交叉軸的中點對齊
baseline：項目的第一行文字基線對齊
stretch(默認值)：若是未設置高度或爲auto,將佔滿整個容器
注意點：在彈性佈局下，子元素未設置高度，內容文案align-items失效，不會橫向居中。得用text-align='center'才生效

3.五、容器屬性：align-content(多根軸線)

stretch(默認值)：軸線佔滿整個交叉軸
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
center: 交叉軸的中點對齊
space-between：與交叉軸2端對齊，軸線之間間隔平均分佈
space-around：每根軸線2側間距都相等，因此軸線間的間隔比軸線到邊緣的間隔大一倍

3.六、彈性佈局子元素的單獨屬性（注意：子元素屬性。上面的是容器屬性）

3.6.一、align-self

auto(默認值)：元素繼承父容器的align-items屬性，若是沒有父容器則爲stretch
stretch：元素被拉伸以適應容器，若是指定縱軸大小的屬性爲auto，則其值會使項目的邊距盒尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制
center：元素位於容器中心，彈性佈局子元素在縱軸上居中放置
flex-start：彈性佈局子元素在縱軸上的起始位置(頂部)
flex-end：彈性佈局子元素在縱軸上的終止位置(底部)
baseline：彈性佈局子元素與基線對齊

3.6.二、Order

項目的排列順序，數值越小，排列越前。默認爲0

3.6.三、flex、flex-grow、flex-shrink

這幾個屬性呢有點相似移動前端的線性佈局：

flex和flex-grow都是使元素放大，但放大的計算公式不一樣
flex-grow：剩餘空間爲彈性佈局剩餘寬度，而後根據比例分配
flex：剩餘空間爲彈性佈局剩餘寬度與進行flex的子元素寬度之和。而後根據比例分配
flex-shrink：這個屬性和上面2個相似，只不過數值越大，反而縮小的越大

4、再加上個本身總結的一個簡單的後臺管理

但願能幫助到有須要的同窗
github地址：https://github.com/lihangleo2/easy-vue-element-admin