3. 如何理解CSS的盒子模型？
每個(gè)HTML元素都是長(zhǎng)方形盒子。
（1）盒子模型有兩種，IE盒子模型、標(biāo)準(zhǔn)W3C盒子模型；IE的content部分包含了border和pading。
（2）盒模型包含：內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border)。
4. link和@import的區(qū)別是？
（1）link屬于XHTML標(biāo)簽，而@import是CSS提供的。
（2）頁(yè)面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載。
（3）import只在IE 5以上才能識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題。
（4）link方式的樣式權(quán)重高于@import的權(quán)重。
5. CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？CSS 3新增偽類有哪些？
l id選擇器（# myid）
l 類選擇器（.myclassname）
l 標(biāo)簽選擇器（div、h2、p）
l 相鄰選擇器（h2 + p）
l 子選擇器（ul < li）
l 后代選擇器（li a）
l 通配符選擇器（ * ）
l 屬性選擇器（a[rel = "external"]）
l 偽類選擇器（a: hover, li: nth - child）
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承 ：border padding margin width height ;
優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn)，載入樣式以最后載入的定位為準(zhǔn)。
優(yōu)先級(jí)為：
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
CSS3新增偽類舉例：
l p:first-of-type 選擇屬于其父元素的首個(gè)
元素的每個(gè)
元素。
l p:last-of-type 選擇屬于其父元素的最后
元素的每個(gè)
元素。
l p:only-of-type 選擇屬于其父元素唯一的
元素的每個(gè)
元素。
l p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)
元素。
l p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)
元素。
l :enabled、:disabled 控制表單控件的禁用狀態(tài)。
l :checked 單選框或復(fù)選框被選中。
6. 如何居中div，如何居中一個(gè)浮動(dòng)元素？
（1）給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
（2）居中一個(gè)浮動(dòng)元素
確定容器的寬高，如寬500、高 300的層，設(shè)置層的外邊距：
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
7. 瀏覽器的內(nèi)核分別是什么？經(jīng)常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么，常用Hack的技巧有哪些？
（1）IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Google的WebKit、Opera內(nèi)核Presto；
（2）經(jīng)常遇到的瀏覽器的兼容性：
l png24為的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。
l 瀏覽器默認(rèn)的margin和padding不同，解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
l IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE 6顯示margin比設(shè)置的大。
l 浮動(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)只有IE 6會(huì)識(shí)別）。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。
接著，再次使用“+”將IE 8和IE 7、IE 6分離開(kāi)來(lái)，這樣IE 8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18; /*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff; /*IE6、7識(shí)別*/
_background-color:#1e0bd1; /*IE6識(shí)別*/
（3）常用Hack的技巧：
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;來(lái)解決。
超鏈接訪問(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 {}
8. HTML5\CSS3有哪些新特性、移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？
HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像、位置、存儲(chǔ)、地理定位等功能的增加。新特性有：
l 繪畫(huà)canvas元素
l 用于媒介回放的 video 和 audio 元素
l 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
l sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
l 語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
l 表單控件，calendar、date、time、email、url、search
CSS3實(shí)現(xiàn)圓角、，陰影、對(duì)文字加特效，增加了更多的CSS選擇器，多背景rgba，新的技術(shù)有webworker、websockt、Geolocation。
移除的元素包括：
l 純表現(xiàn)的元素 basefont、big、center、font、 s、strike、tt、u；
l 對(duì)可用性產(chǎn)生負(fù)面影響的元素 frame、frameset、noframes。
瀏覽器兼容問(wèn)題解決方案：
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式，當(dāng)然最好的方式是直接使用成熟的框架：
9. 你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作？
l 首先劃分成頭部、body、腳部；
l 實(shí)現(xiàn)效果圖是最基本的工作，精確到2px；
l 與設(shè)計(jì)師，產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與
l 做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶體驗(yàn)
l 處理Hack兼容，寫出優(yōu)美的代碼格式
l 針對(duì)服務(wù)器的優(yōu)化、擁抱HTML5。
10. 列出display的值，說(shuō)明它們的作用。position的值里，relative和absolute定位原點(diǎn)是？
display的值：
l block 像塊類型元素一樣顯示。
l none 缺省值。像行內(nèi)元素類型一樣顯示。
l inline-block 像行內(nèi)元素一樣顯示，但其內(nèi)容像塊類型元素一樣顯示。
l list-item 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
relative和absolute定位原點(diǎn)：
l absolute：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。
l relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
11. 頁(yè)面重構(gòu)怎么操作？
把“未采用CSS，大量使用HTML進(jìn)行定位、布局，或者雖然已經(jīng)采用CSS，但是未遵循HTML結(jié)構(gòu)化標(biāo)準(zhǔn)的站點(diǎn)”變成“讓標(biāo)記回歸標(biāo)記的原本意義。通過(guò)在HTML文檔中使用結(jié)構(gòu)化的標(biāo)記以及用CSS控制頁(yè)面表現(xiàn)，使頁(yè)面的實(shí)際內(nèi)容與它們呈現(xiàn)的格式相分離的站點(diǎn)?！钡倪^(guò)程就是網(wǎng)站重構(gòu)
網(wǎng)站為什么要進(jìn)行重構(gòu)（網(wǎng)站重構(gòu)的好處）
a、使頁(yè)面加載得更快速；
b、降低帶寬帶來(lái)的費(fèi)用，節(jié)約成本；
c、讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低；
d、幫助你的整個(gè)站點(diǎn)保持視覺(jué)的一致性；
e、更利于搜索引擎的檢索（符合SEO的規(guī)范）；
f、令站點(diǎn)更容易被各種瀏覽器和用戶
編寫 CSS、讓頁(yè)面結(jié)構(gòu)更合理化，提升用戶體驗(yàn)，實(shí)現(xiàn)良好的頁(yè)面效果和提升性能。
12. 語(yǔ)義化的理解？
l HTML語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
l 在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；
l 搜索引擎的爬蟲(chóng)依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。
l 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
13. HTML5的離線儲(chǔ)存？
l localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
l sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
14. 為什么要初始化CSS樣式？
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡(jiǎn)單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）
淘寶的樣式初始化：
body, h2, h3, h4, h5, h6, h7, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h2, h3, h4, h5, h6, h7{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
15. 對(duì)BFC規(guī)范的理解？
BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。
16. iframe有哪些缺點(diǎn)？
l iframe會(huì)阻塞主頁(yè)面的Onload事件；
l iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)JavaScript動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。
17. CSS是怎樣定義權(quán)重規(guī)則的？
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/*權(quán)重為1*/
div{
/*權(quán)重為10*/
.class1{
/*權(quán)重為100*/
#id1{
/*權(quán)重為100+1=101*/
#id1 div{
/*權(quán)重為10+1=11*/
.class1 div{
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{
如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)。
18. 如何理解表現(xiàn)與內(nèi)容相分離？
表現(xiàn)與結(jié)構(gòu)相分離簡(jiǎn)單的說(shuō)就是HTML中只有標(biāo)簽元素 表現(xiàn)完全是由CSS文件控制的。
19. 如何解決IE6的雙邊距問(wèn)題？
解決IE 6雙邊距問(wèn)題塊級(jí)元素就加display：inline；行內(nèi)元素轉(zhuǎn)塊級(jí)元素display：inline后面再加display：table。
20. 如何定義高度為1px的容器？
div{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
IE 6下這個(gè)問(wèn)題是默認(rèn)行高造成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也可以解決。
21. 如何解決IE 6的3像素問(wèn)題？
_zoom:1; margin-left: value; _margin-left: value-3px;
22. Firefox下文本無(wú)法撐開(kāi)容器的高度，如何解決？
清除浮動(dòng) .clear{ clear:both; height:0px; overflow:hidden;}
23. 怎么樣才能讓層顯示在Flash之上呢?
解決的辦法是給Flash設(shè)置透明屬性
或者
24. cursor:hand在FF下不顯示小手，如何解決？
cursor; pointer;
25. 在IE中內(nèi)容會(huì)自適應(yīng)高度，而FF不會(huì)自適應(yīng)高度，怎么辦？
在要自適應(yīng)高度的層中加一個(gè)層，樣式為
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個(gè)小小的問(wèn)題，高度會(huì)多一個(gè)像素。還有一種解決方法，給當(dāng)前層加上一個(gè)偽類。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
“css中Doctype的作用是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
分享標(biāo)題：css中Doctype的作用是什么
網(wǎng)站路徑：http://weahome.cn/article/jghgpi.html
重慶分公司
重慶分公司
