box-size
允許您以特定的方式定義匹配某個區域的特定元素。
content-box(默認):寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
border-box:為元素設定的寬度和高度決定了元素的邊框盒。
inherit:規定應從父元素繼承 box-sizing 屬性的值。
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
-webkit-tap-highlight-color
當用戶點擊iOS的Safari浏覽器中的鏈接或JavaScript的可點擊的元素時,覆蓋顯示的高亮顏色。
color:顏色值(默認inherit)
transparent:透明值
-webkit-font-smoothing
使頁面上的字體抗鋸齒,使用後字體看起來會更清晰舒服。
none:對低像素的文本比較好
subpixel-antialiased:默認值
antialiased:抗鋸齒很好
解決字體圖標鋸齒問題
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
多欄多列布局
父元素:
display: -webkit-flex;
-webkit-flex-flow: row;
-webkit-align-items: stretch;
-webkit-justify-content:space-between;
/*IE10還不支持*/
display: -ms-flex;
-ms-flex-flow: row wrap;
-ms-align-items: stretch;
-ms-justify-content:space-between;
display: flex;
flex-flow: row;
align-items: stretch;
justify-content:space-between;
flex-flow:row 伸縮項目排列由左向右排列
column 伸縮項目排列由上至下排列
align-items:flex-start 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
center 彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline 如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。
stretch 如果指定側軸大小的屬性值為'auto',則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。
justify-content:flex-start (默認值)項目位於容器的開頭。
flex-end 項目位於容器的結尾。
center 項目位於容器的中心。
space-between 項目位於各行之間留有空白的容器內。
space-around 項目位於各行之前、之間、之後都留有空白的容器內。
initial 設置該屬性為它的默認值。
inherit 從父元素繼承該屬性。
子元素
flex
相對於同一容器其他靈活的項目,規定項目的長度。
語法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex:flex-grow 一個數字,規定項目將相對於其他靈活的項目進行擴展的量。
flex-shrink 一個數字,規定項目將相對於其他靈活的項目進行收縮的量。
flex-basis 項目的長度。合法值:"auto"、"inherit" 或一個後跟 "%"、"px"、"em" 或任何其他長度單位的數字。
auto 與 1 1 auto 相同。
none 與 0 0 auto 相同。
initial 設置該屬性為它的默認值,即為 0 1 auto。
inherit 從父元素繼承該屬性
-webkit-flex:1;
-moz-flex:1;
flex:1;
text-transform
控制文本的大小寫。
none 默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
white-space
屬性設置如何處理元素內的空白。
normal 默認。空白會被浏覽器忽略。
pre 空白會被浏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合並空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。