CSS相關的複習記錄-持續更新

一：盒模型

　　自內向外  content,padding,border,margin.   content表明 width; height.

　　W3C默認: box-sizing： content-box .  IE 默認： box-sizing: border-box

二：居中相關

　　行內元素能夠用 text-align: center; 塊級元素可使用 margin: 0 auto;

　　水平居中：

　　position:absolute +left:50%+ transform:translateX(-50%)

　　display:flex + justify-content: center

　　垂直居中：

　　設置line-height 等於height, 不能寫100%

　　position：absolute +top:50%+ transform:translateY(-50%)

　　display:flex + align-items: center

三：比較容易被忽略的css樣式

　　css禁用鼠標事件：pointer-events: none; 

　　css禁止用戶選擇： user-select: none; （可加各個內核渲染器識別）

　　隔行樣式： nth-child(even/odd)

　　顏色漸變實現linear-gradient

　　讓overflow:scroll平滑滾動 ：-webkit-overflow-scrolling: touch; // 移動端

四：如何修改chomre的記住密碼後自動填充的黃色背景

 　　input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }

五：CSS 硬件加速

當檢測到某個DOM元素應用了某些CSS規則時就會自動開啓

　　.css {

　　　　-webkit-transform: translate3d(0,0,0);

　　　　-moz-transform: translate3d(0,0,0);

　　　　-ms-transform: translate3d(0,0,0);

　　　　transform: translate3d(0,0,0);

　　}