font-size：0 letter-spacing：-3px，在ie下存在2px覆蓋，所以hackie，*letter-spacing: normal
::與:元素性偽類的區別，就是沒區別，只不過前者的適配性較低，所以還是應當在開發時選擇後者大部分偽類可以顧名思義，比較常用nth-child() 和 nth-of-type() 前者選取在父元素下排名第n的指定子元素，後者選取在父元素下的同類元素中排名第n的子元素
:after和:before大部分的時候用來做圖示和一些獨特的hover樣式，以及用於清除浮動
1.用背景圖進行y軸縮放，建立一種等高列的假象2.利用div的height會被最大高度撐大的原理，將帶有背景色的div巢狀使用，並且使頂層div具有overflow:hidden切掉溢位元素，使所有元素具有float:left，並設定其列寬，再通過相對定位，將每一列的背景色容器與其對應的內容元素對齊，這樣內容元素會撐大所有的背景色容器。（背景色容器的width都是100%，他們顏色會互相覆蓋只剩下最深背景色容器的顏色，再用right值將遮蓋的元素偏移，這樣就可以精確的定位到內容元素所在的位置，內容元素設定float是為了讓其變為行內元素且緊密排列）
3.flex布局下的aligin-items：stretch，可以在flex元素不寫死高度的情況下等高
實際上聖杯布局就是先用padding鋪好主體，然後用左右的面板來通過margin擠壓主體的width以達到效果首先float：left是為了使元素脫離文件流，按照說法inline-block也可以做到
設定主體的width為100%的情況下，由於佔滿一行，會導致左右盒子都被換行到下一行，所以使用margin強行擠出左右盒子的位置，右側設定margin-left : - 自己寬度，和right; -自己寬度（你擠出來的位置是margin，是空白的，當然要用位移去填咯 ，同理，左側盒子需要設定margin-left ： 100%將左側擠出乙個自己的身位，然後用left ： -自己寬度填補空白位置）
雙飛燕布局：
雙飛燕布局是先用容器設定自適應的100%的width，然後用其包裹主體元素，主體元素用左右外邊距留出左右盒子的寬度，這是與聖杯最大的不同，聖杯中實際上是用位移強行使左右盒子覆蓋padding，而這裡我認為是用margin去合併（利用margin的摺疊）主體元素左右的margin
同樣需要用float;left使其脫離文件流。
最好自己參考一下網上的**，實際上很好理解。
flex版：
將主元素的寬度設定為100%，使得其能自適應大小，由於shrink = 0的原因，左右的元素永遠不會被縮小，這樣就實現了聖杯布局了。
但是flex版沒有辦法提前渲染主體噢，主列是不會優先載入的。
當使用@import匯入css時會遇到的情況，頁面的樣式內容有可能會發生瞬間的閃爍，這種情況下被稱為文件的暫時性失效避免方式：webpack和避免使用@import
css壓縮:運用webpack或者gulp。合併css，減少冗餘css
刪除無用的樣式，利用繼承
按需載入css，抽離公共的css。
盡量避免style標籤內嵌css，因為link引入的css可以快取
將css放在html的頂部，避免出現fouc，同時避免使用@import
盡量不使用css中的算術運算expression，其相當影響效能
盡量不使用子選擇器，查詢過程耗費一定的效能
合併，限制的寬高，裁剪
css基礎知識整理篇
某個大神整理的面試題 內容 content 填充 padding 邊界 margin 邊框 border content部分把border和padding算進去了1 id選擇器 myid 2 類選擇器 myclassname 3 標籤選擇器 div,h1,p 4 相鄰選擇器 h1 p 5 子選擇器 ...
CSS基礎知識整理二
下面是定義乙個盒子的border div下面是定義乙個盒子的寬度，其寬度由padding left padding right margin left margin right border left border right和自己本身物體的寬度組成 div 以上案例中div的寬度為232px 乙個...
Web前端基礎知識整理 CSS篇
css手冊 選擇器 一 元素選擇符 通配選擇符 選擇所有元素 型別選擇符 e 以文件物件型別作為選擇符 id選擇符 e id 以唯一識別符號id屬性等於id的e物件作為選擇符 class選擇符 e.class 以class屬性包含class的e物件作為選擇符 二 關係選擇符 包含選擇符 e f 選擇...