一、盒模型
? ? 1.1、盒模型的概念：在HTML中每一個元素都是一個盒模型，由外邊距margin、邊框border、內邊距padding和content內容構成。如下圖所示。
? ? ? 1.1.1、margin外邊距是盒子與盒子之間的間距，不會影響盒子的大小。
? ? ? 1.1.2、border邊框，類似于給盒子蓋了城墻。其p值影響著盒模型的大小。
? ? ? 1.1.3、padding內邊距，內容與盒子的距離。其p值影響著盒模型的大小。
? ? ? 1.1.4、content內容，是有元素本身的寬高決定，一次其寬高就是內容的大小。?
? ? 1.2、盒模型的分類：
? ? ? ?1.2.1、標準盒模型
? ? ? ? ? ? ? ? ? 所謂標準盒模型就是在谷歌，火狐，歐朋等瀏覽器中顯示的盒模型。盒模型的尺寸大小由content組成，其大小由元素本身的寬高決 ? ? ? ? ? ? ? ? ? ?定。盒模型的盒子尺寸由content、border和padding組成，而盒模型的區(qū)域是說整個盒子所占的面積，即大小由content、padding、 ? ? ? ? ? ? ? ? ? ? ? ?border、margin構成。
? ? ? ? ? ? ? ? ? 在標準模式下，一個塊級元素的盒模型總寬度=width + margin(左右) + padding(左右) + border(左右)
? ? ? ? ? ? ? ? ? 在標準模式下，一個塊級元素的盒模型總高度=height + margin(左右) + padding(左右) + border(左右)
? ? ? ? 1.2.2、怪異盒模型
? ? ? ? ? ? ? ? ? ? 見名知意，就是盒子在瀏覽器中呈現(xiàn)出來的現(xiàn)象很奇怪，通常會在IE6+以上的瀏覽器中會顯示。在標準盒模型里面增加了一個box- ? ? ? ? ? ? ? ? ? ?sizing的樣式，通過這個樣式可以設置樣式值border-box和content-box
? ? ? ? ? ? ? ? ? ? ?在怪異模式下，一個塊級元素的盒模型的總寬度=width + margin（左右）（即width已經包含了padding和border值）
? ? ? ? ? ? ? ? ? ? ?在怪異模式下，一個塊級元素的盒模型的總高度=height + margin（左右）（即height已經包含了padding和border值）
二、CSS的引入方式?
? ? ?2.1、行間樣式
? ? ? ? ? ? ? ? ? 行間樣式即在div這一行中書寫CSS樣式，例如 <div style="width: 100px;height: 100px;"></div>，這樣寫的好處不會產生額外的數(shù)據(jù)請 ? ? ? ? ? ?求，使用戶等待時間減少，但是另一方面增加了代碼的堆積，不符合樣式與結構的分離，而且不利于后期維護工作。所以即使其優(yōu)點很好 ? ? ? ? ? ? 但是弊大于利，在日常開發(fā)中不建議使用行間樣式
? ? ? 2.2、內部樣式
? ? ? ? ? ? ? ? ? ?內部樣式實在該HTML中的<head>里面書寫CSS樣式，例如：<style> div { width: 100px;height:100px; } </style>，內部樣式基于行間 ? ? ? ? ? ? ? 樣式優(yōu)點，即不會產生額外的數(shù)據(jù)請求，而且初步實現(xiàn)樣式與結構的分離，但內部樣式再好也只是放在內部，對于重復使用該樣式造成困 ? ? ? ? ? ? ? 擾。所以建議 內部樣式一般用于單頁面網頁應用。
? ? ? ?2.3、外部樣式
? ? ? ? ? ? ? ? ? ?外部樣式即寫在HTML外面的樣式，使用時需要用link標簽引入，例如<link rel="stylesheet" href="xxx.css">。外部樣式實現(xiàn)了樣式與結 ? ? ? ? ? ? 構的分離，而且方便復用，減少了代碼的冗余，而且方便后期維護，?于此同時也有其弊端，即產生額外的請求，但是后期我們會使用相關 ? ? ? ? ? ? 工具解決該問題。所以在項目開發(fā)中建議使用外部樣式。
三、選擇器
? ? ? ?3.1、通配選擇器
? ? ? ? ? ? ? ? ?*{padding：0px} 通配選擇器作用于所有元素，不論是寫的還是沒寫的。作用域太廣，一般不建議使用，因為細節(jié)決定一切吧，就像剛 ? ? ? ? ? ? ? 開始學習H5會從最基礎的Sublime軟件開始，一步一個腳印。
? ? ? ? 3.2、標簽名選擇器
? ? ? ? ? ? ? ?ol {list-style: none;} 標簽名選擇器作用于一類標簽，方式如上述例子，通過標簽查找。一般在重置標簽樣式的時候使用。
? ? ? ? ?3.3、群組選擇器
? ? ? ? ? ? ? ?div，span {margin：10px;} 使用群組選擇器可以優(yōu)化代碼，減少文檔體積
? ? ? ? ?3.4、類選擇器
? ? ? ? ? ? ? ? ?.box {width: 100px;height: 100px;} ，類選擇器是我們最常用的一種選擇器，一個元素可以有多個類名，中間用空格隔開。通常在設置相 ? ? ? ? ? ? 同樣式的元素上使用。
? ? ? ? ?3.5、子代選擇器
? ? ? ? ? ? ? ? ?div div span {padding: 100px;},子代選擇器作用于最后一個元素，前面的元素用于過濾，可以實現(xiàn)快速查找。
