（1）lumn-count: 3; 分欄的數量
（2） column-gap: 50px; 欄目和欄目之間的間距
（3）column-width: 500px; 欄目的寬度
（4）column-rule: 5px dotted yellow; 欄目和欄目之間的邊線（邊框一樣）
（5） column-span: all; 標題橫跨的列數（1 all）
【注】：count和width只需設定乙個
彈性盒子是css3的一種新布局模式，是一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
1、彈性盒子的組成：
彈性容器、彈性子元素
彈性容器內包含了乙個或多個彈性子元素。
2、 彈性容器的設定：
display：flex | inline-flex
【注意】： 彈性容器外及其子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性盒內布局
① 採用flex布局的元素稱為flex容器，其子元素自動成為容器成員，稱為flex專案
② 容器中預設存在兩根軸，主軸和交叉軸
③ 預設是主軸排列
（1）flex-direction 屬性：定義專案的排序方向
可選值：
①row 預設值，主軸為水平軸，左端為起點
②row-reverse 主軸為水平軸，右端為起點
③column 主軸為垂直軸，上端為起點
④column-reverse 主軸為垂直軸，下端為起點
（2）justify-content屬性：定義專案在主軸上的對齊方式
可選值：
①flex-start 預設值，左對齊
②flex-end 右對齊
③center 居中
④space-between 兩端對齊，專案之間間隔相等
⑤space-around 每個個專案兩側間隔相等。
⑥space-evenly 每兩個專案之間間隔相等
（3）align-items屬性：定義專案在交叉軸上對齊方式
可選值：
①flex-start 交叉軸起點對齊
②flex-end 交叉軸終點對齊
③center 交叉軸中點對齊
④baseline 專案第一行文字的基線對齊
⑤stretch 預設值，如果專案未設定高，將佔滿整個容器
（4）flex-wrap屬性：定義專案的換行
可選值：
①nowrap 預設值，不換行
②wrap 換行，第一行在下方
③wrap-reverse 換行，第一行在上方
（1）order屬性：定義專案的排序，order值越大排列越靠後，預設值為0
（2）flex-grow屬性：定義專案的放大比例，預設為0，即若存在剩餘空間，也不放大
可選值：number
【注意】：若專案flex-grow值都為1，則平分剩餘空間，若其中乙個為2，其他為1，則前者所佔剩餘空間比其他多一倍
（3）flex-shrink屬性：定義專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
可選值：number
【注意】：如果專案flex-shrink都為1，空間不足時，等比例縮小。如果乙個為0，其餘為1，空間不足時，前者不縮小，負值對改屬性無效
（4）align-self屬性：定義容器內被選中專案的對齊方式，和align-item屬性作用相同
可選值：auto 預設值，繼承父容器的align-item屬性，如果父容器沒有，則為stretch
①flex-start 交叉軸起點對齊
②flex-end 交叉軸終點對齊
③center 交叉軸中點對齊
④baseline 專案第一行文字的基線對齊
⑤stretch 預設值，如果專案未設定高，將佔滿整個容器
（5）flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。 一般使用flex:1; 設定子元素平分容器的大小
（6）flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
預設值：0 1 auto
flex-basis: 設定彈性盒子的初始大小
calc(數學表示式)函式用於動態計算長度值
語法 calc(表示式)； eg. calc(100px - 10px);
【注意】：運算子前後保留乙個空格。 表示式支援+，-，*，/ 遵循標準的數**算優先順序規則
css 預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 css 增加了一些程式設計的特性，將 css 作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。
外掛程式: easy less
優點：
1.結構清晰，便於擴充套件，適應性強，可讀性強
2.可以方便地遮蔽瀏覽器私有語法差異
3.可以輕鬆實現多重繼承
4.完全相容 css **
5.減少重複的機械勞動，便於維護
1、注釋
（1）// 注釋1 單行注釋，不可以被編譯到css裡
（2）/注釋2/ 標準注釋，可以被編譯到css裡
2、匯入樣式
（1）語法 @import 「路徑」;
（2）匯入.css檔案 ：仍然作為乙個外部匯入檔案，不合併 不可以省略副檔名
（3）匯入.less檔案 ：匯入檔案的內容 會與當前檔案發生合併 可以省略副檔名
（4）引入的檔案內容與當前檔案內容同時作用於頁面
3、less語法
（1）變數
@cl:pink; 定義變數
.box2
.box4
} }
} .right
}
（4）運算 ：可以使用算術運算子（+，-，*，/）
.public前端學習日記10
新增模組 1 選擇器模組 2 邊框和背景 3 使用者介面 4 漸變 5 動畫 6 2d和3d 瀏覽器私有字首 瀏覽器廠商使用一種方式提前把屬性納為自己的標準,按時該屬性還沒有成為標準 字首 ie ms ms border radius chrome和safari webkit webkit bord...
前端學習日記11
transition transition propertype transition duration transiton timing function transition delay 過渡的復合屬性 其中，過渡的持續時間不可以省略 參與過渡的屬性省略 預設是all 過渡的速度變換曲線省略 預...
前端學習日記05
讓標籤相對於某個元素重新定義乙個新的位置，可以相對於元素本身的位置，或者相對于父元素，甚至相對於瀏覽器視窗進行定位 屬性 position 值 1 relative 相對定位 特點 相對於元素本身的位置 不脫離文件流,仍然佔位 使用場景 微調元素位置 2 absolute 絕對定位 相對於離他最近的...