CSS，全稱Cascading Style Sheets，翻譯過來是“層疊樣式表”。顧名思義，給網頁加樣式用的。如果你想系統地學習css，你可以看css文檔（css3將css分爲幾個不同的功能模塊，然後分別寫文檔），當然，這操作很不省心。所以你可以試着以項目爲出發點來熟悉css，瞭解它的一些特性。我就是這樣做的。這裏是我的一些總結。
工具
- css tricks，主要有css的一些小技巧。
- codrops，css特效，比較酷炫。
- dribble，搜webpage可以看好看的設計圖。但是沒有psd格式，如果需要psd格式的設計圖搜
webpage free psd。 - 壁紙天堂wallheaven
- 圖標
http-server 這個不是網站，用來使用http協議預覽頁面，不開這個的話用的是file協議。打開git bash，輸入
npm i -g http-server安裝http-server工具。在頁面所在的目錄下運行http-server -c-1，然後將生成的地址複製到地址欄，即可不加緩存地預覽頁面。Ctrl+c(cancel)結束服務。![]()
如果你不知道一個元素可以取哪些值，可以查mdn，也可以直接在開發者工具裏邊試一試。
四種引用css的方式
- 行內，
style=""，用style屬性 - HTML文件內，
<style>...</style>，用style標籤 - 引入外部樣式
.css文件，<link rel="stylesheet" href="./a.css">（relationship–rel）—-會發起請求 - 在css裏邊引入另一個css
#import url(./b.css)。
小技巧
float
主要用於元素的橫向排列，添加float:left的元素，要在它的父級元素上添加clearfix類，用於清除浮動所帶來的影響。
.clearfix::after{
content: '';
display: block;
clear: both;
}給元素加float之後如果元素沒有設置width的話是會默認收縮到文檔流撐起來的那個寬度的。
調試
border: 1px solid red;我們經常會用這行代碼對我們的頁面佈局進行可視化調試。利用瀏覽器的開發者工具強制觸發某種狀態，比如hover
![]()
color
transparent，表示顏色爲透明。
inherit，繼承父級元素的顏色。
class命名
對於很容易出現的同名問題，我們可以用.top .logo{}將這裏括號裏邊定義的logo類的屬性限定在一定的範圍內，也可以用.top>.logo{}。前者只需要是logo在top下即可滿足條件，後者logo必須是top的直接子元素。
回車和空格
span和span之間如果沒有回車兩個元素之間就不會有空格，但是只要有回車就一定會有一個空格，不管有多少個。瀏覽器會把源代碼中的所有回車壓縮成一個空格。
內聯元素和塊級元素
<ul>
<li><a href="#">hello</a></li>
<ul> 上邊的代碼中，如果li的實際高度小於a，給a加display:block，手動設置a爲塊級元素。
內聯元素都是一個挨一個排滿一行之後纔會換行，而塊級元素獨佔一行，就算width沒有佔滿也會佔一行，除非你用別的方法比如float，或者用display:inline-block，儘量用float因爲後者可能會導致其他的bug。加了inline-block之後元素下邊會出現一點空隙，加vertical-align: top可以解決。至於原理，張鑫旭大神分析過。。
內聯元素不接受設置寬高，margin-top``margin-bottom無效，除非改成inline-block。內聯元素高度由字體以及字體相關的參數確定，手動指定的話可以指定line-height或者是直接指定height。
height
沒事不要寫height，很容易出bug。div的高度由裏邊的文檔流決定，寫了height的話，如果文檔流超出height範圍，就會出bug。
position
一共5個取值：
1. static default value，佔用正常文檔流。top,bottom,left,z-index對它沒有影響。
2. relative 文檔流中保留元素原有的位置，該元素使用top等定位之後不佔用額外的文檔流空間。
3. absolute 不佔用文檔流空間。爲了不破壞佈局最好爲它的父級元素加relative，使其相對於父級元素定位而不是相對於整個頁面定位。
4. sticky 文檔流中保留元素原有的位置，瀏覽窗口滾動前元素在原先的位置，窗口滾動後元素相對窗口定位，重新定位的元素不佔用文檔流空間，但其原先的空間依舊會保留。
5. fixed 不爲元素預留空間，元素相對窗口定位。
tips：使用fixed定位的話，文檔寬度會收縮，加width: 100%可以解決。
脫不脫離文檔流影響的只是塊級元素的高度。
weight
和height一樣，能不加就一定不要加。如果你想有寬度用裏邊的元素把它撐開，不要直接給外層元素加width。直接把width寫死的話容易出bug，比如你給一個元素加了左右padding，然後又寫width: 100%，這個元素的總的寬度就超出了父級元素定義的寬度。
當然，實在需要元素有一個寬度的話，可以用max-width代替width。
居中
這裏有一份居中大全
1. 盒子水平居中
margin-left: auto;
margin-right: auto;
- 文字水平居中
text-align: center內聯元素想要居中的話可以給父級元素加這個。 - 文字垂直居中
line-height: 20px; height: 20px;(line-height=height)
div嵌套
有的時候外部div不能加padding，會使得樣式有問題。這個時候裏邊再包裹一個div，給裏邊的div加padding，問題就可以解決了。活用div的嵌套。
外來圖標的使用
- 上iconfont.cn找到你要的圖標
點擊購物車圖標，將該圖標添加入庫
![]()
將添加入庫的圖標加入到你的項目中
![]()
![]()
在自己的頁面中使用這個圖標，這裏我用的是symbol方式。詳細參見幫助文檔。
![]()
![]()
- 通過css修改圖標樣式
width: 100px;
height: 100px;
fill: white;其中width和height是設置圖標的寬高，fill設置的是圖標的顏色。
僞元素，僞類
一個冒號代表的是僞類，兩個是僞元素。不是真元素就是僞元素，僞元素無法選中。僞類通常表示元素的某個狀態，有時存在有時不存在，比如hover。
利用:nth-child(even)來選中元素的偶數個兒子。
margin, padding
padding 和 margin 哪個能實現效果用哪個，推薦用padding，但是最好跟border-box結合，比較好實現佈局。margin在ie下邊可能會有bug。
box-sizing
box-sizing: border-box;加此屬性的話表示將border和padding算到width裏邊。
一些效果的生成工具
如果你想做一個盒子的陰影效果，你可以搜索css shadow generator，然後在線生成你想要的效果。
主要思路
做網頁佈局，先調位置，由大到小由上到下，然後再調文字啊什麼的樣式。不要給height 不要給width 用裏邊的元素把它撐開。
每個div都是一個獨立的模塊，儘量不要跟其他模塊有什麼關聯，不然會很麻煩。