為什麼需要css技術？
咱們需要看看css是處在乙個什麼樣的技術位置，web的html頁面需要瀏覽器進行訪問，而瀏覽器又是執行在作業系統上的，作業系統又是執行在不同的硬體裝置上的，所以css的技術需要一些基礎背景知識：硬體裝置、作業系統、瀏覽器、html、js。
為什麼需要把角度上公升到硬體裝置這一層呢？因為手機和顯示器的硬體解析度不一樣，會存在尺寸相容問題，所以介面上展示的尺寸單位是有區別的，同樣的px，不同的ppi顯示效果不一樣。另外不同裝置執行的作業系統不一樣，能使用的瀏覽器也不一樣，比如window的ie，蘋果的safari、安卓的chrome等。不同的瀏覽器支援的css特性也是有區別的，特別是最新的css3標準。
css在這個技術系統中的位置，就是在瀏覽器中用來對html的內容進行展示美化作用，讓html內容結構和頁面展示效果進行分離。
css和html的關係，就像房屋裝修一樣，房屋的每乙個牆面就是乙個瀏覽器頁面，我們就拿電視牆來做比喻，html就是牆上需要展示的內容（電視機、背景牆、裝飾燈等），css就是設計師的設計方案，電視機的居中位置、背景牆的顏色和大小、裝飾燈的效果等。
盒子模型
html在瀏覽器中展示給使用者，首先css需要確定html的內容用什麼樣的形式來展示？css將html的標籤定義成了乙個盒子模型，就像快遞的包裹盒子一樣，標籤的內容就是快遞的商品，然後用乙個盒子來打包商品，商品與盒子之間有乙個緩衝區間，而打包的盒子是由具有厚度的紙板組成，最後打包好的包裹堆放在一起的時候，包裹與包裹之間有乙個間距。對應起來css的概念就是商品content、緩衝區padding、紙箱的紙板border、包裹間距margin。多個包裹可以打包成乙個大包裹，所以盒子模型是可以巢狀的。
最佳實踐：
父子節點用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等偽元素，可以讓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
.clearfix:after
.clearboth
li a:link,a:visited,a:hover,a:active
XML技術概要
xhtml 使用xml重新定義了html 4.01的語法。xhtml 1.0是html的下乙個版本。css 樣式單可以為xml文件新增顯示資訊。xsl由三部分組成 xml文件轉換 xml document transformation 又叫xslt 模式匹配語法 a pattern matching...
XML技術概要
xhtml 使用xml重新定義了html 4.01的語法。xhtml 1.0是html的下乙個版本。css 樣式單可以為xml文件新增顯示資訊。xsl由三部分組成 xml文件轉換 xml document transformation 又叫xslt 模式匹配語法 a pattern matching...
ADAS技術概要
先進駕駛輔助系統 advanced driverassistant system 簡稱adas，是智慧型交通領域的乙個大方向，近幾年adas迅速發展，在車道線檢測 前車防撞 疲勞駕駛 緊急壁障 訊號燈識別等方面都取得了長足的進步，這也是我們把adas單獨作為一節來進行闡述的原因。當然adas系統會用...