1.1CSS 基礎(chǔ)與選擇器初識(shí) | CSS
1. CSS 加載方式有幾種？
CSS樣式加載一共有四種方式：
1梅猿、行內(nèi)樣式
直接對(duì)HTML標(biāo)簽引入style=""設(shè)置樣式；這樣的方式會(huì)使得html不干凈微宝，代碼冗余不利于維護(hù)亲善。
<div style="border:1px red solid;">測(cè)試信息</div>
2环戈、內(nèi)嵌樣式--內(nèi)部樣式表
在head標(biāo)簽之間用<style></style>標(biāo)簽聲明
<style type="text/css">
div{margin : 0 ;padding:0;border:1px red solid;}
</style>
優(yōu)缺點(diǎn)：頁(yè)面使用公共CSS代碼，也是每個(gè)頁(yè)面都要定義的澎灸，如果一個(gè)網(wǎng)站有很多頁(yè)面，每個(gè)文件都會(huì)變大遮晚，后期維護(hù)難度也大性昭，如果文件很少，CSS代碼也不多县遣，這種樣式還是很不錯(cuò)的糜颠。
3、鏈入外部樣式表—在head部分加入
鏈接樣式使用最多萧求，推薦使用的一種方法其兴，在<head></head>標(biāo)簽之間用<link ...../>引入css文件
<link rel="stylesheet" type="text/class" href="my.css" media="all"/>
注：rel是關(guān)聯(lián)的意思，關(guān)聯(lián)的是一個(gè)樣式表(stylesheet)文檔夸政，它表示這個(gè)link在文檔初始化時(shí)將被使用元旬。
4、導(dǎo)入外部樣式表—在head部分加入
導(dǎo)入樣式和鏈接樣式比較相似守问，采用@import樣式導(dǎo)入CSS樣式表匀归，在HTML初始化時(shí)，會(huì)被導(dǎo)入到HTML或者CSS文件中耗帕，成為文件的一部分穆端，類似第二種內(nèi)嵌樣式。
<style type="text/class">
@import url(my.css);
</style>
四種CSS加載方式的優(yōu)先級(jí)
1仿便、就近原則
2体啰、理論上：行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入
3、實(shí)際上：內(nèi)嵌嗽仪、鏈接荒勇、導(dǎo)入在同一個(gè)文件頭部，誰離相應(yīng)的代碼近钦幔，誰的優(yōu)先級(jí)高
2.頁(yè)面導(dǎo)入樣式時(shí)枕屉，使用link和@import有什么區(qū)別？
（1）link屬于XHTML標(biāo)簽鲤氢，除了加載CSS外搀擂，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的卷玉，只能用于加載CSS;
（2）頁(yè)面被加載的時(shí)哨颂，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
（3）import是CSS2.1 提出的相种，只在IE5以上才能被識(shí)別威恼，而link是XHTML標(biāo)簽，無兼容問題;
3. CSS 選擇器常見的有幾種？
一箫措、基本選擇器
序號(hào) 選擇器? 含義
1.*通用元素選擇器腹备，匹配任何元素
2.E標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素
3..infoclass選擇器斤蔓，匹配所有class屬性中包含info的元素
4.#footerid選擇器植酥，匹配所有id屬性等于footer的元素
二、多元素的組合選擇器
5. E,F 多元素選擇器弦牡，同時(shí)匹配所有E元素或F元素友驮，E和F之間用逗號(hào)分隔
6. E F 后代元素選擇器，匹配所有屬于E元素后代的F元素驾锰，E和F之間用空格分隔
7. E > F 子元素選擇器卸留，匹配所有E元素的子元素F
8. E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F
三椭豫、CSS 2.1 屬性選擇器
9. E[att] 匹配所有具有att屬性的E元素耻瑟，不考慮它的值。（注意：E在此處可以省略捻悯，比如"[cheacked]"匆赃。以下同。）
10. E[att=val] 匹配所有att屬性等于"val"的E元素
11. E[att~=val] 匹配所有att屬性具有多個(gè)空格分隔的值今缚、其中一個(gè)值等于"val"的E元素
12. E[att|=val] 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值算柳、其中一個(gè)值以"val"開頭的E元素，主要用于lang屬性姓言，比如"en"瞬项、"en-us"、"en-gb"等等
四何荚、CSS 2.1中的偽類
13. E:first-child 匹配父元素的第一個(gè)子元素
14. E:link 匹配所有未被點(diǎn)擊的鏈接
15. E:visited 匹配所有已被點(diǎn)擊的鏈接
16. E:active 匹配鼠標(biāo)已經(jīng)其上按下囱淋、還沒有釋放的E元素
17. E:hover 匹配鼠標(biāo)懸停其上的E元素
18. E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
19. E:lang(c) 匹配lang屬性等于c的E元素
五、 CSS 2.1中的偽元素
20. E:first-line? 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一個(gè)字母
22. E:before 在E元素之前插入生成的內(nèi)容
23. E:after 在E元素之后插入生成的內(nèi)容
六餐塘、CSS 3的同級(jí)元素通用選擇器
24. E ~ F 匹配任何在E元素之后的同級(jí)F元素
實(shí)例：
p ~ ul { background:#ff0; }
七妥衣、CSS 3 屬性選擇器
25. E[att^="val"] 屬性att的值以"val"開頭的元素
26. E[att$="val"] 屬性att的值以"val"結(jié)尾的元素
27. E[att*="val"] 屬性att的值包含"val"字符串的元素
實(shí)例：
div[id^="nav"] { background:#ff0; }
八、CSS 3中與用戶界面有關(guān)的偽類
28. E:enabled? 匹配表單中激活的元素
29. E:disabled 匹配表單中禁用的元素
30. E:checked? 匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素
31. E::selection 匹配用戶當(dāng)前選中的元素
實(shí)例：
input[type="text"]:disabled { background:#ddd; }
九戒傻、CSS 3中的結(jié)構(gòu)性偽類
32. E:root? 匹配文檔的根元素税手，對(duì)于HTML文檔，就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n個(gè)子元素需纳，第一個(gè)編號(hào)為1
34. E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素芦倒，第一個(gè)編號(hào)為1
35. E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
36. E:nth-last-of-type(n) 與:nth-last-child() 作用類似不翩，但是僅匹配使用同種標(biāo)簽的元素
37. E:last-child 匹配父元素的最后一個(gè)子元素兵扬，等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素麻裳，等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下僅有的一個(gè)子元素器钟，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素津坑，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一個(gè)不包含任何子元素的元素，注意傲霸，文本節(jié)點(diǎn)也被看作子元素
十国瓮、CSS 3的反選偽類
43. E:not(s) 匹配不符合當(dāng)前選擇器的任何元素
實(shí)例：
:not(p) { border:1px solid #ccc; }
十一、CSS 3中的 :target 偽類
44. E:target 匹配文檔中特定"id"點(diǎn)擊后的效果
4. id 選擇器和 class 選擇器的使用場(chǎng)景分別是什么狞谱？
在一個(gè)塊或者幾個(gè)塊中使用class選擇器，而在頁(yè)面只出現(xiàn)一次的元素屬性中使用id選擇器禁漓。
5. @charset 有什么作用跟衅？
<charset>：
取值：字符編碼。如：@charset "utf-8";
在外部樣式表文件內(nèi)使用播歼。指定該樣式表使用的字符編碼伶跷。該規(guī)則后面的分號(hào)是必需的，如果省略了此分號(hào)秘狞，會(huì)生成錯(cuò)誤信息叭莫。
6. 簡(jiǎn)述 src 和 href 的區(qū)別？
href標(biāo)識(shí)超文本引用烁试，href是Hypertext
Reference
的縮寫雇初，指向網(wǎng)絡(luò)資源所在的位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接之間的鏈接）（百科：超文本是超級(jí)文本的縮寫减响。超文本鏈接可以用于各種效果靖诗。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標(biāo)或在鍵盤上按下按鍵支示，從而選擇并自動(dòng)跳轉(zhuǎn)到文檔中自己感興趣的那個(gè)主題）用在link和a等元素上刊橘，用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫颂鸿，src用于替換當(dāng)前的元素促绵，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置嘴纺；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)败晴，例如js腳本，img圖片和frame等元素
7. 偽類選擇器有哪些颖医？
偽類選擇器主要可以分為：動(dòng)態(tài)偽類選擇器位衩、UI元素狀態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器熔萧、否定偽類選擇器糖驴。
下面詳細(xì)介紹這些分類的選擇器語法：
1.動(dòng)態(tài)偽類選擇器語法
E:link（鏈接偽類選擇器）：選擇匹配的E元素僚祷，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點(diǎn)上
E:visited（鏈接偽類選擇器 ）：選擇匹配的E元素贮缕，而且匹配元素被定義了超鏈接并已被訪問過辙谜。常用于鏈接描點(diǎn)上? ?
E:active（用戶行為選擇器）：選擇匹配的E元素，且匹配元素被激活感昼。常用于鏈接描點(diǎn)和按鈕上? ?
E:hover （用戶行為選擇器）： 選擇匹配的E元素装哆，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover? ?
E:focus （用戶行為選擇器）： 選擇匹配的E元素定嗓，而且匹配元素獲取焦點(diǎn)? ?
動(dòng)態(tài)偽類選擇器可以用于超鏈接 a標(biāo)簽的應(yīng)用中：
a標(biāo)簽有4種偽類（即對(duì)應(yīng)四種狀態(tài)）,如下：
:link “鏈接”：超鏈接點(diǎn)擊之前
:visited “訪問過的”：鏈接被訪問過之后
:hover “懸屯汕伲”：鼠標(biāo)放到標(biāo)簽上的時(shí)候
:active “激活”： 鼠標(biāo)點(diǎn)擊標(biāo)簽，但是不松手時(shí)宵溅。
a標(biāo)簽的這四種偽類選擇器存在著一定的順序凌简，各個(gè)樣式之間的順序很有講究，一旦出現(xiàn)排列錯(cuò)誤就很有可能形成覆蓋恃逻，導(dǎo)致其中某個(gè)樣式無法顯示雏搂。那么a標(biāo)簽的這四種偽類選擇器需要怎樣排序才可以使用？
在 CSS 定義中寇损，a:hover 必須被置于 a:link 和 a:visited 之后凸郑，才是有效的，a:active 必須被置于 a:hover 之后矛市，才是有效的芙沥。
所以，a標(biāo)簽的這四種偽類選擇器的順序?yàn)椋篴:link 尘盼，a:visited憨愉，a:hover ，a:active
2.UI元素狀態(tài)偽類選擇器
E:checked（選中狀態(tài)偽類選擇器）：匹配選中的復(fù)選按鈕或者單選按鈕表單元素? ?
E:enabled（啟用狀態(tài)偽類選擇器 ）：匹配所有啟用的表單元素? ?
E:disabled（不可用狀態(tài)偽類選擇器）：匹配所有禁用的表單元素? ?
UI元素狀態(tài)偽類選擇器主要是針對(duì)于HTML中的Form元素進(jìn)行操作卿捎，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài)配紫，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來看兩個(gè)實(shí)例，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來先壕，你就可以這樣應(yīng)用：
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
注意：IE6-8不支持":checked",":enabled",":disabled"這三種選擇器告唆。
3.結(jié)構(gòu)偽類選擇器
E:fisrt-child ：作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同? ?
E:last-child ：作為父元素的最后一個(gè)子元素的元素E。與E:nth-last-child(1)等同? ?
E:root：選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html于个，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同? ?
E F:nth-child(n)：選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1暮顺，2厅篓，3）秀存、關(guān)鍵字（even，odd）羽氮、可以是公式（2n+1）,而且n值起始值為1或链，而不是0.? ?
E
F:nth-last-child(n)：選擇父元素E的倒數(shù)第n個(gè)子元素F。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反档押，但使用方法都是一樣的澳盐，其中：nth-last-child(1)始終匹配最后一個(gè)元素，與last-child等同
E:nth-of-type(n) ：選擇父元素內(nèi)具有指定類型的第n個(gè)E元素? ?
E:nth-last-of-type(n)：選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素? ?
E:first-of-type：選擇父元素內(nèi)具有指定類型的第一個(gè)E元素令宿，與E:nth-of-type(1)等同? ?
E:last-of-tye ：選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素叼耙，與E:nth-last-of-type(1)等同? ?
E:only-child ：選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素? ?
E:only-of-type：選擇父元素只包含一個(gè)同類型子元素粒没，且該子元素匹配E元素? ?
E:empty： 選擇沒有子元素的元素旬蟋，而且該元素也不包含任何文本節(jié)點(diǎn)? ?
結(jié)構(gòu)偽類選擇器，可以根據(jù)元素在文檔中所處的位置革娄，來動(dòng)態(tài)選擇元素，從而減少HTML文檔對(duì)ID或類的依賴冕碟，有助于保持代碼干凈整潔拦惋。
結(jié)構(gòu)偽類選擇器很容易遭到誤解，需要特別強(qiáng)調(diào)安寺。如：
p:first-child;
它表示的是：選擇父元素下的第一個(gè)子元素 p厕妖，而不是選擇 p 元素的第一個(gè)子元素。
注意：
結(jié)構(gòu)偽類選擇器中挑庶，子元素的序號(hào)是從 1 開始的言秸，也就是說，第一個(gè)子元素的序號(hào)是 1迎捺，而不是 0举畸。換句話說，當(dāng)參數(shù) n 的計(jì)算結(jié)果為 0 時(shí)凳枝，將不選擇任何元素抄沮。
4.否定偽類選擇器
E:not(F)：匹配所有除元素F外的E元素
例：對(duì)form中所有input加邊框，但又不想submit也起變化岖瑰，就可以這樣寫：
input:not([type="submit"]) {border: 1px solid red;}
8.? 偽元素和偽類的區(qū)別叛买？
偽類：用于向某些選擇器添加特殊的效果
偽元素：用于將特殊的效果添加到某些選擇器
其實(shí)根本意思就是就是對(duì)那些不能通過class、id等選擇元素的補(bǔ)充
9.選擇器的優(yōu)先級(jí)是如何計(jì)算的,當(dāng)不同類別的多個(gè)選擇器混合使用時(shí)怎么計(jì)算優(yōu)先級(jí)蹋订？
對(duì)于不同類別的選擇器率挣，以以下原則進(jìn)行排序：
1、在屬性后面使用露戒！important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式椒功。
2捶箱、作為style屬性寫在元素內(nèi)的樣式
3、id選擇器
4蛾茉、類選擇器
5讼呢、標(biāo)簽選擇器
6、通配符選擇器
7谦炬、瀏覽器自定義或子元素集成父類的樣式
將上面的稍微總結(jié)一下就是：
悦屏！important>行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)屬性
同一級(jí)別中后寫的會(huì)覆蓋先寫的樣式。
問題二：當(dāng)不同類別的多個(gè)選擇器混合使用個(gè)怎么計(jì)算優(yōu)先級(jí)键思？
有一個(gè)簡(jiǎn)單的算法础爬，設(shè)
a.內(nèi)聯(lián)樣式表的權(quán)值為1000
b.ID選擇器的權(quán)值為100
c.class類選擇器的權(quán)值為10
d.HTML標(biāo)簽選擇器的權(quán)值為1
10. 什么是 CSS 繼承？哪些屬性能繼承吼鳞，哪些不能看蚜？
一、能繼承的屬性
1. 字體系列屬性:font赔桌、font-family供炎、font-weight、font-size疾党、font-style;
2. 文本系列屬性:
（1）內(nèi)聯(lián)元素：color音诫、line-height、word-spacing雪位、letter-spacing竭钝、text-transform;
（2）塊級(jí)元素：text-indent、text-align;
3. 元素可見性：visibility
4. 表格布局屬性：caption-side雹洗、border-collapse香罐、border-spacing、empty-cells时肿、table-layout;
5. 列表布局屬性：list-style
6. 生成內(nèi)容屬性：quotes
7. 光標(biāo)屬性：cursor
8. 頁(yè)面樣式屬性：page庇茫、page-break-inside、windows螃成、orphans;
9. 聲音樣式屬性：speak港令、speech-rate、volume锈颗、voice-family顷霹、pitch、stress击吱、elevation;
二淋淀、不能繼承的屬性
1. display：規(guī)定元素應(yīng)該生成的框的類型；
2. 文本屬性：vertical-align覆醇、text-decoration;
3. 盒子模型的屬性：width朵纷、height炭臭、margin 、border袍辞、padding;
4. 背景屬性：background鞋仍、background-color、background-image;
5. 定位屬性：float搅吁、clear威创、position、top谎懦、right肚豺、bottom、left界拦、min-width吸申、min-height、max-width享甸、max-height截碴、overflow、clip;
6. 生成內(nèi)容屬性：content蛉威、counter-reset隐岛、counter-increment;
7. 輪廓樣式屬性：outline-style、outline-width瓷翻、outline-color、outline;
8. 頁(yè)面樣式屬性：size割坠、page-break-before齐帚、page-break-after;
9. 聲音樣式屬性：pause、cue彼哼、play-during;
11. 你有沒有使用過視網(wǎng)膜分辨率的圖形对妄？當(dāng)中使用什么技術(shù)？
我傾向于使用更高分辨率的圖形（顯示尺寸的兩倍）來處理視網(wǎng)膜顯示敢朱。更好的方法是使用媒體查詢剪菱，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改變background-image拴签。
對(duì)于圖標(biāo)類的圖形孝常，我會(huì)盡可能使用 svg 和圖標(biāo)字體，因?yàn)樗鼈冊(cè)谌魏畏直媛氏买玖ǎ寄鼙讳秩镜檬智逦?/p>
還有一種方法是构灸，在檢查了window.devicePixelRatio的值后，利用 JavaScript 將<img>的src屬性修改岸梨，用更高分辨率的版本進(jìn)行替換喜颁。
12. px稠氮、em、rem半开、%隔披、vw、wh寂拆、vm 有什么區(qū)別奢米？
px 就是pixel像素的縮寫，相對(duì)長(zhǎng)度單位漓库，網(wǎng)頁(yè)設(shè)計(jì)常用的基本單位恃慧。像素px是相對(duì)于顯示器屏幕分辨率而言的
em 是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸（參考物是父元素的font-size）
如當(dāng)前父元素的字體尺寸未設(shè)置渺蒿，則相對(duì)于瀏覽器的默認(rèn)字體尺寸
特點(diǎn)：
1. em的值并不是固定的痢士；
2. em會(huì)繼承父級(jí)元素的字體大小
rem 是CSS3新增的一個(gè)相對(duì)單位，rem是相對(duì)于HTML根元素的字體大忻啊（font-size）來計(jì)算的長(zhǎng)度單位
如果你沒有設(shè)置html的字體大小怠蹂，就會(huì)以瀏覽器默認(rèn)字體大小，一般是16px
優(yōu)點(diǎn)是少态，只需要設(shè)置根目錄的大小就可以把整個(gè)頁(yè)面的成比例的調(diào)好
rem兼容性：除了IE8及更早版本外城侧，所有瀏覽器均已支持rem
em與rem的區(qū)別：
rem是相對(duì)于根元素（html）的字體大小，而em是相對(duì)于其父元素的字體大小
兩者使用規(guī)則：
如果這個(gè)屬性根據(jù)它的font-size進(jìn)行測(cè)量彼妻，則使用em
其他的一切事物屬性均使用rem
這里提供了一個(gè)px嫌佑、em、rem單位的轉(zhuǎn)換工具：http://pxtoem.com/
vw侨歉、vh屋摇、vmax、vmin 這四個(gè)單位都是基于視口
vw 是相對(duì)視口（viewport）的寬度而定的幽邓，長(zhǎng)度等于視口寬度的1/100炮温，假如瀏覽器的寬度為200px，那么1vw就等于2px（200px/100）
vh 是相對(duì)視口（viewport）的高度而定的牵舵，長(zhǎng)度等于視口高度的1/100柒啤，假如瀏覽器的高度為500px，那么1vh就等于5px（500px/100）
vmin和vmax 是相對(duì)于視口的高度和寬度兩者之間的最小值或最大值
其他單位：
%（百分比）
一般來說就是相對(duì)于父元素
1畸颅、對(duì)于普通定位元素就是我們理解的父元素
2担巩、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素
3、對(duì)于position: fixed;的元素是相對(duì)于ViewPort（可視窗口）
vm
css3新單位没炒，相對(duì)于視口的寬度或高度中較小的那個(gè)
其中最小的那個(gè)被均分為100單位的vm
比如：瀏覽器高度900px兵睛，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px
缺點(diǎn)：兼容性差
常見問題：
1祖很、假如使用em來設(shè)置文字大小要注意什么笛丙？
注意父元素的字體大小，因?yàn)閑m是根據(jù)父元素的大小來設(shè)置的假颇。
比如同樣是1.5em胚鸯，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特別是在多重div嵌套里面更要注意）
2笨鸡、pc pt ch一般用在什么場(chǎng)景姜钳？
這些我們網(wǎng)頁(yè)設(shè)計(jì)基本上用不到，在排版上會(huì)有用處
3形耗、如何使 1rem=10px
在設(shè)置HTML{font-size：62.5%哥桥；}即可
4、如果父元素沒有指定高度激涤，那么子元素的百分比的高度是多少拟糕？
會(huì)按照子元素的實(shí)際高度，設(shè)置百分比則沒有效果
13. 塊級(jí)元素和行內(nèi)元素分別有哪些倦踢？空（void）元素有那些送滞？塊級(jí)元素和行內(nèi)元素有什么區(qū)別？
行內(nèi)元素有：a b span img input select strong
塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
空元素：br hr img input? link meta
區(qū)別：
1.行內(nèi)元素與塊級(jí)函數(shù)可以相互轉(zhuǎn)換辱挥，通過修改display屬性值來切換塊級(jí)元素和行內(nèi)元素犁嗅，行內(nèi)元素display：inline，塊級(jí)元素display：block晤碘。
2.行內(nèi)元素和其他行內(nèi)元素都會(huì)在一條水平線上排列褂微，都是在同一行的；塊級(jí)元素卻總是會(huì)在新的一行開始排列园爷，各個(gè)塊級(jí)元素獨(dú)占一行宠蚂，垂直向下排列，若想使其水平方向排序腮介，可使用左右浮動(dòng)（float：left/right）讓其水平方向排列。
3.行內(nèi)元素不可以設(shè)置寬高端衰，寬度高度隨文本內(nèi)容的變化而變化叠洗，但是可以設(shè)置行高（line-height），同時(shí)在設(shè)置外邊距margin上下無效旅东，左右有效灭抑，內(nèi)填充padding上下無效，左右有效抵代；塊級(jí)元素可以設(shè)置寬高腾节，并且寬度高度以及外邊距，內(nèi)填充都可隨意控制。????????
4.塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素案腺，還可以容納內(nèi)聯(lián)元素和其他元素庆冕；行內(nèi)元素不能包含塊級(jí)元素，只能容納文本或者其他行內(nèi)元素劈榨。
14. IE 盒模型和 W3C 盒模型有什么區(qū)別?
從上圖可以看到標(biāo)準(zhǔn) W3C 盒子模型的范圍包括 margin访递、border、padding同辣、content拷姿，并且 content 部分不包含其他部分。
從上圖可以看到 IE 盒子模型的范圍也包括 margin旱函、border响巢、padding、content棒妨，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading踪古。
15. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并靶衍？如何不讓相鄰元素外邊距合并灾炭？給個(gè)父子外邊距合并的范例？
合并外邊距的場(chǎng)景：
外邊距合并的必備條件：margin必須是鄰接的
兩個(gè)margin是鄰接的必需滿足以下條件：
1颅眶、必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子蜈出，并且處于同一個(gè)BFC當(dāng)中
2、沒有線盒涛酗，沒有空隙铡原，沒有padding和border將他們分隔開
3、都屬于垂直方向上相鄰的外邊距商叹，可以是下面任意一種情況：
<1>:元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top
<2>:元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top
<3>:height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom
<4>:高度為0并且最小高度也為0燕刻，不包含常規(guī)文檔流的子元素，并且自身沒有建立斤的BFC的元素的margin-top和margin-bottom
合并規(guī)則:
一個(gè)常規(guī)文檔流元素的margin-bottom與它下一個(gè)常規(guī)文檔流的兄弟元素的margin-top會(huì)合并剖笙，除非它們之間存在clearance
一個(gè)常規(guī)文檔流元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top產(chǎn)生合并卵洗，條件為父元素不包含padding和border,子元素不包含clearance
一個(gè)’height’為’auto’并且’min-height’為0的常規(guī)文檔流元素的margin-bottom會(huì)與其最后一個(gè)常規(guī)文檔流子元素的margin-bottom合并，條件為父元素不包含padding和border,子元素的margin-bottom不與保護(hù)clearance的margin-top合并
一個(gè)不包含boder-top弥咪、border-bottom过蹂、padding-top、padding-bottom的常規(guī)文檔流元素聚至，并且其’height’為0或’auto’,’min-height’為’0’,其里面也不包含line
box,其自身的margin-top和margin-bottom會(huì)合并
創(chuàng)建了新的BFC的元素（例如浮動(dòng)元素或者’overflow’值為’visible’以外的元素）與它的子元素的外邊距不會(huì)合并
浮動(dòng)元素不與任何元素的外邊距產(chǎn)生合并（包括其父元素和子元素）
絕對(duì)定位元素不與任何元素的外邊距產(chǎn)生合并
inline-block元素不與任何元素的外邊距產(chǎn)生合并
合并后margin計(jì)算規(guī)則
兄弟元素
父子元素
空元素
以上三種混合
父子外邊距合并范例
1.2CSS 基本視覺格式化：② “行內(nèi)盒子”格式化 | CSS
1. line-height: 2; 和 line-height: 200%; 有什么區(qū)別?
line-height: 2? 表示單行文本的行高為它本身的兩倍
line-height: 200% 表示單行文本的行高為系統(tǒng)默認(rèn)字體的200%
在繼承性上：
對(duì)父元素設(shè)置了line-height: 2后酷勺，父元素的子元素會(huì)繼承l(wèi)ine-height: 2這個(gè)屬性，子元素的行高都是自身高度的2倍扳躬，是相對(duì)大小脆诉，子元素的字體大小不同甚亭，行高也會(huì)不同；
對(duì)父元素設(shè)置了line-height: 200%后击胜，父元素的子元素會(huì)繼承系統(tǒng)默認(rèn)字體的200%亏狰，是一個(gè)固定的值，是固定大小潜的，子元素的字體大小不同骚揍，行高都是固定某個(gè)值；
2. 行內(nèi)元素的“邊框”啰挪、“邊界”等“框?qū)傩浴笔怯?font-size 還是 line-height 控制信不？
行內(nèi)元素的邊框邊界由font-size而不是line-height控制
3. height=line-height 可以用來垂直居中單行文本？代碼怎么實(shí)現(xiàn)亡呵？
line-height與font-size的計(jì)算值之差（也就是兩行的“行間距”）分為兩半抽活，分別加到一個(gè)文本行內(nèi)容的頂部和底部。所以當(dāng)我們?cè)O(shè)置單行文本的line-height為所需要box的高度锰什，即可實(shí)現(xiàn)垂直居中對(duì)齊下硕。
4. inline-block 有什么特性卿啡？inline-block 在實(shí)際工作中有什么作用绵疲？
既呈現(xiàn) inline 特性(不占據(jù)一整行，寬度由內(nèi)容寬度決定)
又呈現(xiàn) block 特性 (可設(shè)置寬高屠升，內(nèi)外邊距)
默認(rèn)情況下嫩码，inline-block元素之間就有空隙出現(xiàn)
可以用于左右布局誉尖。
5. 怎么去除兩個(gè)按鈕中間的縫隙問題？
1.改變HTML結(jié)構(gòu)铸题，input之間不要換行
2.給第一個(gè)input添加左浮動(dòng)
6. 一個(gè)頁(yè)面有一排高度不一樣的產(chǎn)品圖铡恕，這時(shí)如果我們用 inline-block ，怎樣使他們“頂端對(duì)齊”丢间？
設(shè)置css屬性 vertical-align:top;
1.3CSS 給盒子探熔、背景、鏈接烘挫、列表诀艰、表單、表格等加樣式 | CSS
1. 讓一個(gè)元素“看不見”有幾種方式饮六？有什么區(qū)別其垄？
最常用的兩種方式：
display：none，這種方式可以使元素徹底從文檔中刪除喜滨，會(huì)造成瀏覽器的回流與重繪
visibility：hidden捉捅，元素會(huì)從頁(yè)面中消失撤防，它原本占據(jù)的空間會(huì)被保留虽风，會(huì)造成瀏覽器的重繪棒口，適用于希望元素隱藏又不影響頁(yè)面布局的場(chǎng)景，但是該屬性會(huì)被子元素繼承辜膝，所以若不希望子元素隱藏无牵，還需在子元素中設(shè)置visibility：visible。
不太推薦使用的方法：
opacity：0
opacity屬性表示元素的透明度厂抖，而將元素的透明度設(shè)置為0后茎毁，在我們用戶眼中，元素也是隱藏的忱辅，這算是一種隱藏元素的方法七蜘。但是它仍然存在與頁(yè)面中。
盒模型屬性設(shè)置為0
如果元素內(nèi)有子元素或內(nèi)容墙懂，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素橡卤。
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
設(shè)置元素絕對(duì)定位將元素移出屏幕
.box1 {
position: absolute;
left: 100%;
}
或
.box1 {
position: absolute;
top: 9999px;
}
text-indent，一般首行縮2個(gè)中文字的用法是text-indent:2em损搬。但當(dāng)給他一個(gè)足夠大的負(fù)值碧库，大到我們?yōu)g覽器無法顯示。如text-indent:-999em巧勤。
2. 單行文本溢出加 ... 如何實(shí)現(xiàn)嵌灰？
如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽颅悉。
實(shí)現(xiàn)方法：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果如圖：
但是這個(gè)屬性只支持單行文本的溢出顯示省略號(hào)沽瞭，如果我們要實(shí)現(xiàn)多行文本溢出顯示省略號(hào)呢。
接下來重點(diǎn)說一說多行文本溢出顯示省略號(hào)签舞，如下秕脓。
實(shí)現(xiàn)方法：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
效果如圖：
適用范圍：
因使用了WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端儒搭；
注：
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)吠架。?為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性搂鲫。常見結(jié)合屬性：
display:?-webkit-box;?必須結(jié)合的屬性?傍药，將對(duì)象作為彈性伸縮盒子模型顯示?。
-webkit-box-orient?必須結(jié)合的屬性?魂仍，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式?拐辽。
實(shí)現(xiàn)方法：
p{position:relative;line-height:20px;max-height:40px;overflow:hidden;}p::after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px;background:-webkit-linear-gradient(left,transparent,#fff?55%);background:-o-linear-gradient(right,transparent,#fff?55%);background:-moz-linear-gradient(right,transparent,#fff?55%);background:linear-gradient(to?right,transparent,#fff?55%);}
3. 如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
三種解決方案： html標(biāo)簽擦酌、css實(shí)現(xiàn)俱诸、 純js實(shí)現(xiàn)
方案一：
定義一個(gè)客戶端圖像映射。圖像映射（image-map）指帶有可點(diǎn)擊區(qū)域的一幅圖像赊舶。
<img
src="task6.jpg" width="1366" height="768" border="0"
usemap="#Map"/><map name="Map" id="Map"><area shape="circle"
coords="100,100,50" /></map>
方案二：
<style>?
.disc{?
? ?? width:100px;?
? ?? height:100px;?
? ?? background-color:dimgray;?
? ?? border-radius: 50%;?
? ?? cursor: pointer;?
? ?? position: absolute;?
? ?? left:50px;?
? ?? top:50px;? ?
? ?? line-height: 100px;?
? ?? text-align: center;?
? ?? color: white;}</style><div class="disc">點(diǎn)擊區(qū)域</div>
方案三：
? ? ? ? ? ? varr = 50;//圓的半徑varx1 = 100,? y1 = 100;?
? ? ? ? ? ? varx2 = e.clientX,
? ? ? ? ? ? ? ? y2 = e.clientY;
? ? ? ? ? ? varlen=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));?
? ? ? ? ? ? if(len<=50){
? ? ? ? ? ? ? ? console.log("Inner");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? console.log("Outer");
? ? ? ? ? ? }
? ? ? ? }
1.4讓“盒子”動(dòng)起來：② “定位”和 BFC | CSS
1. 有幾種定位方式睁搭？分別是如何實(shí)現(xiàn)定位的赶诊？參考點(diǎn)是什么？使用場(chǎng)景是什么园骆？
position: relative? 相對(duì)定位 相對(duì)于元素的正常位置進(jìn)行定位舔痪；參考點(diǎn)為元素原來的位置；在使用相對(duì)定位時(shí)锌唾，無論是否進(jìn)行移動(dòng)锄码，元素在文檔流中仍然占據(jù)原來的空間，只是表現(xiàn)出來的位置會(huì)改變晌涕；
position: absolute? 絕對(duì)定位 相對(duì)于static（默認(rèn)值滋捶，沒有定位）以外的第一個(gè)父元素進(jìn)行定位；參考點(diǎn)為第一個(gè)父元素余黎；根據(jù)定位點(diǎn)的padding進(jìn)行偏移炬太；不占據(jù)文檔空間，普通流中的元素布局就像絕對(duì)定位元素不存在驯耻；
position: fixed? 固定定位 相對(duì)于瀏覽器窗口進(jìn)行定位亲族；參考點(diǎn)為瀏覽器窗口；固定定位的元素也不包含在文檔流中可缚；
position: sticky?CSS3新屬性霎迫，表現(xiàn)類似relative和fixed的集合體，目標(biāo)區(qū)域在屏幕可見時(shí)帘靡，它的行為像position: relative知给，當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的行為像position: fixed描姚。
2. z-index 有什么作用涩赢？如何使用？
可以解決元素的覆蓋問題轩勘，決定那個(gè)元素在上方筒扒，哪一個(gè)在下方；
z-index的值可以是負(fù)數(shù)绊寻，也可以為0花墩，也可以無群大，數(shù)值大的在上方澄步；
z-index父元素設(shè)置的值權(quán)重比較大冰蘑，當(dāng)兩個(gè)父元素相比的時(shí)候，父元素起決定作用村缸，其中的子元素設(shè)置多大都沒有用祠肥；
相同z-index誰上誰下
1.如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序梯皿，后面的覆蓋前面的仇箱。
2.如果兩個(gè)元素都沒有設(shè)置z-index聋丝，使用默認(rèn)值，一個(gè)定位一個(gè)沒有定位工碾，那么定位元素覆蓋未定位元素
父子關(guān)系處理
1.如果父元素z-index有效，那么子元素?zé)o論是否設(shè)置z-index都和父元素一致百姓，會(huì)在父元素上方
2.如果父元素z-index失效（未定位或者使用默認(rèn)值）渊额，那么定位子元素的z-index設(shè)置生效
兄弟之間子元素
如果兄弟元素的z-index生效，那么其子元素覆蓋關(guān)系由父元素決定
3. BFC 是什么垒拢？如何生成 BFC旬迹？BFC 有什么作用？舉例說明求类。
1奔垦，什么是BFC？
1）BFC(Block formatting context)直譯為“塊級(jí)格式化上下文”尸疆。BFC它是一個(gè)獨(dú)立的渲染區(qū)域椿猎，只有Block-level box（塊元素）參與，它規(guī)定了內(nèi)部的Block-level box如何布局寿弱，并且與這個(gè)區(qū)域外部毫不相關(guān)犯眠。
2）可以理解成：創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，里面的子元素不會(huì)在布局上影響外面的元素（里面怎么布局都不會(huì)影響外部）症革，BFC仍屬于文檔中的普通流
3）不是所有的元素筐咧，模式都能產(chǎn)生BFC 。w3c規(guī)范：display屬性為block, list-item ,table的元素噪矛，會(huì)產(chǎn)生BFC量蕊。
2，BFC的原理是什么艇挨？
1）內(nèi)部的Box會(huì)在垂直方向残炮，一個(gè)接一個(gè)地放置。
2）Box垂直方向的距離由margin決定缩滨。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
3）每個(gè)元素的margin box的左邊吉殃， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)楷怒。即使存在浮動(dòng)也是如此蛋勺。
4）BFC的區(qū)域不會(huì)與float box重疊。
5）BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器鸠删，容器里面的子元素不會(huì)影響到外面的元素抱完。反之也如此。
6）計(jì)算BFC的高度時(shí)刃泡，浮動(dòng)元素也參與計(jì)算
3巧娱，如何創(chuàng)建BFC?
1）根元素
2）float屬性不為none
3）position不為static和relative
4）overflow不為visible
5）display為inline-block, table-cell, table-caption, flex, inline-flex
4,BFC作用碉怔？
1）防止外邊距重疊。
bfc導(dǎo)致的屬于同一個(gè)bfc中的子元素的margin重疊(Box垂直方向的距離由margin決定禁添。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊)
我們可以在div外面包裹一層容器撮胧，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)div便不屬于同一個(gè)BFC老翘，就不會(huì)發(fā)生margin重疊了芹啥。
2）清除浮動(dòng)的影響
塊級(jí)子元素浮動(dòng)，如果塊級(jí)父元素沒有設(shè)置高度铺峭，其會(huì)有高度塌陷的情況發(fā)生墓怀。
原因：子元素浮動(dòng)后，均開啟了BFC卫键，父元素不會(huì)被子元素?fù)伍_傀履。
解決方法：由第六條原理得，計(jì)算BFC的高度時(shí)莉炉，浮動(dòng)元素也參與計(jì)算钓账。所以只要將父容器設(shè)置為bfc
就可以把子元素包含進(jìn)去：這個(gè)容器將包含浮動(dòng)的子元素，它的高度將擴(kuò)展到可以包含它的
子元素絮宁，在這個(gè)BFC官扣，這些元素將會(huì)回到頁(yè)面的常規(guī)文檔流。
3）防止文字環(huán)繞
5. 浮動(dòng)元素有什么特征羞福？對(duì)父容器惕蹄、其他浮動(dòng)元素、普通元素治专、文字分別有什么影響卖陵？
特征：
浮動(dòng)元素會(huì)脫離正常的文檔流，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示
浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊张峰，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊
float造成的影響：
1泪蔫、對(duì)其父元素的影響
對(duì)于其父元素來說，元素浮動(dòng)之后喘批，它脫離當(dāng)前正常的文檔流撩荣，所以它也無法撐開其父元素，造成父元素的塌陷
2饶深、對(duì)其兄弟元素（非浮動(dòng)）的影響
如果兄弟元素為塊級(jí)元素餐曹，該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置，并且元素會(huì)處在浮動(dòng)元素的下層（并且無法通過z-index屬性改變他們的層疊位置）敌厘，但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素台猴。
如果如果兄弟元素為內(nèi)聯(lián)元素，則元素會(huì)環(huán)繞浮動(dòng)元素排列。
3饱狂、對(duì)其兄弟元素（浮動(dòng)）的影響
同一個(gè)方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)曹步，它會(huì)緊跟在它們后面
反方向的浮動(dòng)元素：互不影響，位于同一條水平線上休讳，當(dāng)空間不夠時(shí)會(huì)被擠下
4讲婚、對(duì)子元素的影響
當(dāng)一個(gè)元素浮動(dòng)時(shí)，在沒有清除浮動(dòng)的情況下俊柔，它無法撐開其父元素筹麸，但它可以讓自己的浮動(dòng)子元素?fù)伍_它自身，并且在沒有定義具體寬度情況下婆咸，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動(dòng)元素display:block）。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值芜辕。
6. 清除浮動(dòng)指什么尚骄？如何清除浮動(dòng)？?jī)煞N以上方法侵续。
在非IE瀏覽器（如Firefox）下倔丈，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素状蜗，在這種情況下需五，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象轧坎。這個(gè)現(xiàn)象叫浮動(dòng)溢出宏邮，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)缸血。
清除浮動(dòng)方法：
1蜜氨、使用帶clear屬性的空元素
在浮動(dòng)元素后使用一個(gè)空元素如
，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)捎泻。亦可使用
或
來進(jìn)行清理飒炎。
2、使用CSS的overflow屬性
給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)笆豁，另外在
IE6 中還需要觸發(fā) hasLayout 郎汪，例如為父元素設(shè)置容器寬高或設(shè)置
zoom:1。在添加overflow屬性后闯狱，浮動(dòng)元素又回到了容器層煞赢，把容器高度撐起，達(dá)到了清理浮動(dòng)的效果哄孤。
3耕驰、給浮動(dòng)的元素的容器添加浮動(dòng)
給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)，影響布局朦肘，不推薦使用饭弓。
4、使用鄰接元素處理
什么都不做媒抠，給浮動(dòng)元素后面的元素添加clear屬性弟断。
5、方法五：使用CSS的:after偽元素
給浮動(dòng)元素的容器添加一個(gè)clearfix的class趴生，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見的塊元素（Block element）清理浮動(dòng)阀趴。
需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout苍匆。
總結(jié)
利用 clear屬性刘急，清除浮動(dòng)
使父容器形成BFC
BFC清理浮動(dòng)
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block|flex|inline-flex
position為 absolute|fixed
我們可以對(duì)父容器添加這些屬性來形成BFC達(dá)到“清浮動(dòng)”效果
通用的清理浮動(dòng)法案
.clearfix{
*zoom:1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
7. 可以通過哪些方法優(yōu)化 CSS3 Animation 渲染？
1浸踩、盡可能多的利用硬件能力叔汁，如使用3D變形來開啟GPU加速：
比如代碼：
-webkit-transform:?translate3d(0,?0,?0);
-moz-transform:?translate3d(0,?0,?0);
-ms-transform:?translate3d(0,?0,?0);
transform:?translate3d(0,?0,?0);
一個(gè)元素通過translate3d右移500px的動(dòng)畫流暢度會(huì)明顯優(yōu)于使用left屬性；
原因：CSS動(dòng)畫屬性會(huì)觸發(fā)整個(gè)頁(yè)面的重排relayout检碗、重繪repaint据块、重組recomposite
Paint通常是其中最花費(fèi)性能的，盡可能避免使用觸發(fā)paint的CSS動(dòng)畫屬性折剃，這也是為什么我們推薦在CSS動(dòng)畫中使用webkit-transform:
translateX(3em)的方案代替使用left:
3em另假，因?yàn)閘eft會(huì)額外觸發(fā)layout與paint，而webkit-transform只觸發(fā)整個(gè)頁(yè)面composite（這也是為什么推薦在CSS動(dòng)畫中使用webkit-transform:
translateX(500px)的方案代替使用left: 500px）怕犁；
如動(dòng)畫過程有閃爍（通常發(fā)生在動(dòng)畫開始的時(shí)候）边篮，可以嘗試下面的Hack：
-webkit-backface-visibility:?hidden;
-moz-backface-visibility:?hidden;
-ms-backface-visibility:?hidden;
backface-visibility:?hidden;
-webkit-perspective:?1000;
-moz-perspective:?1000;
-ms-perspective:?1000;
perspective:?1000;
2、盡可能少的使用box-shadows與gradients
box-shadows與gradients往往都是頁(yè)面的性能殺手奏甫，尤其是在一個(gè)元素同時(shí)都使用了它們.
盡可能的讓動(dòng)畫元素不在文檔流中苟耻，以減少重排
position:?fixed;
position:?absolute;
我們一起來看下CSS3動(dòng)畫其中一些屬性性能消耗圖：
性能消耗圖，由此可見最受歡飲和性能最好的莫過于transform和opacity了扶檐。
以上只是總結(jié)了2點(diǎn)關(guān)于性能優(yōu)化凶杖，后來參閱了一些其他的文章和自己的研究發(fā)現(xiàn)：現(xiàn)代瀏覽器在使用CSS3動(dòng)畫時(shí)，以下四種情形繪制的效率較高（包含了以上2種）款筑。
* 改變位置
* 改變大小
* 旋轉(zhuǎn)
* 改變透明度
8. 如何讓塊級(jí)元素水平居中智蝠？如何讓行內(nèi)元素水平居中？如何讓 inline-block 元素水平居中奈梳？
CSS設(shè)置行內(nèi)元素的水平居中
div{text-align:center} /DIV內(nèi)的行內(nèi)元素均會(huì)水平居中/
CSS設(shè)置行內(nèi)元素的垂直居中
div{height:30px; line-height:30px} /DIV內(nèi)的行內(nèi)元素均會(huì)垂直居中/
PS:當(dāng)然杈湾，如果既要水平居中又要垂直居中，那么綜合一下
div{text-align:center; height:30px; line-height:30px}
CSS設(shè)置塊級(jí)元素的水平居中
div p{margin:0 auto; width:500px} /塊級(jí)元素p一定要設(shè)置寬度攘须，
才能相當(dāng)于DIV父容器水平居中/
CSS設(shè)置塊級(jí)元素的垂直居中
div{width:500px} /DIV父容器設(shè)置寬度/
div p{margin:0 aut0; height:30px; line-height:30px} /塊級(jí)元素p也可以加個(gè)寬度漆撞，
以達(dá)到相對(duì)于DIV父容器的水平居中效果/
inline-block元素水平居中
對(duì)其父元素添加 text-align:center;
9. 垂直上下居中的辦法？
絕對(duì)定位方法：不確定當(dāng)前div的寬度和高度，采用transform:translate(-50%,-50%); 當(dāng)前div的父級(jí)添加相對(duì)定位（position: relative;）
div{
????background:red;
????position: absolute;
????left:50%;
????top:50%;
????transform: translate(-50%, -50%);
}
絕對(duì)定位方法：確定了當(dāng)前div的寬度浮驳，margin值為當(dāng)前div寬度一半的負(fù)值
div{
????width:600px;
????height: 600px;
????background:red;
????position: absolute;
????left:50%;
????top:50%;
????margin-left:-300px;
????margin-top:-300px;
}
絕對(duì)定位方法：絕對(duì)定位下top left right bottom 都設(shè)置0
<divclass="child">我是子級(jí)</div>
/**css**/
div.child{
????width: 600px;
????height: 600px;
????background: red;
????position:absolute;
????left:0;
????top: 0;
????bottom: 0;
????right: 0;
????margin: auto;
}
flex布局方法：當(dāng)前div的父級(jí)添加flex css樣式
????<divclass="child">child</div>
</div>
.box{
????height:800px;
????-webkit-display:flex;
????display:flex;
????-webkit-align-items:center;
????align-items:center;
????-webkit-justify-content:center;
????justify-content:center;
????border:1px solid #ccc;
}
div.child{
????width:600px;
????height:600px;
????background-color:red;
}
table-cell實(shí)現(xiàn)水平垂直居中:?table-cell middle center組合使用
<divclass="table-cell">
????<p>我愛你</p>
</div>
.table-cell {
????display: table-cell;
????vertical-align: middle;
????text-align: center;
????width: 240px;
????height: 180px;
????border:1px solid #666;
}
10.響應(yīng)式布局原理悍汛？
響應(yīng)式布局的實(shí)現(xiàn)可以通過媒體查詢+px,媒體查詢+百分比，媒體查詢+rem+js,vm/vh,vm/vh
+rem這幾種方式來實(shí)現(xiàn)至会。但每一種方式都是有缺點(diǎn)的离咐，媒體查詢需要選取主流設(shè)備寬度尺寸作為斷點(diǎn)針對(duì)性寫額外的樣式進(jìn)行適配，但這樣做會(huì)比較麻煩奉件，只能在選取的幾個(gè)主流設(shè)備尺寸下呈現(xiàn)完美適配宵蛀，另外用戶體驗(yàn)也不友好，布局在響應(yīng)斷點(diǎn)范圍內(nèi)的分辨率下維持不變县貌，而在響應(yīng)斷點(diǎn)切換的瞬間术陶，布局帶來斷層式的切換變化，如同卡帶的唱機(jī)般“咔咔咔”地一下又一下煤痕。通過百分比來適配首先是計(jì)算麻煩梧宫，第二各個(gè)屬性中如果使用百分比，其相對(duì)的元素的屬性并不是唯一的杭攻，這樣就造成我們使用百分比單位容易使布局問題變得復(fù)雜祟敛。通過采用rem單位的動(dòng)態(tài)計(jì)算的彈性布局疤坝，則是需要在頭部?jī)?nèi)嵌一段腳本來進(jìn)行監(jiān)聽分辨率的變化來動(dòng)態(tài)改變根元素字體大小兆解，使得CSS與JS
耦合了在一起。通過利用純css視口單位實(shí)現(xiàn)適配的頁(yè)面跑揉，是既能解決響應(yīng)式斷層問題锅睛，又能解決腳本依賴的問題的，但是兼容性還沒有完全能結(jié)構(gòu)接受历谍。
舉例：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
11. 如何使用偽元素來清除浮動(dòng)现拒？
代碼 #content:after{content:"";display:block;clear:both;}
1.5讓這些“展示”有更好的擴(kuò)展性——媒體查詢 | CSS
1. 列舉你了解的 HTML5、CSS3 新特性躺苦？
1.HTML5?新元素
<article>定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域辱姨。
<aside>定義頁(yè)面的側(cè)邊欄內(nèi)容浩姥。
<footer>定義?section?或?document?的頁(yè)腳。
<header>定義了文檔的頭部區(qū)域
<nav>定義導(dǎo)航鏈接的部分侥猬。
<audio> 音頻元素
<video> 視頻元素
2.HTML5 Web?存儲(chǔ)
?Web Storage DOM API 為Web應(yīng)用提供了一個(gè)能夠替代cookie的Javascript解決方案
sessionStorage—客戶端數(shù)據(jù)存儲(chǔ)，只能維持在當(dāng)前會(huì)話范圍內(nèi)捐韩。
? ? ? ? ? ? ?sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)退唠。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除荤胁。
localStorage—客戶端數(shù)據(jù)存儲(chǔ)瞧预，能維持在多個(gè)會(huì)話范圍內(nèi)。
? ? ? ? ? ? ?localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天垢油、第二周或下一年之后盆驹，數(shù)據(jù)依然可用。
CSS3
CSS3?邊框秸苗，你可以創(chuàng)建圓角邊框召娜，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序
border-image設(shè)置所有邊框圖像的速記屬性惊楼。
border-radius一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性
box-shadow附加一個(gè)或多個(gè)下拉框的陰影
CSS3中包含幾個(gè)新的背景屬性玖瘸，提供更大背景元素
background-clip規(guī)定背景的繪制區(qū)域。
background-origin規(guī)定背景圖片的定位區(qū)域檀咙。
background-size規(guī)定背景圖片的尺寸雅倒。
CSS3 定義了兩種類型的漸變（gradients）
CSS3?轉(zhuǎn)換和變形
transform適用于2D或3D轉(zhuǎn)換的元素
CSS3?過渡transition
CSS3?動(dòng)畫?要?jiǎng)?chuàng)建CSS3動(dòng)畫，你需要了解@keyframes規(guī)則弧可。@keyframes規(guī)則是創(chuàng)建動(dòng)畫蔑匣。 @keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。
CSS3?盒模型
在 CSS3 中, 增加了一些新的用戶界面特性來調(diào)整元素尺寸棕诵，框尺寸和外邊框裁良，主要包括以下用戶界面屬性：
resize：none | both | horizontal | vertical | inherit
box-sizing: content-box | border-box | inherit
outline:outline-color outline-style outline-width outine-offset
2. Canvas 和 SVG 有什么區(qū)別？
Canvas 和 SVG 都允許您在瀏覽器中創(chuàng)建圖形校套，但是它們?cè)诟旧鲜遣煌摹?/p>
Canvas
描述：
通過Javascript來繪制2D圖形价脾。
是逐像素進(jìn)行渲染的。
其位置發(fā)生改變笛匙，會(huì)重新進(jìn)行繪制侨把。
SVG
描述：
一種使用XML描述的2D圖形的語言
SVG基于XML意味著，SVG DOM中的每個(gè)元素都是可用的妹孙，可以為某個(gè)元素附加Javascript事件處理器秋柄。
在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象蠢正。如果 SVG 對(duì)象的屬性發(fā)生變化骇笔，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
比較
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲嚣崭，其中的許多對(duì)象會(huì)被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
不適合游戲應(yīng)用
參考：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
1.6CSS 拓展：① 瀏覽器兼容 | CSS
1. 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)分別是什么意思笨触？
漸進(jìn)增強(qiáng) ：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能有鹿，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果旭旭、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能葱跋，然后再針對(duì)低版本瀏覽器進(jìn)行兼容持寄。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始源梭，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非成晕叮基礎(chǔ)的废麻，能夠起作用的版本開始，并不斷擴(kuò)充模庐，以適應(yīng)未來環(huán)境的需要烛愧。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看掂碱，同時(shí)保證其根基處于安全地帶怜姿。
2. 什么是 CSS Hack？在哪個(gè)網(wǎng)站查看標(biāo)簽（屬性）的瀏覽器兼容情況疼燥？
由于不同廠商的瀏覽器沧卢，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本醉者，如IE6和IE7但狭，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣撬即，得不到我們所需要的頁(yè)面效果立磁。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果剥槐。
3. IE6唱歧、7 的 Hack 寫法是？
常見hack寫法
.box{
? color: red;
? _color: blue; /*ie6*/
? *color: pink; /*ie67*/
? color: yellow\9;? /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
4. 盡可能多的列舉瀏覽器兼容的處理范例才沧？
.clearfix:after{
? content: '';
? display: block;
? clear: both;
}
.clearfix{
? *zoom: 1; /* 僅對(duì)ie67有效 */
}
.target{
? display: inline-block;
? *display: inline;
? *zoom: 1;
}
<!--[if lt IE 9]>
? ? <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
? ? <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
? <![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>? ? <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>? ? <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if
(gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html
dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
5. CSS Reset 是什么迈喉？CSS 預(yù)編譯器是什么绍刮？后編譯器（PostCSS）是什么温圆？
css reset 即重置瀏覽器標(biāo)簽的樣式表，現(xiàn)在所使用的主流瀏覽器對(duì)一些標(biāo)簽的默認(rèn)屬性上并沒有做到統(tǒng)一孩革，所以我們偶爾會(huì)發(fā)現(xiàn)岁歉，某個(gè)頁(yè)面在chrome瀏覽器上很正常，到了firefox上面卻有意想不到的偏差膝蜈。當(dāng)然編程人員不喜歡這樣的兼容性問題的锅移，而reset.css就是解決默認(rèn)樣式不兼容問題的辦法之一。
CSS 預(yù)處理器定義了一種新的語言饱搏，其基本思想是非剃，用一種專門的編程語言，為 CSS 增加了一些編程的特性推沸，將 CSS 作為目標(biāo)生成文件备绽，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作券坞。
CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”肺素，例如你可以在 CSS 中使用變量恨锚、簡(jiǎn)單的邏輯程序、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性倍靡，可以讓你的 CSS 更加簡(jiǎn)潔猴伶、適應(yīng)性更強(qiáng)、可讀性更佳塌西，更易于代碼的維護(hù)等諸多好處他挎。
目前主流的預(yù)處理器里最常用的三種有：Sass，Less 捡需，Stylus 雇盖。
PostCSS是一個(gè)使用JavaScript插件來轉(zhuǎn)換CSS的工具。它將CSS轉(zhuǎn)換成抽象語法樹(AST)栖忠，也就是JavaScript可以操作的一種數(shù)據(jù)形式崔挖。基于JavaScript的PostCSS插件可以執(zhí)行不同的代碼操作庵寞。PostCSS本身并沒有改變你的CSS狸相，它請(qǐng)?jiān)试S插件執(zhí)行和轉(zhuǎn)換你的代碼。
實(shí)際上捐川，對(duì)于CSS的操作脓鹃，PostCSS插件并沒有任何限制。只要你有想得到的古沥，你都可以寫一個(gè)PostCSS插件來實(shí)現(xiàn)瘸右。
6. CSS Reset 和 Normalize.css 有什么區(qū)別？
作用：
Reset CSS和Normalize CSS都是重置瀏覽器自帶樣式岩齿。
區(qū)別：
reset的目的太颤，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性盹沈。
normalize 的理念則是盡量保留瀏覽器的默認(rèn)樣式龄章，不進(jìn)行太多的重置。
最主要的區(qū)別是Normalize.css保留不同瀏覽器同標(biāo)簽相同的默認(rèn)值乞封，只重置不同默認(rèn)樣式的差異做裙，可以說css reset的高級(jí)版。
相對(duì)于普通的css reset肃晚，Normalize的的瀏覽器的兼容性更好锚贱，normalize.css支持更多的瀏覽器（包括手機(jī)端）
根據(jù)官網(wǎng)的定義： normalize.css是一個(gè)現(xiàn)代的，為HTML5準(zhǔn)備的reset.css的替代品关串。它可以使元素的渲染在多個(gè)瀏覽器下都能保持一致并且符合規(guī)范拧廊。它所瞄準(zhǔn)的杂穷，也都是些需要規(guī)范化的樣式。
Normalize.css的目標(biāo)
1卦绣、保留有用的瀏覽器默認(rèn)樣式耐量，而不是一概將它們“抹殺”。
2滤港、normalize.css作用在范圍更廣的元素上面廊蜒。
3、修正了一些bug及主流瀏覽器在渲染上的不一致溅漾。
4山叮、提高了可用性。
5添履、用更加詳細(xì)的文檔及注釋來解釋代碼的含義屁倔。
7. 盡可能多的寫出瀏覽器兼容性問題？
1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)赌弘省（margin）和內(nèi)補(bǔ)度窠琛（padding）不同
解決方案：css里增加通配符*{margin：0；padding：0}
2.IE6雙邊距問題往衷；在IE6中設(shè)置了float钞翔，同時(shí)又設(shè)置margin，就會(huì)出現(xiàn)邊距問題
解決方案：設(shè)置display：inline席舍；
3.當(dāng)標(biāo)簽的高度設(shè)置小于10px布轿，在IE6、IE7中會(huì)超出自己設(shè)置的高度
解決方案：超出高度的標(biāo)簽設(shè)置overflow：hidden来颤，或者設(shè)置line-height的值小于你的設(shè)置高度
4.圖片默認(rèn)有間距
解決方案：使用float為img布局
5.IE9以下瀏覽器不能使用opacity
解決方案：opacity：0.5汰扭；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);
6.邊距重疊問題福铅；當(dāng)相鄰兩個(gè)元素都設(shè)置了margin邊距時(shí)萝毛，margin將取最大值，舍棄最小值本讥；
7.cursor：hand顯示手型在safari上不支持
解決方案：統(tǒng)一使用cursor：pointer
8.兩個(gè)塊級(jí)元素珊泳，父元素設(shè)置了overflow：auto鲁冯；子元素設(shè)置了position：relative拷沸；且高度大于父元素，在IE6薯演、IE7會(huì)被隱藏而不是溢出撞芍；
解決方案：父級(jí)元素設(shè)置position：relative
9.const問題
說明：Firefox下，可以使用const關(guān)鍵字來定義常量跨扮；IE下序无，只能使用var關(guān)鍵字來定義常量验毡。
解決方法：統(tǒng)一使用var關(guān)鍵字來定義常量。
10.event.srcElement問題
問題說明：IE下帝嗡，event對(duì)象有srcElement屬性晶通，但是沒有target屬性；Firefox下哟玷，event對(duì)象有target屬性狮辽，但是沒有srcElement屬性。
解決方法：使用srcObj = event.srcElement?event.srcElement:event.target;
11.事件綁定
IE:dom.attachEvent();
其他瀏覽器：dom.addEventListener();
標(biāo)準(zhǔn)瀏覽器采用事件捕獲的方式對(duì)應(yīng)IE的事件冒泡機(jī)制（即標(biāo)準(zhǔn)由最外元素至最內(nèi)元素或者IE由最內(nèi)元素到最外元素）最后標(biāo)準(zhǔn)方亦覺得IE這方面的比較合理巢寡，所以便將事件冒泡納入了標(biāo)準(zhǔn)喉脖，這也是addEventListener第三個(gè)參數(shù)的由來，而且事件冒泡作為了默認(rèn)值抑月。
12.操作tr的html
在ie9以下树叽，不能操作tr的innerHTML
13.ajax略有不同
IE：ActiveXObject
其他：xmlHttpReuest
14.對(duì)象寬高賦值問題
問題說明：FireFox中類似obj.style.height = imgObj.height的語句無效。
CSS
1. cursor:hand VS cursor:pointer
firefox不支持hand谦絮，但ie支持pointer
解決方法: 統(tǒng)一使用pointer
2. innerText在IE中能正常工作题诵，但在FireFox中卻不行.
需用textContent。
解決方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
3. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)层皱。
FF：opacity:0.6仇轻。
4. css中的width和padding
在IE7和FF中width寬度不包括padding，在Ie6中包括padding.
5. FF和IEBOX模型解釋不一致導(dǎo)致相差2px
box.style{width:100;border1px;}
ie理解為box.width =100
ff理解為box.width =100 + 1*2 = 102 //加上邊框2px
解決方法：div{margin:30px!important;margin:28px;}
注意這兩個(gè)margin的順序一定不能寫反奶甘， IE不能識(shí)別!important這個(gè)屬性篷店，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：div{maring:30px;margin:28px}
重復(fù)定義的話按照最后一個(gè)來執(zhí)行臭家，所以不可以只寫margin:XXpx!important;
6. IE5 和IE6的BOX解釋不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)疲陕，最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計(jì)算的钉赁。這時(shí)我們可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
7. ul和ol列表縮進(jìn)問題
消除ul蹄殃、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成：list-style:none;margin:0px;padding:0px;
經(jīng)驗(yàn)證你踩，在IE中诅岩，設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號(hào)或圓點(diǎn)带膜，設(shè)置padding對(duì)樣式?jīng)]有影響吩谦；在 Firefox 中，設(shè)置margin:0px僅僅可以去除上下的空白膝藕，設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn)式廷，還必須設(shè)置list- style:none才能去除列表編號(hào)或圓點(diǎn)。也就是說芭挽，在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果滑废，而在Firefox中必須同時(shí)設(shè)置margin:0px蝗肪、 padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。
8. 元素水平居中問題
FF: margin:0auto;
IE: 父級(jí){ text-align:center; }
9. Div的垂直居中問題
vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高：line-height:200px;然后插入文字蠕趁，就垂直居中了薛闪。缺點(diǎn)是要控制內(nèi)容不要換行。
10. margin加倍的問題
設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍俺陋。這是一個(gè)ie6都存在的bug逛绵。解決方案是在這個(gè)div里面加上display:inline;
例如：
<divid=”imfloat”>
相應(yīng)的css為
# imfloat{
float:left;
margin:5px;//IE下理解為10px
display:inline;//IE下再理解為5px}
11. IE與寬度和高度的問題
IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使倔韭。這樣問題就大了术浪，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變寿酌，如果只用min-width和min-height的話胰苏，IE下面根本等于沒有設(shè)置寬度和高度。
比如要設(shè)置背景圖片醇疼，這個(gè)寬度是比較重要的硕并。要解決這個(gè)問題，可以這樣：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}
12. 頁(yè)面的最小寬度
如上一個(gè)問題秧荆，IE不識(shí)別min倔毙，要實(shí)現(xiàn)最小寬度，可用下面的方法：
#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}
第一個(gè)min-width是正常的乙濒；但第2行的width使用了Javascript陕赃，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)颁股。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度么库。
13. DIV浮動(dòng)IE文本產(chǎn)生3象素的bug
左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來定位甘有，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關(guān)鍵}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
14. IE捉迷藏的問題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接诉儒，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來亏掀，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面忱反。
解決辦法：對(duì)#layout使用line-height屬性或者給#layout使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單滤愕。
15. float的div閉合;清除浮動(dòng);自適應(yīng)高度
① 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>
這里的NOTfloatC并不希望繼續(xù)平移温算，而是希望往下排。(其中floatA该互、floatB的屬性已經(jīng)設(shè)置為float:left;)
這段代碼在IE中毫無問題米者，問題出在FF。原因是NOTfloatC并非float標(biāo)簽宇智，必須將float標(biāo)簽閉合蔓搞。在＜divclass=”floatB”>＜div class=”NOTfloatC”>之間加上＜div class=”clear”>這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級(jí)随橘，之間不能存在嵌套關(guān)系喂分，否則會(huì)產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}
②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應(yīng)机蔗，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的box的時(shí)候蒲祈，高度自適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE奥茑摇梆掸！)用zoom:1;可以做到，這樣就達(dá)到了兼容牙言。
例如某一個(gè)wrapper如下定義：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
③對(duì)于排版,我們用得最多的css描述可能就是float:left.有的時(shí)候我們需要在n欄的float div后面做一個(gè)統(tǒng)一的背景,譬如:
<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著left centerright的向下拉長(zhǎng),而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌入一個(gè)float left而寬度是100%的DIV解決之酸钦。
④萬能float 閉合(非常重要!)
關(guān)于 clear float 的原理可參見 [How To ClearFloats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class="clearfix"即可,屢試不爽。
/* Clear Fix /
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }
.clearfix { display:inline-block; }
/ Hide from IE Mac /
.clearfix {display:block;}
/ End hide from IE Mac /
/ end of clearfix */
或者這樣設(shè)置：.hackbox{display:table; //將對(duì)象作為塊元素級(jí)的表格顯示}
16. 高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)咱枉，特別是當(dāng)內(nèi)層對(duì)象使用margin 或padding時(shí)卑硫。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對(duì)象中的內(nèi)容＜/p>
</div>
解決技巧：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼{height:0px;overflow:hidden;}或者為DIV加上border屬性。
17. IE6下圖片下有空隙產(chǎn)生
解決這個(gè)BUG的技巧有很多,可以是改變html的排版,或者設(shè)置img為display:block或者設(shè)置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom都可以解決.
18. 對(duì)齊文本與文本輸入框
加上vertical-align:middle;
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
</style>
經(jīng)驗(yàn)證蚕断，在IE下任一版本都不適用欢伏，而ff、opera亿乳、safari硝拧、chrome均OK！
19. LI中內(nèi)容超過長(zhǎng)度后以省略號(hào)顯示
此技巧適用與IE葛假、Opera河爹、safari、chrom瀏覽器桐款，F(xiàn)F暫不支持咸这。
<style type="text/css">
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
</style>
20. 為什么web標(biāo)準(zhǔn)中IE無法設(shè)置滾動(dòng)條顏色了
解決辦法是將body換成html
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
＜/style>
21. 為什么無法定義1px左右高度的容器
IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的技巧也有很多：
例如:overflow:hidden zoom:0.08 line-height:1px
22. 鏈接(a標(biāo)簽)的邊框與背景
a鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行魔眨。參照menubar, 給 a 和menubar設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在menubar中插入一個(gè)空格媳维。
23. 超鏈接訪問過后hover樣式就不出現(xiàn)的問題
被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個(gè)問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A
Code:
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
24. FORM標(biāo)簽
這個(gè)標(biāo)簽在IE中,將會(huì)自動(dòng)margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對(duì)上面兩個(gè)問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}。
25. 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)
p[id]{}div[id]{}
這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
26. 為什么FF下文本無法撐開容器的高度
標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢遏暴？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義:
{
height:auto!important;
height:200px;
min-height:200px;
}
27.怎么樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設(shè)置透明
<paramname="wmode" value="transparent" />
8. 如何讓 Chrome 瀏覽器顯示小于 12px 的文字侄刽？
谷歌瀏覽器Chrome是Webkit的內(nèi)核，有一個(gè) -webkit-text-size-adjust 的私有CSS樣式：
-webkit-text-size-adjust:none;
或者針對(duì)谷歌瀏覽器 css3樣式 -webkit-transform:scale()進(jìn)行縮放
9. CSS 預(yù)處理器的比較：Less朋凉、Sass州丹、Stylus？
語法 Syntax
Sass(Scss)
Sass 有兩種語法格式。首先是 SCSS (Sassy CSS)墓毒， 這種格式僅在 CSS3 語法的基礎(chǔ)上進(jìn)行拓展吓揪，所有 CSS3 語法在 SCSS 中都是通用的，同時(shí)加入 Sass 的特色功能所计。此外柠辞，SCSS 也支持大多數(shù) CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法主胧。這種格式以 .scss 作為拓展名叭首。
另一種也是最早的 Sass 語法格式，被稱為縮進(jìn)格式 (Indented Sass) 通常簡(jiǎn)稱 "Sass"踪栋，是一種簡(jiǎn)化格式焙格。它使用 “縮進(jìn)” 代替 “花括號(hào)” 表示屬性屬于某個(gè)選擇器，用 “換行” 代替 “分號(hào)” 分隔屬性夷都，很多人認(rèn)為這樣做比 SCSS 更容易閱讀眷唉，書寫也更快速∷鸶兀縮進(jìn)格式也可以使用 Sass 的全部功能厢破，只是與 SCSS 相比個(gè)別地方采取了不同的表達(dá)方式。
Less
Less 其實(shí)在某種程度上很像 Scss治拿，它和 CSS 也是完全兼容的摩泪。要有分號(hào)，要有冒號(hào)劫谅，還有大括號(hào)见坑。
Stylus
他的語法和 Sass 有一點(diǎn)點(diǎn)類似，但是最大的特點(diǎn)便是沒有分號(hào)捏检，沒有冒號(hào)荞驴，沒有大括號(hào)，通過縮進(jìn)和換行贯城。一切的定義方式都是按照編程的風(fēng)格定義的熊楼，像編程一樣的函數(shù)調(diào)用，像編程一樣的變量定義，像編程一樣的書寫方式。
除此之外宇姚，他還有一個(gè)最大的優(yōu)點(diǎn)便是他隨意的格式茁瘦，官方推薦的是無分號(hào)惭嚣，無冒號(hào)，無大括號(hào)，但是他可以有分號(hào)，可以有冒號(hào)术吝，也可以有大括號(hào)计济，也就是說你愿意的話，你完全可以當(dāng)做普通的 CSS 文件來寫排苍，甚至是 Less,Sass 等其他預(yù)處理器的風(fēng)格沦寂。所以這也就是我為什么用這個(gè)的原因。
注釋
? ? Sass (//, /* */)纪岁，多行注釋會(huì)完整的輸出到編譯之后的文件凑队，但是單行不會(huì)则果，所以如果是對(duì)文件描述的可以使用多行注釋幔翰，如果只是開發(fā)相關(guān)的，請(qǐng)使用單行注釋西壮。當(dāng)然這些行為參數(shù)可以控制遗增。
? ? 可以使用 ! 作為多行注釋的第一個(gè)字符，表示即使在壓縮模式下也保留這條注釋并輸出到 CSS 文件中款青，通常用于版權(quán)的添加做修。
Playground
? ? SassMeister
? ? Less Online Editor
? ? Stylus Compiler
具體內(nèi)容請(qǐng)查看官方文檔。
變量 Variables
開頭標(biāo)識(shí)
? ? Sass 用 $ 表示變量
? ? Less 用 @ 表示變量
? ? Stylus 沒有特殊的開頭標(biāo)識(shí)
賦值方式
? ? Sass/Less 通過 var-name: var-value; 的方式
? ? Stylus 通過 = 賦值的方式抡草，類似于編程語言的編程方式
Sass
Sass 的變量以 $ 開頭饰及，賦值方法與 CSS 屬性的寫法一致：
$var-name: var-value;
直接使用就可以獲取變量的值，非常簡(jiǎn)單康震。同樣支持塊級(jí)作用域燎含，也分為全局變量（所有 Rule 外面定義的變量）和局部變量（在規(guī)則內(nèi)部定義的變量）。同時(shí)支持將局部變量聲明為全局變量腿短，通過 !global 聲明：
#main {
? $width: 5em !global;
? width: $width;
}
#sidebar {
? width: $width;
}
// output
#main {
? width: 5em;
}
#sidebar {
? width: 5em;
}
Sass 支持 6 種主要的數(shù)據(jù)類型
? ? 數(shù)字屏箍，1, 2, 13, 10px
? ? 字符串，有引號(hào)字符串與無引號(hào)字符串橘忱，"foo", 'bar', baz
? ? 顏色赴魁，blue, #04a3f9, rgba(255,0,0,0.5)
? ? 布爾型，true, false
? ? 空值钝诚，null
? ? 數(shù)組 (list)颖御，用空格或逗號(hào)作分隔符，多維數(shù)組用 () 包括凝颇，逗號(hào)比空格的優(yōu)先級(jí)要高潘拱，所以會(huì)優(yōu)先用逗號(hào)分隔數(shù)組，1.5em 1em 0 2em, Helvetica, Arial, sans-serif祈噪。輸出時(shí)扁平化輸出泽铛。
? ? maps, 相當(dāng)于 JavaScript 的 object，(key1: value1, key2: value2)
Less
Less 的變量是以 @ 開頭辑鲤，語法格式類似于 CSS 的 Property 的書寫格式盔腔，與 Sass/Scss 有一些類似：
@var-name: var-value;
使用的時(shí)候也是帶著 @，他支持變量插值，類似于 PHP 那樣的弛随。比如說
@red: 1;
@var1: red;
@var2: @{@var1}; // 1
// or
@var2: @@var1;
同時(shí)變量的執(zhí)行都是懶加載瓢喉，也就是說變量的值得計(jì)算都是在你用到的時(shí)候計(jì)算的，例如
@a: 1;
@b: @a;
.a {
? content: @b; // 1
}
.b {
? @a: 2;
? content: @b; // 2
}
當(dāng)然他也有作用域舀透，有根級(jí)的作用域栓票，也有塊級(jí)的作用域。所以我們只需要在當(dāng)前作用于修改變量愕够，并不會(huì)影響上級(jí)作用域的變量的內(nèi)容走贪。
但是文檔中并沒有提及類型的問題，所以不得而知惑芭。
Stylus
變量通過 = 進(jìn)行定義坠狡，就像是普通的編程的變量一般，不需要什么特殊的前綴：
var-name = var-value
不過我還是推薦使用 $ 作為開頭遂跟，因?yàn)楫?dāng) stylus 寫大的時(shí)候逃沿，你會(huì)發(fā)現(xiàn)經(jīng)常你會(huì)把變量和屬性值弄混，所以建議用 $ 開頭幻锁，這樣我們可以很清晰的看出來凯亮，那個(gè)是變量，那個(gè)是屬性值哄尔。
運(yùn)算 Operations
算數(shù)運(yùn)算
所有的算數(shù)運(yùn)算都支持單位的運(yùn)算假消，也支持自動(dòng)轉(zhuǎn)化，比如說 20mm + 4in = 121.6mm究飞。如果發(fā)現(xiàn)單位無法轉(zhuǎn)換置谦，那么一般是忽略單位只有單獨(dú)運(yùn)算，運(yùn)算結(jié)束之后再加上左操作數(shù)的單位亿傅，例如 5s - 3px = 2s媒峡。
有一點(diǎn)例外的就是，對(duì)于乘法除法來說葵擎，單位相乘是沒有什么意義的谅阿，所以在乘除當(dāng)中和單位無法轉(zhuǎn)換的情況相同。
如果操作的類型是顏色類型的話酬滤，那么運(yùn)算都是相對(duì)于 R/G/B 單獨(dú)計(jì)算的签餐，也就是說 #0000ff + #000001 = #0000ff 而不是 #000100，不存在進(jìn)位的情況盯串。
數(shù)組運(yùn)算
? ? Sass 不支持任何數(shù)組的運(yùn)算符氯檐，全部都是通過函數(shù)操控
? ? Less 沒有找到文檔，測(cè)試無法使用 []体捏，目測(cè)也是通過和 Sass 一樣的方式冠摄。
? ? Stylus 支持 [] 下標(biāo)取值
函數(shù) Function
函數(shù)定義
? ? Sass糯崎，通過一個(gè) @function 來定義一個(gè)函數(shù)，然后通過 @return 返回一個(gè)值
? ? Less河泳，準(zhǔn)確說沒有函數(shù)這個(gè)概念沃呢，但是他有 混入(Mixin) 來充當(dāng)函數(shù)的概念。不過這個(gè)也是合理的拆挥，畢竟 CSS 是最后需要輸出一段字符串薄霜，一切操作都是為了生成字符串，所以沒有函數(shù)也是完全可以接受的纸兔。
嵌套 Nest rules
所有的預(yù)處理中都有嵌套的功能惰瓜，而且語法都是類似的，將 Rule 寫在某個(gè) Rule 里面食拜，便可以實(shí)現(xiàn)嵌套的功能鸵熟。
不需要每次都輸入父選擇器了副编，方便快捷高效负甸。
同理，也都有 & 父選擇引用痹届，可以方便的在 Rule 內(nèi)部定義父級(jí)的 Rule呻待，一般用來定義 hover 或者相連的選擇器 &.other-class。
Less 中還支持嵌套 Directive队腐，比如 media, keyframe 等等蚕捉。這些 Directives 及時(shí)再非常深的地方，也會(huì)一起冒泡到頂級(jí)柴淘。
混合 Mixins
定義
? ? Sass 會(huì)復(fù)雜一些迫淹，需要使用 @mixin 指令定義。簡(jiǎn)寫為 =
? ? Less 很簡(jiǎn)單为严，一個(gè)類就可以是一個(gè)混入的定義敛熬，當(dāng)然 ID 也可以，不過標(biāo)簽不可以第股，也就是說你必須要有 . 或者 # 開頭应民。在這種情況下，所有的混入自然會(huì)輸出的(它也沒法區(qū)分混入和普通類)夕吻，如果你不想讓他輸出诲锹，那么可以在定義的類名后面添加 () 從而不讓其在最后的結(jié)果中輸出，感覺就像是定義了一個(gè)函數(shù) :)
? ? Stylus 很簡(jiǎn)單涉馅，在后面添加 () 即可归园，類似于普通的函數(shù)。
使用
? ? Sass 需要通過 @include 指令引入混入稚矿。簡(jiǎn)寫為 +
? ? Less 通過直接引用類名可以直接進(jìn)行混入庸诱，當(dāng)然加不加括號(hào)都是可以的 .a() 或者 .a 都是正確的寫法悬钳。
? ? Stylus 使用 Mixin 主要有兩種方式，第一種就是類似于函數(shù)調(diào)用的方式偶翅，通過 ()默勾，第二種便是將 Mixin 當(dāng)做普通的屬性來使用（正是因?yàn)檫@個(gè)的存在，所以你可以定義一個(gè)和標(biāo)準(zhǔn) CSS 屬性同名的 Mixin聚谁，從而修改這個(gè)屬性的輸出母剥，通常用于 hack）。推薦使用第二種方式形导，可以保持整個(gè)代碼的整潔环疼。
參數(shù)、關(guān)鍵詞參數(shù)朵耕、 Rest 參數(shù)(...)
這三者都支持炫隶，定義方式也是大同小異，沒什么可以說的阎曹。也都支持類似于 JS 中 arguments 的變量伪阶。
? ? Sass 不支持，用 , 分隔參數(shù)
? ? Less @arguments处嫌， 用 ; 分隔參數(shù)栅贴，這樣更像是屬性定義。
? ? Stylue arguments熏迹，用 , 分隔參數(shù)
不過 Less 有一點(diǎn)比較特殊檐薯，因?yàn)樗麤]有函數(shù)，也就是說他很難做到根據(jù)不同的輸入有不同的輸出（屬性上的不同）注暗，所以它支持模式匹配坛缕，也就是說根據(jù)某些參數(shù)來運(yùn)行不同的 Mixin，其實(shí)就是 Mixin 重載捆昏。
向 Mixin 傳入自定義 Rules
? ? Sass 支持像 Ruby 的 Block赚楚，也就是說你可以直接傳入一段自定義的 Block，通過 @content 引用這段 Block屡立，例子請(qǐng)查看官網(wǎng)直晨。
? ? Less 目前沒有發(fā)現(xiàn)這個(gè)功能。
? ? Stylus 在使用 Mixins 前面添加 + 就可以在后面添加 Block膨俐。其實(shí)只是想和 Mixin 定義區(qū)分開勇皇。
Mixin 定義嵌套
目前在文檔中都沒有相關(guān)內(nèi)容的介紹，發(fā)現(xiàn)部分是可以的焚刺。
? ? Sass 不允許嵌套定義
? ? Less 可以定義敛摘，而且可以從外面引用到
? ? Stylus 可以定義，但是限制作用域乳愉，只能在定義的位置使用兄淫。
? ? 總體來說屯远，Sass 和 Less 在混入方面我還是喜歡 Less，簡(jiǎn)單直接捕虽。
控制語句 Controls
if
? ? Sass if 有兩種慨丐，第一種是 if() 函數(shù)，第二種便是 @if 指令泄私。如果指令的表達(dá)式為真房揭，那么久輸出值，否則就不輸出晌端。當(dāng)然也有 @else if 和 @else捅暴。條件表達(dá)式不需要括號(hào)
? ? Less 沒有直接對(duì)應(yīng)的東西，但是他有一個(gè) Guard 的概念咧纠，可以認(rèn)為是變種的 if蓬痒。通過在某些選擇器、Mixin 定義后面添加 when (condition)漆羔。只有當(dāng) condition 為真的時(shí)候梧奢，相應(yīng)的選擇器、Mixin 才會(huì)起作用钧椰。
? ? Stylus if/else 跟普通編程語言幾乎是一模一樣的粹断，也可以嵌套，這里就不多講了嫡霞。不過 Stylus 還有一個(gè) unless ，就是 if 加了 !希柿，其他都是一樣的诊沪。也支持后添加的條件表達(dá)式，類似于 CoffeeScript 和 Ruby曾撤。條件表達(dá)式不需要括號(hào)
Loop
? ? Sass 的循環(huán)主要有兩種語法 @for $var from <start> through <end> 和 @for $var from <start> to <end> 區(qū)別在于 through 與 to 的含義：當(dāng)使用 through 時(shí)端姚，條件范圍包含 <start> 與 <end> 的值，而使用 to 時(shí)條件范圍只包含 <start> 的值不包含 <end> 的值挤悉。另外渐裸，$var 可以是任何變量，比如 $i装悲；<start> 和 <end> 必須是整數(shù)值昏鹃。反正 Sass 的 for 循環(huán)只支持整數(shù)。
? ? 也有 @while 循環(huán)诀诊，他的就簡(jiǎn)單多了洞渤，只需要接受一個(gè)條件表達(dá)式就可以了。
? ? 但是如果你想循環(huán)其他的元素属瓣，那么你需要使用 @each $var in <list>载迄。支持解構(gòu)
? ? Less 首先大家要清楚讯柔，Less 中的變量都是懶加載的所，他無法實(shí)現(xiàn)循環(huán)中對(duì)變量的有效控制护昧，所以他支持 Mixin 內(nèi)調(diào)用自己魂迄，也即是說通過 Guard 和 Pattern Matching 通過遞歸實(shí)現(xiàn)循環(huán)。
? ? Stylus 簡(jiǎn)單來說就一個(gè) for <val-name> [, <index-name>] in <expression>惋耙。就跟普通的 JS 語句一樣极祸。和 if 語句類似，他也支持后綴表達(dá)式怠晴。但是如果 express 是 Hashes遥金，那么表達(dá)式相應(yīng)的變?yōu)?for <key-name>, <value-name> in <hashes>
導(dǎo)入 Imports
無一例外，三大框架都使用了 @import 作為導(dǎo)入的關(guān)鍵字蒜田。這里就會(huì)有一個(gè)問題稿械，因?yàn)?@import 在 CSS 中也有，于是就存在到底是將文件導(dǎo)入進(jìn)來還是僅僅作為一個(gè) CSS 的關(guān)鍵字輸出呢冲粤？
總體來說有如下的規(guī)則：
? ? 如果是以 .css 結(jié)尾美莫，那么直接輸出，不導(dǎo)入
? ? 如果包含 url() 也直接輸出到文件梯捕，不導(dǎo)入
? ? 如果包含 http:// 或者 https:// 也就是網(wǎng)絡(luò)請(qǐng)求厢呵，那么也直接輸出到文件中，不導(dǎo)入
? ? 其他情況傀顾，當(dāng)做普通的編程文件導(dǎo)入襟铭。
特殊情況
? ? Sass
? ? ? ? 如果包含 media queries 也直接輸出，不導(dǎo)入短曾。
? ? Less
? ? ? ? 如果包含 url() 或者 http:///https://寒砖，并不直接輸出，而是導(dǎo)入嫉拐。
? ? ? ? Less 只有一種情況會(huì)直接輸出哩都，那么就是如果文件以 .css 結(jié)尾
? ? Stylus
? ? ? ? 支持 glob 導(dǎo)入，支持 index 導(dǎo)入婉徘，類似于 node 的包管理機(jī)制一般漠嵌。
同時(shí)這三大框架都支持 嵌套導(dǎo)入。部分支持 引用導(dǎo)入 和 內(nèi)聯(lián)導(dǎo)入盖呼，同時(shí) Less 的 @import 默認(rèn)是只導(dǎo)入一次的儒鹿。
? ? Sass
? ? ? ? 支持引用導(dǎo)入，可以僅僅導(dǎo)入但是不輸出為 CSS塌计，只需要在文件名前添加下劃線挺身，但是導(dǎo)入語句中不需要
? ? ? ? 如果同時(shí)存在添加下?lián)Q線與未添加下?lián)Q線的同名文件時(shí)，添加下劃線的會(huì)被忽略
? ? Less
? ? ? ? 支持 @import (options) "filename" 設(shè)置不同的導(dǎo)入模式锌仅，現(xiàn)在總共有 7 種章钾，可以通過逗號(hào)分隔多個(gè)參數(shù)墙贱。
? ? ? ? ? ? reference 引用導(dǎo)入，不輸出 css
? ? ? ? ? ? inline 直接內(nèi)聯(lián)贱傀，輸出為 css
? ? ? ? ? ? less 將文件當(dāng)做 less 文件惨撇，忽略他的后綴名
? ? ? ? ? ? css 將文件當(dāng)做 css 文件，忽略他的后綴名
? ? ? ? ? ? once 只導(dǎo)入一次（默認(rèn)行為）
? ? ? ? ? ? multiple 導(dǎo)入多次
? ? ? ? ? ? optional 到文件未找到的時(shí)候府寒，忽略這個(gè)錯(cuò)誤魁衙，繼續(xù)執(zhí)行
? ? Stylus
? ? ? ? 默認(rèn)情況下 @import 是可以導(dǎo)入多次的，但是如果你想要導(dǎo)入一次的話株搔，可以通過 @require剖淀，這兩者只有導(dǎo)入次數(shù)的區(qū)別，沒有別的區(qū)別纤房。類似于 php 的 require 和 import纵隔。
? ? ? ? Stylus 是沒有是否 引用導(dǎo)入的這個(gè)功能的，因?yàn)?Stylus 不能將 Rule 作為 mixin 進(jìn)行使用炮姨，所以就不會(huì)出現(xiàn) Sass/Less 這種有一些 Rule 只是 mixin 而不是普通的 Rule 的情況捌刮，所以也就不需要有 引用導(dǎo)入 這個(gè)功能。
擴(kuò)展 Extends
簡(jiǎn)單說一些 Extend 和 Mixin 的區(qū)別的吧舒岸，Mixin 就像是 copy/paste绅作，每次執(zhí)行 Mixin ，都會(huì)在不同的 Rule 下面有相同的內(nèi)容蛾派，他們不會(huì)進(jìn)行復(fù)用俄认。但是 Extend 會(huì)進(jìn)行復(fù)用，將相同的內(nèi)容提取出來碍脏，復(fù)用成一個(gè) Rule梭依。
不過有一點(diǎn)很特殊的是， Less 竟然沒有 Extned典尾。而且 Stylus 的 Extend 還是由 Sass 擴(kuò)展過來的，所以他們兩個(gè)基本相同糊探，都使用 @extend 關(guān)鍵字钾埂。
而且 Sass 的 Extend 沒有什么太多的概念，我就一起來講了科平。
首先兩者有一個(gè)最大的區(qū)別就是 Stylus 支持 nested selector褥紫，而 Sass 是不支持的。
其次兩者都有 placeholder 瞪慧，也就是僅僅用于 extend 的類髓考，但是兩者的定義方式不一樣。
? ? Sass 通過將 #/. 替換為 %
? ? Stylus 通過在最前面添加 $ 來實(shí)現(xiàn)的弃酌，其實(shí)用這個(gè)也能彌補(bǔ) Stylus 沒有那種只定義不輸出的功能氨菇，只不過只能用于 Extend
也支持 optional 功能儡炼，其實(shí)就是如果找不到 Extend 類但是不報(bào)錯(cuò)的樣子。通過在類后面添加 !optional查蓉。
DEMO: @extend .a !optional, .b !optional
其他指令 Other Directives
@css
? ? Stylus
? ? ? ? 有的時(shí)候 Stylus 無法正確的處理 css 的選擇器乌询，你可以將 css 屬性放入到 @css 標(biāo)簽內(nèi)。內(nèi)部的類都將作為普通的 css 來處理豌研。
其他功能 Others
Error Handle
? ? Stylus
? ? ? ? 支持自定義的錯(cuò)誤輸出妹田，通過 error 函數(shù)
Introspection
? ? Stylus
? ? ? ? 允許 Mixin 和 Function 使用反射獲取對(duì)應(yīng)的信息
生態(tài) Community
Stylus
? ? nib 各種工具大集合，也自帶各種 hack 類鹃共。
1.7CSS 拓展：② CSS 編碼規(guī)范 | CSS
1. 編碼規(guī)范的作用是什么鬼佣？列舉 5 條以上編碼規(guī)范。
作用：
1. 提高可讀性
編碼規(guī)范霜浴，幫助我們寫出容易理解的代碼晶衷，它為我們提供了最基本的模板，良好的編碼風(fēng)格坷随，使代碼具有一定的描述性房铭，可以通過名字來獲取一些需要IDE才能得到的提示，如可訪問性温眉、繼承基類等缸匪。
2. 促進(jìn)團(tuán)隊(duì)協(xié)助
編碼規(guī)范，要求團(tuán)隊(duì)成員遵守這一統(tǒng)一的全局決策类溢，這樣成員之間可以輕松地閱讀對(duì)方的代碼凌蔬，所有成員正以一種清晰而一致的風(fēng)格進(jìn)行編碼。而且闯冷，開發(fā)人員也可以集中精力關(guān)注他們真正應(yīng)該關(guān)注的問題——自身代碼的業(yè)務(wù)邏輯砂心，與需求的契合度等局部問題。
3. 有助于知識(shí)傳遞蛇耀，加快工作交接
風(fēng)格的相似性辩诞，能讓開發(fā)人員更迅速，更容易理解一些陌生的代碼纺涤，更快速地理解別人的代碼译暂。因?yàn)椋湍愕拇a風(fēng)格是一樣的撩炊，你沒有必要對(duì)他的一些個(gè)性化風(fēng)格進(jìn)行揣測(cè)外永。這樣的好處是開發(fā)人員可以很快的接手項(xiàng)目組其他成員的工作，快速完成工作交接拧咳。
4. 降低維護(hù)成本
在沒有規(guī)范的情況下伯顶，和容易為同一類型的實(shí)例起不同的名字。對(duì)于以后維護(hù)這些代碼程序員來說會(huì)產(chǎn)生疑惑。
5. 強(qiáng)調(diào)變量之間的關(guān)系祭衩，降低缺陷引入的機(jī)會(huì)
命名可以表示一定的邏輯關(guān)系灶体，是開發(fā)人員在使用時(shí)保持警惕，從而一定程度上減少缺陷被引人的機(jī)會(huì)汪厨。
6. 提高程序員個(gè)人能力
每個(gè)程序員都應(yīng)該養(yǎng)成良好的編碼習(xí)慣赃春，而編碼規(guī)范無疑是教材之一。即便是為了自身發(fā)展劫乱，作為程序員也沒有理由抵制這種規(guī)則的存在织中。你可能沒有認(rèn)識(shí)到，我們正默默地得益于編碼規(guī)范衷戈。
規(guī)范
? ? 為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明狭吼，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html>
<html>
? <head>
? </head>
</html>
? ? 字符編碼
? ? 通過明確聲明字符編碼殖妇，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式刁笙。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity）谦趣，從而全部與文檔編碼一致（一般采用 UTF-8 編碼）疲吸。
<head>
? <meta charset="UTF-8">
</head>
? ? 實(shí)用為王
? ? 盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價(jià)前鹅。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度摘悴。
? ? 布爾（boolean）型屬性
? ? 布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值舰绘，但是 HTML5 規(guī)范不需要蹂喻。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
? <option value="1" selected>1</option>
</select>
? ? 減少標(biāo)簽的數(shù)量
? ? 編寫 HTML 代碼時(shí)，盡量避免多余的父元素捂寿。很多時(shí)候口四，這需要迭代和重構(gòu)來實(shí)現(xiàn)。
<!-- Not so great -->
<span class="avatar">
? <img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
2. 什么是盒模型秦陋？
盒模型簡(jiǎn)單的來說就是一個(gè)盒子蔓彩，它從內(nèi)到外由 外邊距margin border邊界 padding內(nèi)邊距 內(nèi)容尺寸width/height 四種基本樣式組成的。它的內(nèi)容尺寸大小由寬高決定驳概，它的盒模型尺寸大小由寬高和padding粪小，margin決定，而它的盒模型區(qū)域由寬高抡句，padding，border杠愧，margin決定的待榔。
盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型:
1.標(biāo)準(zhǔn)盒模型
標(biāo)準(zhǔn)盒模型：盒模型大小=width+height,瀏覽器默認(rèn)的是標(biāo)準(zhǔn)盒模型巷折。
2.怪異盒模型
怪異盒模型:盒模型大小=width+height+padding+border;
4. CSS 的屬性 box-sizing 有什么值？分別有什么作用赢笨？
box-sizing: content-box|border-box|inherit;
content-box：這是由 CSS2.1 規(guī)定的寬度高度行為著洼。
寬度和高度分別應(yīng)用到元素的內(nèi)容框。
在寬度和高度之外繪制元素的內(nèi)邊距和邊框雕憔。
border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒姿骏。
就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制斤彼。
通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度分瘦。
inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
