移動開發day2_css預處理器_flex佈局

 

css預處理器

一種技術，能夠提升編寫css代碼的技術而已。

有3種預處理器常見

1. less

2. sass

3. stylues

less使用流程

1. 編寫符合less語法的less文件

2. 使用工具 將less編譯成 css

3. 在網頁當中 引用 編譯好的 css文件

     <link rel="stylesheet" href="./css/01.css">

注意

1. 瀏覽器根本就不認識 什麼less sass。。

2. 瀏覽器 只認識 熟悉 css文件

less的語法

less語法是徹底兼容css語法的

在less文件中，直接寫入css代碼是正確的語法。

 

less全部的語法 不止這一些 可是 上課講解的足夠使用

 

變量語法

1. 電商的網站 不少頁面

2. 主題顏色 天貓 京東 都是紅色 美團 綠色 蘇寧 黃色 惟品會 粉紅色

3. 讓 把天貓的主題顏色紅色 改爲 藍色！！！

   1. 要改的標籤不少

   2. 出錯

   3. 技術含量

   4. 領導罵你

@color: green;
header {
  background-color:@color;
}    
main {  
  background-color: @color;
}
footer {
  background-color: @color;
}

less語法

 

嵌套

div{
  background-color: red;
  >p{
    color: yellow;
  
  }
  a{
    background-color: pink;
  }
  .redCls{
    background-color: red;
  }
  /* 僞元素的冒號前面 加一個符號 &  */
  &:before{
    content: "南京路";
  }
}  

less嵌套

 

運算

body {
  width: 777px;
  /* 寬度 = 寬度的一半  */
  /*  height: 388.5px; */
  /* 除法 */
  height: 777px/2;
  /* 乘法 */
  font-size: 10px * 2;
  /* 加法 */

  /* 
  運算符前面不能加空格
  margin-left: 50px +7; 
  */
  margin-left: 50px+7;

  /* 減法 */
  margin-right: 50px-8;
}

運算

 

flex佈局

flex佈局 = flex盒子 = 伸縮佈局 = 伸縮盒子 = 彈性佈局 = 彈性盒子

就是一種新一點的佈局技術

傳統佈局 和 flex佈局的比較

傳統佈局 大量的使用 定位 浮動 左右的margin 。。。

傳統佈局有哪些特色

1. 兼容性好

2. 使用比較繁瑣

flex佈局的特色

1. 兼容性差一點，主要用在移動端上

2. 使用簡單方便

 

 

父項的屬性

5個屬性

設置主軸的方向

在flex佈局中，一直是存在兩個軸

主軸

默認狀況下 主軸的方向 = x軸 從左到右

側軸

默認狀況下 側軸的方向 = y 軸 從上到下

 

 

 

1. 設置主軸的方向 flex-direction

   1. row 左 到 右

   2. column 上到下

   3. 。。。。

2. 設置 主軸 子項的對齊方式 justify-content

   1. flex-start

   2. flex-end

   3. center

   4. space-between

   5. space-around

3. 設置 側軸 子項的對齊方式 -單行 align-items

   1. flex-start

   2. flex-end

   3. center

4. 設置 側軸 子項的對齊方式 -多行 align-content

   1. flex-start

   2. flex-end

   3. center

   4. space-between

   5. space-around

5. 換行 屬性 flex-wrap

   1. wrap;

子項的屬性

1. 設置子項 本身 在側軸上的對齊方式 align-self

   1. flex-start

   2. flex-end

   3. center

2. 設置子項 本身 在主軸上的排列順序 order

   1. 默認值 都是 0

   2. 值越小越靠前

3. 設置子項 佔父項的寬度的比例 flex

   1. 按照比例來添加對應的值

 

 

 

補充

結構僞類選擇器中選擇前幾個的公式

      a:nth-child(-n+3){
        border-bottom: 1px solid #fff;
        background-color: red;
     }

結構僞類選擇器中選擇後幾個的公式

      a:nth-last-child(-n+3){
        border-bottom: 1px solid #fff;
        background-color: red;
     }

字體顏色繼承

    color: inherit; 

當前的顏色currentColor

邊框顏色等於字體的顏色

border: 1px solid currentColor

 

注意

1. flex佈局是能夠和傳統佈局一塊兒使用

   1. 當代碼量同樣的狀況下 優先使用flex

   2. 某個效果，那個代碼容易實現，就使用那個代碼就能夠了

2. 某個佈局效果 用什麼樣的技術實現得比較快 就使用哪一個技術