前端（十二）

一佈局css

關於佈局的css目前學到的有浮動、相對定位，絕對定位、固定定位。關於佈局中水平垂直居中的需求在實際開發中很是常見，下邊就介紹一下關於居中那些事。

1.1讓div水平居中

方式一：使用 marin:0 auto;css樣式便可讓div水平居中，可是須要一個條件：當前div的寬度是一個固定值。

<div style="margin: 0 auto; background: crimson;width: 100px; height: 100px ;"></div>複製代碼

方式二：使用定位樣式，讓div水平居中。

<div style="position: absolute; left:50%; transform: translateX(-50%); background: crimson; width: 100px; height: 100px;"></div>複製代碼

1.2讓div垂直居中

只有一個方式，就是經過定位去實現垂直居中。

<div style="position: absolute; top:50%; transform: translateY(-50%); background: crimson; width: 100px; height: 100px;"></div>複製代碼

1.3讓div水平垂直居中

只有一個方式，就是經過定位去實現水平垂直居中。

<div style="position: absolute; top:50%; left: 50%; transform: translateY(-50%) translateY(-50%); background: crimson; width: 100px; height: 100px;"></div>複製代碼

1.4讓文字水平居中

經過text-align: center;屬性去實現文字水平居中

<div style=" width: 100px; height: 100px; border: 1px solid #ff0000;text-align: center; ">eeeeeeee</div>複製代碼

1.5讓文字垂直居中

單行文字，使用line-height 等於height的方式達到文字垂直居中：

<div style=" width: 100px; height: 100px; border: 1px solid #ff0000;line-height: 100px ">eeeeeeee</div>複製代碼

多行文字,須要使用div包裹，而後使用div的垂直居中的方式去實現文字的垂直居中。

<div style=" position: relative; width: 100px; height: 100px; border: 1px solid #ff0000; "> 
   <div style=" transform: translateY(-50%) ; position: absolute; top:50%; ">
        你好你好你好你好你好你好你好你好你好  
  </div> 
</div>複製代碼

1.6讓文字水平垂直居中

僅僅須要讓文字垂直居中，而後加上一個text-align : center；屬性便可讓文字水平垂直居中。

二css3新佈局方式

就目前所掌握的佈局方式，對於塊級元素的控制能力很不靈活，由於塊級默認獨佔一行。變成行內又無法設置寬高。浮動規則死板。定位脫離文檔流。CSS3在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強。

flex伸縮佈局

• 主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向，從左向右。

• 側軸：與主軸垂直的軸稱做側軸，默認是垂直方向，從上往下。

PS：主軸和側軸並非固定不變的，經過flex-direction能夠互換。

設置伸縮佈局的步驟

1. 指定一個盒子爲伸縮佈局： display: flex;
2. 設置 flex-direction 來改變水平仍是垂直，從左到右仍是從右到左，從上到下仍是從下到上。

flex-direction屬性講解： 

• row 水平方向（默認值）
• reverse-row 水平反轉
• column 垂直方向
• reverse-column 垂直反轉

感受有點抄襲android中的線性佈局orientation屬性，可是豐富了更多屬性。

justify-content：設置子元素在主軸上的對齊方式。

justify-content: 屬性講解：

• flex-start 從主軸的起點對齊（默認值）
• flex-end 從主軸的終點對齊
• center 沿主軸方向居中對齊
• space-around 在父盒子裏平分
• space-between 兩端對齊 平分

有點抄襲android中線性佈局gravity屬性，可是豐富了一些屬性。

align-items：設置子元素在側軸上的對齊方式。

align-items:屬性講解：

• flex-start 從側軸開始的方向對齊
• flex-end 從側軸結束的方向對齊
• baseline 基線 默認同flex-start
• center 中間對齊
• stretch 拉伸

伸縮佈局權重

伸縮佈局的子佈局可使用flex 來表示權重，相似android線性佈局的layout_weight。

經過伸縮佈局的學習，咱們又增長讓佈局水平或者垂直居中的方式：

display: flex; align-items: center ;justify-content: center; 複製代碼