選擇器
選擇器的優先級：
內聯樣式(1000) > id(100) > class以及偽類(10) > 元素(1) > 通配選擇器(0) > 繼承(無)。
有關外觀樣式的屬性能被繼承，有關布局樣式的屬性不能被繼承，具體繼承性可查閱W3C手冊。
并集選擇器的優先級是單獨計算的。
動態偽類
:link
:visited
:focus
:hover
:active
布局:
inline-block可以讓block元素像文本一樣放置。
行內元素也可以使用flex 布局 ， display: inline-flex
設為 flex 布局以后，子元素的float、clear、vertical-align屬性將失效。
采用 flex 布局的元素，它的所有子元素自動成為容器成員，flex item。
默認規則
字體
chrome/opera: "宋體"
firefox: "微軟雅黑"
safari/IE: Times,"宋體"
默認字體大小
chrome/firefox/opera/IE/safari: 16px
中文字體
對于中文字體來說，常見的是宋體和微軟雅黑。宋體是襯線字體，而微軟雅黑是無襯線字體。襯線字體常用于排版印刷，而無襯線字體則常用于網頁中。
最小字體大小
chrome:12px
opera:9px
safari/IE/firefox:無
清除瀏覽器默認樣式
清除瀏覽器默認樣式常用reset.css與normalize.css。
reset相當于重置瀏覽器的默認樣式。
normalize重置了常用的默認樣式，同時清除了瀏覽器的bug，追求的是通用性與一致性，實際項目應結合兩者，改造一份適合自己項目的重置css。
常見的打開BFC的方式：
1、設置元素浮動
2、設置元素為absoulte
3、設置元素為inline-block
4、overflow:hidden
position
relative:相對原位置偏移，偏移時不脫離文檔流，偏移后原位置 仍保留。
absoulte:相對于最近的開啟定位的元素，偏移時脫離文檔流，相對定位元素進行偏移。
z-index
即使子元素的z-index層級比父元素高，也不能覆蓋父元素
盒模型：
box-sizing：border-box：內容區+padding+border是設置的寬高值
簡寫屬性
合理使用簡寫是一種良好的防衛性編碼方式，可以抵御未來的風險。當然，如果要明確地去覆蓋某個具體的展開式屬性并保留其他相關樣式，那就需用展開式屬性。
background
background-color: greend;
background-image: url(tr.png);
background-repeat : no-repeat;
background-attachment: fixed; /*很少用到*/
background-position: top right;
background-size : 2em 2em;
可以簡寫為：
background: green url(tr.png) no-repeat top fixed right / 2em 2em;
font
font : font-style font-variant font-weight font-size font-family;
字體的大小必須寫在倒數第二，字體的字形必須寫在倒數第一。
font-face
@font-face {
font-family: 自定義名稱;
src: url(../font/test.eot);
src: url(../font/test.eot?#iefix) format("embedded-opentype"),
url(../font/test.woff) format("woff"),
url(../font/test.ttf) format("truetype"),
url(../font/test.svg#jq) format("svg");
}
//EOT:IE專用；WOFF:標準；TTF:最常見(safari/android/ios)；SVG:圖形格式(IE和firefox不支持)
行高
line-height是指文本行基線之間的距離。行高line-height實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。在應用到塊級元素時，line-height定義了元素文本基線之間的最小距離，即最小行高。
性能
瀏覽器對選擇器的解析方式是從右向左，出于性能考慮，優先使用能快速的確定元素的選擇器。
媒體查詢
媒體查詢分為媒體設備與媒體條件。
媒體設備：screen、printer...
媒體條件：and or not
百分比margin
百分比margin的計算規則：
普通元素的百分比margin是相對于父元素的寬度計算的。
定位元素的百分比margin是相對于第一個定位祖先元素的寬度計算的。
垂直外邊距重疊
發生條件：塊元素之間、垂直方向。
重疊規則：正正取大值，負負取小值，正負值相加。
calc
calc 用于動態計算長度值。
- 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
- 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標準的數學運算優先級規則；
去除input外邊框
去除input的邊框僅僅用border屬性 ，其實是不能滿足我們的需求的 ，還需要加上outline屬性才可以 實現我們想要的樣式 。
去除邊框的代碼border-width:0， 即可去除相應的周圍的邊框 ，但是實際，并不能達到我們想要的效果， 而appearance:none，也不能達到我們想要的效果，需要添加outline:none 。
滾動條來自html元素
無論什么瀏覽器，默認滾動條均來自<html>，而不是<body>。因為<body>元素默認有8px的margin。若滾動條來自<body>元素，則滾動條與頁面則應該有8px的間距，實際上并沒有間距，所以滾動條來自<html>元素。
超出部分以...顯示
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
水平垂直居中
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
隱藏元素
visibility:hidden與display:none作為隱藏元素的兩種方式，常常被人們拿來比較。其實區別很簡單，前者不脫離文檔流，保留隱藏之前元素占據的物理區域；而后者則脫離文檔流，如果重新顯示則需要頁面的重新繪制。
還有一點區別卻很少人提到，如果父級設置display:none;子級設置display:block也不會顯示；而如果父級設置visibility:hidden;子級設置visibility:visible時子級會顯示出來。
visibility支持動畫
visibility是離散步驟，在0到1數字范圍之內，0表示隱藏，1表示顯示。visibility:hidden可以看成visibility:0，visibility:visible可以看成visibility:1。于是，visibility應用transition等同于0~1之間的過渡效果。實際上，只要visibility的值大于0就是顯示的。由于這個現象，我們可以利用transition實現元素的延時顯示隱藏
IE盒模型與W3C盒模型
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準。我們說這是一個好消息因為這意味著此盒模型問題只會出現在IE5.5及其更早的版本中。只要為文檔設置一個DOCTYPE，就會使得IE遵循標準兼容模式的方式工作。另外，我們現在應該能理解了，css3的box-sizing屬性給了開發者選擇盒模型解析方式的權利。W3C的盒模型方式被稱為“content-box”，IE的被稱為“border-box”，使用box-sizing: border-box;就是為了在設置有padding值和border值的時候不把寬度撐開。
