1、選擇器
常用的選擇器有類選擇器、標籤選擇器、id選擇器、偽類選擇器、屬性選擇器等。
css權重即優先順序順序是：內聯樣式》id選擇器》偽類選擇器》屬性選擇器》類選擇器》標籤選擇器》*。
需要特別注意的是，「！important」會覆蓋所有樣式規則，即「！important」的優先順序最高。
2、定位
定位有相對定位relative、絕對定位absolute、固定定位fixed，其中relative和absolute在移動端用的較多，fixed在移動端相容有問題，在移動端替代fixed的方案是是absolute+內部滾動。
3、浮動
設定float為left或right就可以是元素脫離文件流，向左或向右浮動。一般在宮格模式布局是會用到，如果子元素全部浮動，則父元素崩塌，這時就需要清除浮動。清除浮動的方法有很多，常用的是給父元素設定overflow：hidden。
4、盒子模型
盒子模型是css布局的基礎。常見的盒子模型有塊級盒子block、行內盒子inline-block，盒子關鍵的屬性有margin、padding、border、content，這幾個屬性可以設定盒子魚盒子之間的關係以及盒子與內容之間的關係。
另乙個問題就是計算盒子的大小，box-sizing屬性的設定會影響盒子的width和height。
最後是關於外邊距重疊問題，只有普通文件流中塊框的垂直外邊距才會發生外邊距合併，行內距、浮動框或絕對定位之間的外邊距不會合併。邊界寬度是相鄰寬度中的最大值（不是相加值）。
5、flex布局
flex布局是乙個伸縮容器，容器本身會根據內容動態設定自身大小；當flex容器被應用乙個width和height時，將會自動調整容器中的元素適應新大小。flex容器也可以設定伸縮比列和固定寬度，還可以設定容器中元素的排列方向和是否支援元素的自動換行。
注意，設為flex布局後，子元素的float、clear、vertical-align屬性都會失效。
6、過度transition和旋轉transform
應用transform可以對元素進行平移translate、旋轉rotate、縮放scale、傾斜skew等處理，應用transition可以使css屬性在一段時間內平滑的過度。使用transform和transition可以實現頁面的滑動切換效果。
7、動畫animation
animation首先需要設定乙個動畫函式，然後以這個動畫的方式來改變元素的css屬性的辯護，動畫可以被設定成永久迴圈演示。和transition相比，animation設定動畫效果哼靈活更豐富，二者的另乙個區別是，transition只能通過主動改變元素的css值才能出發動畫效果，而animation一旦被應用就開始執行動畫。
8、sprite圖
對於大型站點，為了減少http請求的次數，一般將常用的小圖示排到乙個大圖中，頁面載入時只需要請求一次網路，然後在css中通過設定background-position來控制顯示所需的小圖示。
9、字型圖示iconfont
字型圖示就是將常用的圖示轉化為字型資源存在檔案中，通過css中引用該字型檔案，然後可以直接通過控制字型的css屬性來設定圖示的樣式。
web前端初學者必學的css樣式
很多學習web 前端開發 的朋友，在前期學習css 樣式時，對 css樣式都表示不熟悉，記不住 css樣式 標籤表達的含義，今天整理了乙份我們常用的 css 1.字型樣式 font family 字型樣式 font size 字型大小 color 字型顏色 font weight bold 粗體顯示...
初學者web前端學習筆記
對於 if 語句括號裡的表示式，ecmascript 會自動呼叫boolean 轉型函式將這個表示式的結果轉換成乙個布林值。如果值為 true，執行後面的一條語句，否則不執行。通過arguments 物件的length屬性，來智慧型的判斷有多少引數，然後把引數進行合理的應用 比如，要實現乙個加法運算...
初學者應該如何學習web前端
優秀的前端開發工程師要在知識體系上要有廣度和深度，要具備快速學習的能力。前端開發工程師不僅要掌握基本的web前端開發技術，效能優化 及一些基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括 的可維護性 分層語義模板和瀏覽器分級支援等。新手學習前端的話，一定要想想為什麼要學習它，是出...