關(guān)于WEB標(biāo)準(zhǔn)
WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)朗若，而是一系列標(biāo)準(zhǔn)的集合恼五。
網(wǎng)頁主要由四部分組成：內(nèi)容（Content）、結(jié)構(gòu)（Structure）哭懈、表現(xiàn)（Presentation）和行為（Behavior）灾馒。
1） 內(nèi)容：就是制作者放在頁面內(nèi)真正想要讓訪問者瀏覽的東西，如：圖片银伟、文本你虹、多媒體等（內(nèi)容為王）
2） 結(jié)構(gòu)：使內(nèi)容更加更加具有邏輯性與易用性，更清晰易懂 HTML
3） 表現(xiàn)：用于修飾內(nèi)容的外觀的樣式彤避，稱為表現(xiàn)，使網(wǎng)頁更加美觀 CSS
4） 行為：網(wǎng)頁中的交互及操作效果夯辖，主要通過腳本語言完成事件+動(dòng)作 javaScript

css簡稱行為層疊樣式表

CSS的主要作用
1.遵循W3C標(biāo)準(zhǔn)琉预，符合WEB2.0標(biāo)準(zhǔn)。
2.減少重復(fù)格式化蒿褂，減少網(wǎng)頁體積圆米，加快下載和訪問速度。
3.符合內(nèi)容與表現(xiàn)形式分離的原則啄栓，方便于搜索引擎抓取到有用的內(nèi)容娄帖。
4.便于更新和維護(hù)，成千上萬的網(wǎng)頁只需要修改CSS便可以更改顯示外觀昙楚。
5.瀏覽器干擾相對(duì)較小近速，實(shí)現(xiàn)一些HTML格式化不能實(shí)現(xiàn)的高級(jí)功能。

CSS的語法結(jié)構(gòu)
CSS的定義是由三個(gè)部分構(gòu)成：選擇器（selector），屬性（properties）和屬性的取值（value）
選擇器名稱
{
屬性名稱1：屬性的值1削葱；
屬性名稱1：屬性的值1奖亚；
……
}
CSS的三種引用方式
使用CSS有三種方式： 內(nèi)聯(lián)式CSS、 內(nèi)部式CSS 析砸、外鏈?zhǔn)紺SS昔字、import導(dǎo)入樣式
通過@import導(dǎo)入樣式，放入css（不要忘記分號(hào)）首繁。在html或者css文件中都可以導(dǎo)入@import

@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);

id 選擇器和 class 選擇器的使用場景分別是什么作郭？
（1）id選擇器，用于匹配特定id的元素弦疮，具有獨(dú)一無二不可代替性
（2）class選擇器所坯，用于匹配class包含（不是等于）特定類的元素，描述一組元素的樣式挂捅，你可以多次使用class賦值芹助，來命名元素名
CSS選擇器常見的有幾種？
答：基礎(chǔ)選擇器闲先、組合選擇器状土、屬性選擇器、偽類選擇器伺糠、偽元素選擇器
偽類選擇器有哪些蒙谓？偽元素有哪些？
（1）偽類選擇器：E: first-child 匹配元素E的第一個(gè)子元素
E：link 匹配所有未被點(diǎn)擊的鏈接
E: visited 匹配所有已被點(diǎn)擊的鏈接
E：active 匹配鼠標(biāo)已經(jīng)其上按下训桶，還沒被釋放的E元素
E：hover 匹配鼠標(biāo)懸停器上的E元素
E：focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
E：lang(c) 匹配lang屬性等于c的E元素
E：enabled 匹配表單中可用的元素
E：disabled 匹配表單中禁用的元素
E： checked 匹配表單中被選中的radio或checkbox元素
E： selection 匹配用戶當(dāng)前選中的元素
E：root 匹配文檔的根元素累驮，對(duì)于html文檔，實(shí)際上就是html元素
E：nth-child（n） 匹配其父元素的第n個(gè)子元素舵揭，第一個(gè)編號(hào)為1E:nth-of-type(n) 與：nth-child（）作用類似谤专，但僅匹配使用同種標(biāo)簽的元素
（2）偽元素：E::first-line 匹配E元素內(nèi)容的第一行E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母E::before 在E元素之前插入生成的內(nèi)容E::after 在E元素之后插入生成的內(nèi)容

7、以下選擇器分別是什么意思?

#header{}
答：id選擇器午绳，匹配id為header的元素
.header{}
答：類選擇器置侍，匹配class為header元素
.header  .logo{}
答：后代選擇器，匹配class為header的元素
logo.header.mobile{}
答：即又關(guān)系的并列元素拦焚，同時(shí)匹配這兩個(gè)類選擇器特性的一個(gè)元素
.header p, .header h3{}
答：多元選擇器蜡坊，同時(shí)匹配.header p 和 .header h3兩個(gè)元素
#header a:hover{}
答：在id為header元素下匹配a元素鼠標(biāo)懸停屬性
#header .logo~p{}
答：在id為header元素下匹配logo元素之后的同級(jí)所有元素p （無論直接相鄰與否）
#header .logo+p{}
答：在id為header元素下匹配logo元素之后的相鄰?fù)?jí)元素
p#header .logo p{}
答：在id為header元素下匹配class為logo元素的后代元素
p#header .logo>p{}
答：在id為header元素下匹配class為logo元素的所有直接子元素，即第一子元素p
#header p.logo{}
答：在id為header元素下同時(shí)匹配p元素和class為logo元素這類既又關(guān)系（并列）的元素的特性
#header .logo.p{}
答：在id為header元素下同時(shí)匹配class為logo和p的元素
#header input[checked]{}
答：在id為header元素下匹配checked值的input的元素

從輸入url到頁面展現(xiàn)瀏覽器輸入url——瀏覽器向服務(wù)器發(fā)請(qǐng)求——服務(wù)器將相關(guān)數(shù)據(jù)處理返至瀏覽器——瀏覽器拿到數(shù)據(jù)并加載頁面——解析html的字符串赎败、詞法分析解析成樹狀結(jié)構(gòu)=>create Dom tree解析html時(shí)秕衙，加載css，文件被下載——解析css文件對(duì)其分析——attach style to Dom nodes => create Dom tree兩樹狀結(jié)構(gòu)對(duì)應(yīng)起來——新的dom樹（節(jié)點(diǎn)相關(guān)的元素僵刮、參數(shù)）——渲染据忘、繪制頁面
2鹦牛、CSS優(yōu)先級(jí)
（1）從高到低分別是： A、若河！important 即會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式 B能岩、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式 C、id選擇器 D萧福、類選擇器 E拉鹃、偽類選擇器 F、屬性選擇器鲫忍，<input type="password">膏燕，E[attr=value]，如input[type=password] G悟民、標(biāo)簽選擇器 H坝辫、通配符選擇器 I、 瀏覽器自定義
（2）復(fù)雜場景(按順序） a射亏、行內(nèi)樣式 <div style="XXX"><div> b近忙、ID選擇器 c、類選擇器 d智润、屬性選擇器 e及舍、偽類選擇器 f、標(biāo)簽選擇器 g窟绷、偽元素

注：選擇器的優(yōu)先級(jí)是如何計(jì)算的锯玛？
A、按順序來計(jì)算的：假設(shè)：a等級(jí)：行內(nèi)樣式<div style="XXX"><div> b等級(jí)：ID選擇器 c等級(jí)：類兼蜈、屬性選擇器攘残、偽類選擇器 d等級(jí)：標(biāo)簽選擇器、偽元素即a-d等級(jí)權(quán)值依次為5为狸、4歼郭、3、2钥平，按照a-d等級(jí)的屬性順序依次得分实撒，若取到相應(yīng)等級(jí)的權(quán)值，最高的則為最優(yōu)先級(jí)別涉瘾。
B、參考：當(dāng)不同類別的多個(gè)選擇器混合使用個(gè)怎么計(jì)算優(yōu)先級(jí)捷兰？有一個(gè)簡單的算法立叛，設(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（3）樣式覆蓋 后面的樣式會(huì)覆蓋到前面的樣式 （4）選擇器使用經(jīng)驗(yàn) 遵守css書寫規(guī)范 使用合適的命名空間 合理地復(fù)用class

盒模型
IE盒模型
IE 盒模型的width=content尺寸+padding+border

盒模型1.jpg

2、W3C標(biāo)準(zhǔn)下的盒模型
W3C標(biāo)準(zhǔn)下的盒模型padding贡茅、border所占的空間不在width秘蛇、height范圍內(nèi)其做，content寬度即是width

盒子模型2.jpg

罚渐。