注意事項::
1、一律小寫;
2、盡量用英文;
3、不加中槓和下劃線;
4、盡量不縮寫，除非一看就明白的單詞。
4、CSS樣式表文件命名
主要的 .css
模塊 .css
基本共用 base.css
布局、版面 .css
主題 .css
專欄 .css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
四、一些比較偏而實用的 CSS 樣式
（1）::--Input-
input 的 屬性，很好用js自定義滾動條樣式，但不能直接改這個文字顏色，所以目前的解決方法就是用::input-屬性來改。
小Tips: 配合 屬性使用效果更佳哦！
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ?color: pink; }
::-moz-placeholder { /* Firefox 19+ */ ?color: pink; } :-ms-input-placeholder { /* IE 10+ */ ?color: pink; } :-moz-placeholder { /* Firefox 18- */ ?color: pink; }
（2）@Impor 嵌套樣式表文件
使用它可以在樣式表再次內嵌套樣式表文件，比如一些組件CSS可以使用，但不太推薦使用這個，因為加載時有可能會被漏掉。
@import url("reset.css"); @import url("global.css"); ? @import url("font.css");
（3） 當點擊Input元素時顯示的當前狀態線（外發光）
這個狀態線是用來提示用戶當前狀態指示作用，但因為效果很美觀，建議去掉，或自己改個樣式
div { ? ?outline: none; //移動瀏覽器默認的狀態線 ? ?// outline: 5px dotted red; 也可以設置樣式 }
（4） 設置是否可編輯
可編輯
（5）-
手機video 都可以在頁面中播放，而不是全屏播放了。
（6）: ， 讓有效的
設置left:0, right:0 就可以。原因是2邊都是0不存在邊距，就可以得出距離，并居中。
div { ? ?position: absolute; ? ?left: 0; ? ?right: 0; ? ?margin: 0 auto; }
（7）使用 清楚浮動，解決父類高度崩塌
.clearfix { zoom: 1; } .clearfix:after { ? ? visibility: hidden; ? ? display: block; ? ? font-size: 0; ? ? content: " "; ? ? clear: both;
? ? height: 0; }
（8）User- 禁止用戶選中文本
div { ? ?user-select: none; /* Standard syntax */ }
（9）清除手機Tap事件后 時候出現的一個高亮
*{ ? ?-webkit-tap-highlight-color: rgba(0,0,0,0); }
（10）::---Thumb
可以修改谷歌的滾動條樣式，好像也可以
（11）--:none
To apply to an that doesn’t have it by
To to an that does have it by
移除瀏覽器默認的樣式，比如的input默認樣式
input, button, textarea, select { *font-size: 100%; -webkit-appearance:none; }
（12）CSS開啟硬件加速
-webkit-transform: translateZ(0);
（13）使用CSS 或者 時可能會有頁面閃爍的Bug
-webkit-backface-visibility: hidden;
（14）*--Touch- 禁止長按鏈接與圖片彈出菜單
-webkit-touch-callout: none;
（15）-Style: -3d 讓元素支持3d
div { ? ?-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */ ? ?-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ ? ?transform: rotateY(60deg); ? ?transform-style: preserve-3d; }
（16） 透視
這個屬性的存在決定你看到的元素是2d還是3d。一般設置在包裹元素的父類上。
.div-box { perspective: 400px; }
（17）Css實現不換行、自動換行、強制換行
//不換行 white-space:nowrap; //自動換行 word-wrap: break-word; word-break: normal;
//強制換行 word-break:break-all;
（18）Box- 讓元素的寬度、高度包含和
{ ? ?box-sizing: border-box; }
（19）Calc() , 計算屬性值
div { ? ?width: calc(100% - 100px); }
上面的例子就是讓寬度為100%減去100px的值，項目中很適用js自定義滾動條樣式，要IE9以上兼容。
（20）Css3 - 線性漸變
默認開始在top, 也可以自定義方向。
div { ? ?linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...);
（21）常用的選擇器 :Nth-Child()
以下代碼是選擇父類下第一個子節點，p元素，建議學習這個樣式屬性的使用，很實用的。
p:nth-child(1) { ? ?... }
今天，就介紹到這里，如果你有好的 CSS 代碼，歡迎在留言處提交給我們，我們一起收錄進來！
本文完~
