放開自己，擁抱未來，擁抱變化。舍棄過往，接受新穎的架構，思想，理念。你就會發現，很短的時候，自己有了質地提升。
global css
用來規范css屬性在不同瀏覽器中定義的初始值不同問題
有問題找w3school
碎碎的內容來自這里
display：inline
設置為行內元素。。。。就是變成就和p標簽一樣，與其他元素在同一行上，沒有長寬高，也不能設置 ps：span a label input、img ，strong ， em都是inline標簽
普通流布局：display : inline-block
這是一個傳說中取代float布局的存在
//并沒有搞懂 什么鬼
定位
fixed定位的渲染效率很低，因為它會頻繁觸發瀏覽器的重排
css選擇器
id class就不說了 “#”還有“.”就可以了 全局選擇 “*”（計算機語言里的乘號后代選擇器 div +空格+div里的任意元素
.aIdName a{.....}
例如 .father + “空格+ .child（可以是div的兒子也可以是孫子）子代選擇器 div>a(就是指div下面的兒子輩a標簽)
.classname > a{.....}群組選擇器 就是a,b,c,d
a ,b ,c{....}
相鄰選擇器就是+ h1 +p{css}就是選擇了前面是h1的p標簽h1+p{....}
還有好多我就不全寫了
css繼承
就是兒子隨爸爸姓
繼承父類的css但子類的優先級高
字體大小
px像素大小
還有一個em相對父元素的百分比0.5em就是父類的一半大小
如果考慮屏幕大小的差異建議用這個 然而不是那么好用
css偽類順序
link visited hover active《先設置link 然后依次設置 否則會覆蓋導致無效》
margin
我們看到這個圖中，有個列表，每個列表項下面都有一條線，但最后一項沒有。我們預期的代碼是：
<div id="demo">
<h3>標題列表</h3>
<ul>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
</ul>
</div>
如果每項都有條底線，我們可以很簡單的做到，如下：
#demo li{
border-bottom: 1px solid #ccc;
}
然而為了處理最后一項，事情就變得有點糾結了。我知道肯定有人要說，我們有 first-child 之類的CSS3選擇符，要處理這個，太easy了。
傳說中的first/last解決方案
所以我們需要找別的方法，于是這樣的代碼，相信你見過無數遍了：
<div id="demo">
<h3>標題列表</h3>
<ul>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li>? 有點累想歇一下好長一個標題</li>
<li class="last">? 有點累想歇一下好長一個標題</li>
</ul>
</div>
解決方案，代碼如下：
#demo .last{
border-bottom: 0 none;
}
box
如大家所熟知的，是css布局中最小的單位，所有的布局都是由一個一個矩形的box搭建出來的，就很像是搭積木那樣。而每一個box都會由四部分組成，包括：content，padding，border，margin。那么box的高寬是如何計算的呢？css中有一個屬性叫box-sizing，該屬性取不同的值會決定box高寬不同的計算方式。
content-box(默認值):
這也就是最常規的計算方式，某個box的高等于它的height＋padding＋border＋margin，寬也是同理，以下不再贅述。border-box:
當取值為border-box時，這個box的高就等于它的height＋margin了，也就是說該box的height是由content部分的height和padding以及border共同組成的了，換言之，padding和border不再向外延伸，而是往里邊擠。
.confirm-btn{
box-sizing: border-box;
float: left; width: 50%;
...
css auto
塊級元素水平方向的auto,塊級元素的margin、border、padding以及content寬度之和等于父元素width。使用auto屬性在父元素寬度變化的時候，該元素的寬度也會隨之變化。
但是當該元素被設為浮動時，該元素的width就變成了內容的寬度了，由內容撐開，也就是所謂的有了包裹性。overflow | position:absolute | float:left/right都可以產生包裹性，替換元素也同樣具有包裹性。
css clear
css ::after ::before
after/before的妙用
竟然還可以這么玩666
這個blog寫的也很不錯，比我寫的好多了
css calc()
calc詳細介紹
cssom
Flex
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
彈性盒子在移動端的應用會越來越普遍，這套模型值得去好好研究。語法規則都是非常貼近人性，非常靈活，瀏覽器兼容性也非常好，當然國內百花齊放的移動瀏覽器會有哪些大坑呢？我們拭目以待~-----by 某人
問題（myself）
1 dl, dt, dd三個標簽瀏覽器默認margin值多少？是否有標簽默認文字粗體？
2 line-height:150%和line-height:1.5的區別是？
3 float為何會讓外部容器高度塌陷？這是bug？
4 vertical-align的表現為何在IE7, IE8, IE9下表現不盡相同？其中的渲染機制是？
5 vertical-align負值與margin-bottom負值的差異
7 display : inline-block
