1 .css簡介
css2.1是目前世界上應用最廣泛的版本，2011年開始css被分為多個模塊單獨升級，統稱為CSS3，查看 css spec文檔
PS: 沒有css4, 只有各個模塊的level 4。
2. 如何做橫向布局（float + clearfix）
- 給那幾個元素全加上
style="float:left/right". - 給他們的父元素加上
class="clearfix".
.clearfix::after{
content: "";
display: block;
clear: both;
}
3. 高度
文檔流: 文檔內元素的流動方向
- div（塊級元素）：高度是由內部文檔流元素高度的總和決定的。文檔流：文檔內元素的流動方向，內聯元素是從左往右，塊級元素是從上往下
- span（內聯元素）：高度是由其中文字高度決定的，內聯元素設置width和height是無效的，上下的margin和padding也無效，要將它們設為display:inline-block才有效。
4. TIPS
四種引入 CSS 的方式：style 屬性、style 標簽、css link、css import
盡量不寫height和width，會引出很多問題，要設置寬高的時候用padding，另外span元素設置寬高的時候要將它設為display:inline-block，因為內聯元素是不能設置寬高的，inline-block具有inline的同行特性，也具有block的高度特性。
對于display:inline(內聯元素)的元素，設置width, height, 上下margin和padding都是無效的
5. 居中
- 若想讓一個背景圖居中，并且讓它自適應屏幕
background: url("xxx.jpg") no-repeat center center ;
background-size: cover;
- div水平居中
margin-left:auto;
margin-right:auto;
- 內聯元素居中，給它們的父元素加上,
text-align:center;
若不是內聯元素想讓它居中，則加display:inline-block，加了之后一般還要加下面這句，不然可能會有bug（下面空出一行）
display:inline-block;
vertical-align: top;
6. 怎樣脫離文檔流
- 相對于窗口定位：
position:fixed - 相對于父級元素定位：
在父級元素加上：position:relative
給自己加上：position:absolute（絕對定位之后就會變成display:block）
7. 偽類
在使用::before和::after時
必須加上
content: "";
display:block;
:nth-child(even): 偶數個元素
:first-child : 第一個元素
8. CSS學習資源
- Google搜索關鍵詞: MDN
- CSS Tricks
- Google 搜索: 阮一峰 CSS
- 張鑫旭 CSS博客
- Codrops CSS的效果
- CSS 陰影效果
