CSS的背景知識
爲什麼需要css技術？
咱們需要看看css是處在一個什麼樣的技術位置，web的html頁面需要瀏覽器進行訪問，而瀏覽器又是運行在操作系統上的，操作系統又是運行在不同的硬件設備上的，所以css的技術需要一些基礎背景知識：硬件設備、操作系統、瀏覽器、html、js。
爲什麼需要把角度上升到硬件設備這一層呢？因爲手機和顯示器的硬件分辨率不一樣，會存在尺寸兼容問題，所以界面上展示的尺寸單位是有區別的，同樣的px，不同的PPI顯示效果不一樣。另外不同設備運行的操作系統不一樣，能使用的瀏覽器也不一樣，比如window的IE，蘋果的safari、安卓的chrome等。不同的瀏覽器支持的css特性也是有區別的，特別是最新的css3標準。
CSS在這個技術系統中的位置，就是在瀏覽器中用來對html的內容進行展示美化作用，讓HTML內容結構和頁面展示效果進行分離。
css和html的關係，就像房屋裝修一樣，房屋的每一個牆面就是一個瀏覽器頁面，我們就拿電視牆來做比喻，html就是牆上需要展示的內容（電視機、背景牆、裝飾燈等），css就是設計師的設計方案，電視機的居中位置、背景牆的顏色和大小、裝飾燈的效果等。
css設計的初衷是解決web1.0時代的圖片和文字展示，所以一切的技術方案都是從這裏出發。後面隨着互聯網的發展，web內容不再是隻有圖片和文字，還有更多的比如視頻、遊戲、移動端、多屏幕尺寸等需求，才推出了HTML5體系。HTML5體系=HTML5+CSS3+JS，三部分技術內容。暫時先不討論css3的新特性，還是首要弄清楚css2.1時代的內容。
CSS2.1技術內容
盒子模型
html在瀏覽器中展示給用戶，首先css需要確定html的內容用什麼樣的形式來展示？css將html的標籤定義成了一個盒子模型，就像快遞的包裹盒子一樣，標籤的內容就是快遞的商品，然後用一個盒子來打包商品，商品與盒子之間有一個緩衝區間，而打包的盒子是由具有厚度的紙板組成，最後打包好的包裹堆放在一起的時候，包裹與包裹之間有一個間距。對應起來css的概念就是商品content、緩衝區padding、紙箱的紙板border、包裹間距margin。多個包裹可以打包成一個大包裹，所以盒子模型是可以嵌套的。
技術點：盒子尺寸、盒子類型（inline、block、inline-block、none）、背景顏色、背景圖片、margin合併問題、100%和auto不一樣、滾動條。
最佳實踐：
父子節點用padding、兄弟節點用margin；
儘量不要設置100%，默認auto；
block元素才能設置尺寸大小，inline的無法設置；
盒子類型決定盒子的展示佈局，慎用inline-block，默認盒子間有空白，需要配合浮動使用。
文檔流
盒子該如何進行擺放呢？
有了盒子模型的概念，那麼html就是最大的一個盒子，其他內容都是嵌套在它裏面的。還是回到剛剛提到的電視牆概念，盒子的擺放順序是從左到右、從上到下，這個順序就稱爲文檔流。
定位（position）
當然文檔流的順序無法滿足很多實際場景需要，才補充了脫離文檔流的方案，浮動、絕對定位、相對定位。
浮動（float），類似水流一樣，具有流動的方向，盒子在水流上，就會跟着水流方向流動，碰到同向上其他盒子才停止。
絕對定位，直接根據座標進行定位。
（absolute）根據父節點爲座標系；
（fixed）根據瀏覽器窗口爲座標系。
相對定位（relative），是相對於節點本身原有位置，進行座標定位。
技術點：文檔流順序、浮動、絕對定位、高度坍塌、浮動副作用、層級遮擋。
最佳實踐：
浮動需要注意高度坍塌和清除浮動，兩種方式，父節點的僞元素和末尾節點的clear；脫離文檔流後就存在層級遮擋問題，需要設置z-index。
僞元素
html已經存在的元素之外，還可以通過css來定義僞元素。類似於servlet中的攔截器，在處理請求的前後添加額外的業務邏輯。
常用僞元素：
：first-letter、：first-line、：before、：after、：hover
超鏈接：
：hover、：link、：visited、：avtive
最佳實踐：利用hover等僞元素，可以讓CSS實現js的效果。
圖文相關
css設計之初就是針對圖文進行美化，所以圖片和文字有很多特定屬性。
常用的圖片尺寸、字體大小、字體類型。
字體大小還涉及到硬件設備，絕對的px，相對的em、rem。
圖片還涉及到性能優化，用數據來替換圖片等技術。
選擇器
CSS技術就是給盒子設置不同的屬性值，來對盒子進行美化。
那麼怎麼選擇指定的“盒子們”呢？
就需要CSS提供的多種盒子選擇器了。
常用選擇器：
html標籤選擇器、類選擇器、id選擇器、屬性選擇器、後代選擇器、子元素選擇器。
最佳實踐：選擇器的合理使用，可以減少class定義數量，並且進行批量處理。
CSS3
新增了動畫、陰影、圓角等。
關鍵屬性
display：none/block/inline/inline-block
width、height、min/max-width、min/max-height：auto/100%/10px
padding、border、margin
float：left、right
position：fixed、relative、absolute
clip、overflow、z-index、cursor、opacity：透明度
ul,li,p,div,span {
margin:0px;
padding:0px;
}
.clearfix:after {
content: '\200B';
clear: both;
display: block;
height: 0;
}
.clearboth {clear:both;}
li {
list-style: none;
background-color: beige;
}
a:link,a:visited,a:hover,a:active {
color: #000;
}