1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型宿刮？與低版本IE的盒子模型有什么不同的捐祠？
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin
2.box-sizing屬性？
用來(lái)控制元素的盒子模型的解析模式榜轿，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬
3 CSS選擇器有哪些画畅？哪些屬性可以繼承？
CSS選擇符：id選擇器(#myid)宋距、類選擇器(.myclassname)轴踱、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)谚赎、子選擇器（ul > li）淫僻、后代選擇器（li a）诱篷、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）雳灵、偽類選擇器（a:hover, li:nth-child）
可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優(yōu)先級(jí)（就近原則）：!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級(jí)高
4.CSS優(yōu)先級(jí)算法如何計(jì)算棕所？
元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標(biāo)簽：1000
!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算悯辙。
如果優(yōu)先級(jí)相同琳省，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低躲撰。
5.CSS3新增偽類有那些?
p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)岛啸。
:checked 單選框或復(fù)選框被選中。
6.display有哪些值茴肥？說(shuō)明他們的作用?
inline（默認(rèn)）–內(nèi)聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項(xiàng)目列表
inline-block
7.position的值坚踩？
static（默認(rèn)）：按照正常文檔流進(jìn)行排列；
relative（相對(duì)定位）：不脫離文檔流瓤狐，參考自身靜態(tài)位置通過(guò) top, bottom, left, right 定位瞬铸；
absolute(絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對(duì)像是可視窗口础锐。
8.常見(jiàn)的兼容性問(wèn)題嗓节？
不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。*{margin:0;padding:0;}
IE6雙邊距bug：塊屬性標(biāo)簽float后皆警，又有橫行的margin情況下拦宣，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性信姓。
漸進(jìn)識(shí)別的方式鸵隧，從總體中逐漸排除局部。首先意推，巧妙的使用“9”這一標(biāo)記豆瘫，將IE瀏覽器從所有情況中分離出來(lái)。接著菊值，再次使用“+”將IE8和IE7外驱、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別腻窒。
9.前端頁(yè)面由哪三層構(gòu)成昵宇，分別是什么？作用是什么儿子？
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
10.清除浮動(dòng)的幾種方式瓦哎，各自的優(yōu)缺點(diǎn)
1.使用空標(biāo)簽清除浮動(dòng)clear:both（缺點(diǎn)，增加無(wú)意義的標(biāo)簽,讓人感覺(jué)很不爽）
2.使用overflow:auto（使用zoom:1用于兼容IE，缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)杭煎，會(huì)出現(xiàn)滾動(dòng)條）
3.是用afert偽元素清除浮動(dòng)(IE8以上和非IE瀏覽器才支持恩够，目前：大型網(wǎng)站都有使用，如：騰迅羡铲，網(wǎng)易蜂桶，新浪等等)
11.position的值， relative和absolute定位原點(diǎn)是也切？
*absolute：生成絕對(duì)定位的元素扑媚，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
*fixed：生成絕對(duì)定位的元素雷恃，相對(duì)于瀏覽器窗口進(jìn)行定位疆股。
*relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位倒槐。
static 默認(rèn)值旬痹。沒(méi)有定位，元素出現(xiàn)在正常的流中
（忽略 top, bottom, left, right z-index 聲明）讨越。
inherit 規(guī)定從父元素繼承 position 屬性的值两残。
12.display:inline-block 什么時(shí)候會(huì)顯示間隙？
移除空格把跨、使用margin負(fù)值人弓、使用font-size:0、letter-spacing着逐、word-spacing
13.display:none和visibility:hidden的區(qū)別崔赌？
display:none? 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間耸别，它各邊的元素會(huì)合攏健芭，
就當(dāng)他從來(lái)不存在。
visibility:hidden? 隱藏對(duì)應(yīng)的元素太雨，但是在文檔布局中仍保留原來(lái)的空間吟榴。
14.CSS中l(wèi)ink 和@import的區(qū)別是？
A：(1) link屬于HTML標(biāo)簽囊扳，而@import是CSS提供的; (2) 頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載兜看，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;(3) import只在IE5以上才能識(shí)別锥咸，而link是HTML標(biāo)簽，無(wú)兼容問(wèn)題; (4) link方式的樣式的權(quán)重 高于@import的權(quán)重.
15.經(jīng)常遇到的瀏覽器的兼容性有哪些细移？原因搏予，解決方法是什么，常用hack的技巧 弧轧？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景雪侥，解決方案是做成PNG8.
* 瀏覽器默認(rèn)的margin和padding不同碗殷。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
* IE6雙邊距bug:塊屬性標(biāo)簽float后速缨，又有橫行的margin情況下锌妻，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離旬牲，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性仿粹。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部原茅。
首先吭历，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)擂橘。
接著晌区，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)通贞，這樣IE8已經(jīng)獨(dú)立識(shí)別契讲。
css
? ? ? .bb{undefined
? ? ? ? ? background-color:#f1ee18;/*所有識(shí)別*/
? ? ? ? ? .background-color:#00deff\9; /*IE6、7滑频、8識(shí)別*/
? ? ? ? ? +background-color:#a200ff;/*IE6捡偏、7識(shí)別*/
? ? ? ? ? _background-color:#1e0bd1;/*IE6識(shí)別*/
? ? ? }
IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性峡迷。
IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;
Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性银伟。
解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決绘搞。
超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
16.li與li之間有看不見(jiàn)的空白間隔是什么原因引起的彤避？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車\空格）等的影響夯辖，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式琉预，占據(jù)空間，所以會(huì)有間隔蒿褂，把字符大小設(shè)為0圆米，就沒(méi)有空格了。
17.position:fixed;在android下無(wú)效怎么處理啄栓？
fixed的元素是相對(duì)整個(gè)頁(yè)面固定位置的娄帖，你在屏幕上滑動(dòng)只是在移動(dòng)這個(gè)所謂的viewport，原來(lái)的網(wǎng)頁(yè)還好好的在那昙楚，fixed的內(nèi)容也沒(méi)有變過(guò)位置近速，
所以說(shuō)并不是iOS不支持fixed，只是fixed的元素不是相對(duì)手機(jī)屏幕固定的
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
18.css多列等高如何實(shí)現(xiàn)？
利用padding-bottom|margin-bottom正負(fù)值相抵削葱；
設(shè)置父容器設(shè)置超出隱藏（overflow:hidden）奖亚，這樣子父容器的高度就還是它里面的列沒(méi)有設(shè)定padding-bottom時(shí)的高度
當(dāng)它里面的任 一列高度增加了，則父容器的高度被撐到里面最高那列的高度
其他比這列矮的列會(huì)用它們的padding-bottom補(bǔ)償這部分高度差
19.行內(nèi)元素有哪些析砸？塊級(jí)元素有哪些昔字？ 空(void)元素有那些？
首先：CSS規(guī)范規(guī)定干厚，每個(gè)元素都有display屬性李滴，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值蛮瞄，如div的display默認(rèn)值為“block”所坯，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”挂捅，是“行內(nèi)”元素
行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常見(jiàn)的空元素：
***行內(nèi)元素***：
a - 錨點(diǎn)芹助，em - 強(qiáng)調(diào)，strong - 粗體強(qiáng)調(diào)闲先，span - 定義文本內(nèi)區(qū)塊状土，i - 斜體,img - 圖片,b - 粗體，label - 表格標(biāo)簽伺糠，select - 項(xiàng)目選擇蒙谓，textarea - 多行文本輸入框，sub - 下標(biāo)训桶，
sup - 上標(biāo)累驮，q - 短引用；
***塊元素***：
div - 常用塊級(jí)舵揭，dl - 定義列表谤专，dt，dd午绳，ul- 非排序列表置侍，li，ol-排序表單拦焚，p-段落蜡坊，h1，h2耕漱，h3算色，h4，h5-標(biāo)題螟够，table-表格，fieldset - form控制組，form - 表單妓笙，
***空元素***：
br-換行若河，hr-水平分割線；
20.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)寞宫？
（1）web標(biāo)準(zhǔn)規(guī)范要求萧福，書寫標(biāo)簽必須閉合、標(biāo)簽小寫辈赋、不亂嵌套鲫忍，可提高搜索機(jī)器人對(duì)網(wǎng)頁(yè)內(nèi)容的搜索幾率；
（2）建議使用外鏈css和js腳本钥屈，從而達(dá)到結(jié)構(gòu)與行為悟民、結(jié)構(gòu)與表現(xiàn)的
分離，提高頁(yè)面的渲染速度篷就，能更快地顯示頁(yè)面的內(nèi)容射亏；
（3）樣式與標(biāo)簽的分離，更合理的語(yǔ)義化標(biāo)簽竭业，使內(nèi)容能被更多的用戶
所訪問(wèn)智润、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件未辆， 從而降低
維護(hù)成本窟绷、改版更方便；
（4）不需要變動(dòng)頁(yè)面內(nèi)容咐柜，便可提供打印版本而不需要復(fù)制內(nèi)容兼蜈，提高
網(wǎng)站易用性；遵循w3c制定的web標(biāo)準(zhǔn)炕桨，能夠使用戶瀏覽者更方便的閱讀饭尝，使網(wǎng)頁(yè)開(kāi)發(fā)者之間更好的交流。
20.xhtml和html有什么區(qū)別?
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言献宫，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言祠汇；
最主要的不同：
XHTML?元素必須被正確地嵌套。
XHTML?元素必須被關(guān)閉桨菜。
標(biāo)簽名必須用小寫字母硼讽。
XHTML?文檔必須擁有根元素。
21.Doctype??嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式捷兰，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范（html/Xhtml）一般為?嚴(yán)格?過(guò)度?基于框架的html文檔
加入XMl聲明可觸發(fā)立叛，解析方式更改為IE5.5?擁有IE5.5的bug
22..為什么沒(méi)有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）贡茅；
23.標(biāo)簽上title與alt屬性的區(qū)別是什么?
alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息秘蛇，它會(huì)直接輸出在原本加載圖片的地方其做；
title屬性是在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就沒(méi)有了赁还，有點(diǎn)類似jQuery的hover妖泄，你可以自己試試，另外艘策，HTML的絕大多數(shù)標(biāo)簽都支持title屬性蹈胡，title屬性就是專門做提示信息的；
24.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
所謂的標(biāo)準(zhǔn)模式是指朋蔫，瀏覽器按W3C標(biāo)準(zhǔn)解析執(zhí)行代碼罚渐；
怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣驯妄，所以我們稱之為怪異模式荷并。
瀏覽器解析時(shí)到底使用標(biāo)準(zhǔn)模式還是怪異模式，與你網(wǎng)頁(yè)中的DTD聲明直接相關(guān)富玷，DTD聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型璧坟，會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁(yè)并顯示，忽略DTD聲明,將使網(wǎng)頁(yè)進(jìn)入怪異模式(quirks mode)赎懦。
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
25.清除浮動(dòng)的幾種方式雀鹃，各自的優(yōu)缺點(diǎn)
1.使用空標(biāo)簽清除浮動(dòng) clear:both（理論上能清楚任何標(biāo)簽，增加無(wú)意義的標(biāo)簽）
2.使用overflow:hidden（空標(biāo)簽元素清除浮動(dòng)而不得不增加無(wú)意代碼的弊端,,使用zoom:1用于兼容IE）
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)
26.什么是塊級(jí)格式化上下文（BFC）励两，如何工作黎茎？
1.規(guī)范解釋
塊格式化上下文（Block Formatting Context，BFC）是Web頁(yè)面的可視化CSS渲染的一部分当悔，是布局過(guò)程中生成塊級(jí)盒子的區(qū)域傅瞻，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。
2.通俗解釋：
BFC 是一個(gè)獨(dú)立的布局環(huán)境,可以理解為一個(gè)容器,在這個(gè)容器中按照一定規(guī)則進(jìn)行物品擺放,并且不會(huì)影響其它環(huán)境中的物品盲憎。
如果一個(gè)元素符合觸發(fā)BFC的條件嗅骄，則該元素中的布局不受外部影響。
浮動(dòng)元素會(huì)創(chuàng)建BFC饼疙，所以浮動(dòng)元素內(nèi)部子元素主要受浮動(dòng)元素影響溺森，兩個(gè)浮動(dòng)元素之間是互不影響的。
3.創(chuàng)建方式：
根元素或包含根元素的元素
浮動(dòng)元素 float ＝ left | right 或 inherit（≠ none）
絕對(duì)定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
28.css穿透點(diǎn)擊
CSS新屬性pointer-events：字面理解是點(diǎn)擊鼠標(biāo)事件窑眯，值分別是auto和none屏积。 當(dāng)使用pointer-events:none,表示它將捕獲不到任何點(diǎn)擊，而只是讓事件穿透到它的下面
29.css垂直水平居中的方法磅甩？
1.父元素沒(méi)有高度
2.父元素有高度
在父元素上設(shè)置flex炊林，并設(shè)置justify-content和align-items為center，使得子元素水平垂直居中卷要，不需要設(shè)置子元素
3.定位
使用absolute+margin
子絕父相+子元素四個(gè)方向都為0+margin：auto
前提條件：子元素寬高已知
使用absolute+margin
使用margin負(fù)值進(jìn)行相對(duì)移動(dòng)渣聚，子絕父相+left独榴、top+margin
前提條件：子元素寬高已知
4.translate代替margin負(fù)值
ransform中translate移動(dòng)就是相對(duì)自身寬高,使用translate即可代替margin的計(jì)算
transform:translate(-50%,-50%);
5.table
table-cell+vertical-align+text-align
30.移動(dòng)端實(shí)現(xiàn)0.5px
方案1: 偽元素+scale (兼容性最好，推薦)
實(shí)現(xiàn)方式：給容器設(shè)置偽元素饵逐，設(shè)置絕對(duì)定位括眠，寬高都是200%彪标，邊框是1px倍权，然后使用transform:scale(0.5) 讓偽元素縮小原來(lái)的一半，此時(shí)偽元素的邊框和容器的邊緣重合捞烟。
方案2: 偽元素+背景 (適合設(shè)置一條邊框薄声，沒(méi)辦法展示圓角)
實(shí)現(xiàn)方式：給容器設(shè)置偽元素，設(shè)置絕對(duì)定位题画，高度1px默辨，背景圖設(shè)置線性漸變，一半有顏色一半透明苍息，視覺(jué)上只有0.5px缩幸。
方案3: 利用陰影代替邊框
特點(diǎn)：方便，能正常展示圓角竞思，而且能實(shí)現(xiàn)0.1px等更細(xì)的邊框表谊，兼容性還行。
