CSS中
link和@import的區(qū)別是？
'' (1) link屬于HTML標簽倚搬，而@import是CSS提供的;
''
'' (2) 頁面被加載的時十饥，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
''
'' (3) import只在IE5以上才能識別春霍，而link是HTML標簽，無兼容問題;
''
'' (4) link方式的樣式的權(quán)重 高于@import的權(quán)重.
position:absolute和float屬性的異同
- 共同點：對內(nèi)聯(lián)元素設(shè)置
float和absolute屬性叶眉，可以讓元素脫離文檔流址儒，并且可以設(shè)置其寬高芹枷。
- 不同點：
float仍會占據(jù)位置，absolute會覆蓋文檔流中的其他元素莲趣。
介紹一下box-sizing屬性鸳慈？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box喧伞。
content-box：讓元素維持W3C的標準盒模型走芋。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）潘鲫。設(shè)置width/height屬性指的是border + padding + content
標準瀏覽器下翁逞，按照W3C規(guī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距溉仑，就會影響元素的盒子尺寸挖函，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局浊竟。
CSS 選擇符有哪些挪圾？哪些屬性可以繼承？優(yōu)先級算法如何計算逐沙？ CSS3新增偽類有那些？
'' 1.id選擇器（ # myid）
''
'' 2.類選擇器（.myclassname）
''
'' 3.標簽選擇器（div, h1, p）
''
'' 4.相鄰選擇器（h1 + p）
''
'' 5.子選擇器（ul > li）
''
'' 6.后代選擇器（li a）
''
'' 7.通配符選擇器（ * ）
''
'' 8.屬性選擇器（a[rel = "external"]）
''
'' 9.偽類選擇器（a: hover, li:nth-child）
優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比 id 要高
CSS3新增偽類舉例：
'' p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素洼畅。
''
'' p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素吩案。
''
'' p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
''
'' p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素帝簇。
''
'' p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素徘郭。
''
'' :enabled :disabled 控制表單控件的禁用狀態(tài)。
''
'' :checked 單選框或復(fù)選框被選中丧肴。
CSS3有哪些新特性残揉？
'' CSS3實現(xiàn)圓角（border-radius），陰影（box-shadow）芋浮，
''
'' 對文字加特效（text-shadow抱环、），線性漸變（gradient）纸巷，旋轉(zhuǎn)（transform）
''
'' transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
''
'' 增加了更多的CSS選擇器 多背景 rgba
''
'' 在CSS3中唯一引入的偽元素是::selection.
''
'' 媒體查詢镇草，多欄布局
''
'' border-image
CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box瘤旨，幾種盒模型計算元素寬高的區(qū)別如下：
content-box（默認）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
對BFC規(guī)范的理解梯啤？
'' BFC，塊級格式化上下文存哲，一個創(chuàng)建了新的BFC的盒子是獨立布局的因宇，盒子里面的子元素的樣式不會影響到外面的元素七婴。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的margin會發(fā)生折疊。
''
'' （W3C CSS 2.1 規(guī)范中的一個概念察滑，它決定了元素如何對其內(nèi)容進行布局打厘，以及與其他元素的關(guān)系和相互作用。
說說你對語義化的理解杭棵？
'' 1婚惫，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
''
'' 2，有利于SEO：和搜索引擎建立良好溝通魂爪，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重先舷；
''
'' 3，方便其他設(shè)備解析（如屏幕閱讀器滓侍、盲人閱讀器蒋川、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
''
'' 4撩笆，便于團隊開發(fā)和維護捺球，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向夕冲，遵循W3C標準的團隊都遵循這個標準氮兵，可以減少差異化。
Doctype作用? 嚴格模式與混雜模式如何區(qū)分歹鱼？它們有何意義?
1）泣栈、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前弥姻。告知瀏覽器以何種模式來渲染文檔南片。
2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行庭敦。
3）疼进、在混雜模式中，頁面以寬松的向后兼容的方式顯示秧廉。模擬老式瀏覽器的行為以防止站點無法工作伞广。
4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)定血。
你知道多少種Doctype文檔類型赔癌？
'' 該標簽可聲明三種 DTD 類型，分別表示嚴格版本澜沟、過渡版本以及基于框架的 HTML 文檔灾票。
''
'' HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset茫虽。
''
'' XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict刊苍、Transitional 以及 Frameset既们。
''
'' Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，而 Quirks
''
'' （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁正什。
HTML與XHTML——二者有什么區(qū)別
'' 區(qū)別：
''
'' 1.所有的標記都必須要有一個相應(yīng)的結(jié)束標記
''
'' 2.所有標簽的元素和屬性的名字都必須使用小寫
''
'' 3.所有的XML標記都必須合理嵌套
''
'' 4.所有的屬性必須用引號""括起來
''
'' 5.把所有<和&特殊符號用編碼表示
''
'' 6.給所有屬性賦一個值
''
'' 7.不要在注釋內(nèi)容中使“--”
''
'' 8.圖片必須有說明文字
常見兼容性問題啥纸？
'' png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.
''
'' 瀏覽器默認的margin和padding不同婴氮。解決方案是加一個全局的{margin:0;padding:0;}來統(tǒng)一斯棒。
''
'' IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下主经，在ie6顯示margin比設(shè)置的大荣暮。
''
'' 浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設(shè)置了浮動罩驻，同時又設(shè)置了margin-left或margin-right穗酥，margin值會加倍。）
''
'' #box{ float:left; width:10px; margin:0 0 0 100px;}
''
'' 這種情況之下IE會產(chǎn)生20px的距離惠遏，解決方案是在float的標簽樣式控制中加入
'' display:inline;將其轉(zhuǎn)化為行內(nèi)屬性砾跃。(這個符號只有ie6會識別)
''
'' 漸進識別的方式，從總體中逐漸排除局部节吮。
''
''
'' 首先抽高，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來透绩。
''
'' 接著厨内，再次使用“+”將IE8和IE7、IE6分離開來渺贤，這樣IE8已經(jīng)獨立識別。
''
'' css
''
'' .bb{
''
'' background-color:#f1ee18;/所有識別/
''
'' .background-color:#00deff\9; /IE6请毛、7志鞍、8識別/
''
'' +background-color:#a200ff;/IE6、7識別/
''
'' _background-color:#1e0bd1;/IE6識別*/
''
'' }
''
''
'' 怪異模式問題：漏寫DTD聲明方仿，F(xiàn)irefox仍然會按照標準模式來解析網(wǎng)頁固棚，但在IE中會觸發(fā)
'' 怪異模式。為避免怪異模式給我們帶來不必要的麻煩仙蚜，最好養(yǎng)成書寫DTD聲明的好習(xí)慣〈酥蓿現(xiàn)在
'' 可以使用html5推薦的寫法：<doctype html>
上下margin重合問題
'' ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合委粉，但是margin-top和margin-bottom卻會發(fā)生重合呜师。
''
'' 解決方法，養(yǎng)成良好的代碼編寫習(xí)慣贾节，同時采用margin-top或者同時采用margin-bottom汁汗。
解釋下浮動和它的工作原理衷畦？清除浮動的技巧
'' 浮動元素脫離文檔流，不占據(jù)空間知牌。浮動元素碰到包含它的邊框或者浮動元素的邊框停留祈争。
''
''
'' 1.使用空標簽清除浮動。
''
'' 這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽角寸。
''
'' 2.使用overflow菩混。
''
'' 給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
''
'' 3.使用after偽對象清除浮動扁藕。
''
'' 該方法只適用于非IE瀏覽器沮峡。具體寫法可參照以下示例。使用中需注意以下幾點纹磺。一帖烘、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實際高出若干像素橄杨；
浮動元素引起的問題和解決辦法秘症？
'' 浮動元素引起的問題：
''
'' （1）父元素的高度無法被撐開，影響與父元素同級的元素
''
'' （2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
''
'' （3）若非第一個元素浮動式矫，則該元素之前的元素也需要浮動乡摹，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題采转，對于問題1聪廉，添加如下樣式，給父元素添加clearfix樣式：
'' .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
''
'' .clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
'' 1故慈，額外標簽法板熊，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
''
'' 2察绷，使用after偽類
''
'' #parent:after{
''
'' content:".";
''
'' height:0;
''
'' visibility:hidden;
''
'' display:block;
''
'' clear:both;
''
'' }
''
''
'' 3,浮動外部元素
''
'' 4,設(shè)置overflow為hidden或者auto
