一申尼、盒模型
? ? 1.1、盒模型的概念：在HTML中每一個元素都是一個盒模型垫桂，由外邊距margin师幕、邊框border、內(nèi)邊距padding和content內(nèi)容構(gòu)成。如下圖所示霹粥。
? ? ? 1.1.1灭将、margin外邊距是盒子與盒子之間的間距，不會影響盒子的大小后控。
? ? ? 1.1.2庙曙、border邊框，類似于給盒子蓋了城墻浩淘。其p值影響著盒模型的大小捌朴。
? ? ? 1.1.3、padding內(nèi)邊距张抄，內(nèi)容與盒子的距離砂蔽。其p值影響著盒模型的大小。
? ? ? 1.1.4署惯、content內(nèi)容左驾，是有元素本身的寬高決定，一次其寬高就是內(nèi)容的大小泽台。?
? ? 1.2什荣、盒模型的分類：
? ? ? ?1.2.1、標(biāo)準(zhǔn)盒模型
? ? ? ? ? ? ? ? ? 所謂標(biāo)準(zhǔn)盒模型就是在谷歌怀酷，火狐稻爬，歐朋等瀏覽器中顯示的盒模型。盒模型的尺寸大小由content組成蜕依，其大小由元素本身的寬高決 ? ? ? ? ? ? ? ? ? ?定桅锄。盒模型的盒子尺寸由content、border和padding組成样眠，而盒模型的區(qū)域是說整個盒子所占的面積友瘤，即大小由content、padding檐束、 ? ? ? ? ? ? ? ? ? ? ? ?border辫秧、margin構(gòu)成。
? ? ? ? ? ? ? ? ? 在標(biāo)準(zhǔn)模式下被丧，一個塊級元素的盒模型總寬度=width + margin(左右) + padding(左右) + border(左右)
? ? ? ? ? ? ? ? ? 在標(biāo)準(zhǔn)模式下盟戏，一個塊級元素的盒模型總高度=height + margin(左右) + padding(左右) + border(左右)
? ? ? ? 1.2.2、怪異盒模型
? ? ? ? ? ? ? ? ? ? 見名知意甥桂，就是盒子在瀏覽器中呈現(xiàn)出來的現(xiàn)象很奇怪柿究，通常會在IE6+以上的瀏覽器中會顯示。在標(biāo)準(zhǔn)盒模型里面增加了一個box- ? ? ? ? ? ? ? ? ? ?sizing的樣式黄选，通過這個樣式可以設(shè)置樣式值border-box和content-box
? ? ? ? ? ? ? ? ? ? ?在怪異模式下蝇摸，一個塊級元素的盒模型的總寬度=width + margin（左右）（即width已經(jīng)包含了padding和border值）
? ? ? ? ? ? ? ? ? ? ?在怪異模式下，一個塊級元素的盒模型的總高度=height + margin（左右）（即height已經(jīng)包含了padding和border值）
二、CSS的引入方式?
? ? ?2.1貌夕、行間樣式
? ? ? ? ? ? ? ? ? 行間樣式即在div這一行中書寫CSS樣式律歼，例如 <div style="width: 100px;height: 100px;"></div>，這樣寫的好處不會產(chǎn)生額外的數(shù)據(jù)請 ? ? ? ? ? ?求蜂嗽，使用戶等待時間減少苗膝，但是另一方面增加了代碼的堆積殃恒，不符合樣式與結(jié)構(gòu)的分離植旧，而且不利于后期維護工作。所以即使其優(yōu)點很好 ? ? ? ? ? ? 但是弊大于利离唐，在日常開發(fā)中不建議使用行間樣式
? ? ? 2.2病附、內(nèi)部樣式
? ? ? ? ? ? ? ? ? ?內(nèi)部樣式實在該HTML中的<head>里面書寫CSS樣式，例如：<style> div { width: 100px;height:100px; } </style>亥鬓，內(nèi)部樣式基于行間 ? ? ? ? ? ? ? 樣式優(yōu)點完沪，即不會產(chǎn)生額外的數(shù)據(jù)請求，而且初步實現(xiàn)樣式與結(jié)構(gòu)的分離嵌戈，但內(nèi)部樣式再好也只是放在內(nèi)部覆积，對于重復(fù)使用該樣式造成困 ? ? ? ? ? ? ? 擾。所以建議 內(nèi)部樣式一般用于單頁面網(wǎng)頁應(yīng)用熟呛。
? ? ? ?2.3宽档、外部樣式
? ? ? ? ? ? ? ? ? ?外部樣式即寫在HTML外面的樣式，使用時需要用link標(biāo)簽引入庵朝，例如<link rel="stylesheet" href="xxx.css">吗冤。外部樣式實現(xiàn)了樣式與結(jié) ? ? ? ? ? ? 構(gòu)的分離，而且方便復(fù)用九府，減少了代碼的冗余椎瘟，而且方便后期維護，?于此同時也有其弊端侄旬，即產(chǎn)生額外的請求肺蔚，但是后期我們會使用相關(guān) ? ? ? ? ? ? 工具解決該問題。所以在項目開發(fā)中建議使用外部樣式儡羔。
三宣羊、選擇器
? ? ? ?3.1、通配選擇器
? ? ? ? ? ? ? ? ?*{padding：0px} 通配選擇器作用于所有元素笔链，不論是寫的還是沒寫的段只。作用域太廣，一般不建議使用鉴扫，因為細(xì)節(jié)決定一切吧赞枕，就像剛 ? ? ? ? ? ? ? 開始學(xué)習(xí)H5會從最基礎(chǔ)的Sublime軟件開始，一步一個腳印。
? ? ? ? 3.2炕婶、標(biāo)簽名選擇器
? ? ? ? ? ? ? ?ol {list-style: none;} 標(biāo)簽名選擇器作用于一類標(biāo)簽姐赡，方式如上述例子，通過標(biāo)簽查找柠掂。一般在重置標(biāo)簽樣式的時候使用项滑。
? ? ? ? ?3.3、群組選擇器
? ? ? ? ? ? ? ?div涯贞，span {margin：10px;} 使用群組選擇器可以優(yōu)化代碼枪狂，減少文檔體積
? ? ? ? ?3.4、類選擇器
? ? ? ? ? ? ? ? ?.box {width: 100px;height: 100px;} 宋渔，類選擇器是我們最常用的一種選擇器州疾，一個元素可以有多個類名，中間用空格隔開皇拣。通常在設(shè)置相 ? ? ? ? ? ? 同樣式的元素上使用严蓖。
? ? ? ? ?3.5、子代選擇器
? ? ? ? ? ? ? ? ?div div span {padding: 100px;},子代選擇器作用于最后一個元素氧急，前面的元素用于過濾狼纬，可以實現(xiàn)快速查找梦谜。
