<!-- -  CSS--><strong></strong> 標簽選擇器 / 類型選擇器class  類選擇器  以英文句號（.）開頭ID  ID選擇器  以（#）開頭的繼承權值僅為0.1，標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的代碼：p{color:red;} <!-- 權值為1 -->p span{color:green;} <!-- 權值為1+1=2 -->.warning{color:white;} <!-- 權值為10 -->p span.warning{color:purple;} <!-- 權值為1+1+10=12 -->#footer .note p{color:yellow;} <!-- 權值為100+10+1=111 -->.xxx:after{content: ''; display: block; clear: both;}<!-- 清除浮動 -->內聯元素塊級元素overflow: auto;  <!-- 高度自由 -->overflow：hidden；  <!-- 超過自身的盒子都隱藏 -->display: inline-block;  <!-- 控制塊級元素在一行 -->body{min-width:1280px;}   <!-- 設置屏幕最小寬度限制 --><!-- 效果延時 -->-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;<!-- 柵格化 盒子定-->-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;<!-- flex容器屬性 --><!-- 決定主軸排列方向 -->flex-direction: row | row-reverse | column | column-reverse;<!-- 是否換行 -->flex-wrap: nowrap | wrap | wrap-reverse;<!-- 以上兩點集合 -->flex-flow: <flex-direction> || <flex-wrap>;<!-- Y軸上的對齊方式。 -->justify-content: flex-start | flex-end | center | space-between | space-around;<!-- X軸上的對齊方式 -->align-items: flex-start | flex-end | center | baseline | stretch;<!-- X,Y軸上的對齊方式 -->align-content: flex-start | flex-end | center | space-between | space-around | stretch;<!-- flex項目的屬性 --><!-- 排列順序:數值越小，排列越靠前，默認為0 -->order: <integer>;<!-- 放大比例:默認為0，即如果存在剩余空間，也不放大 -->flex-grow: <number>;<!-- 縮小比例:默認為1，即如果空間不足，該項目將縮小。 -->flex-shrink: <number>;<!-- 屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。 -->flex-basis: <length> | auto;<!-- 默認值為0 1 auto。后兩個屬性可選，兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)-->flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]<!-- 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。 -->align-self: auto | flex-start | flex-end | center | baseline | stretch;<!-- 調試工具 -->火狐控制臺(Ctrl+Shift+K)