溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css中Doctype的作用是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
1. Doctype作用是什么？嚴格模式與混雜模式分別是如何觸發這兩種模式的，區分它們有何意義？
（1）<!DOCTYPE> 聲明位于文檔中的最前面，處于<html>標簽之前。告知瀏覽器的解析器，用什么文檔類型規范來解析這個文檔。
（2）嚴格模式的排版和JavaScript運作模式是以該瀏覽器支持的最高標準運行。
（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
2. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？
（1）CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，比如div默認display屬性值為“block”，稱為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（2）行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h2 h3 h4 h5…p
（3）知名的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
3. 如何理解CSS的盒子模型？
每個HTML元素都是長方形盒子。
（1）盒子模型有兩種，IE盒子模型、標準W3C盒子模型；IE的content部分包含了border和pading。
（2）盒模型包含：內容(content)、填充(padding)、邊界(margin)、邊框(border)。
4. link和@import的區別是？
（1）link屬于XHTML標簽，而@import是CSS提供的。
（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
（3）import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。
（4）link方式的樣式權重高于@import的權重。
5. CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？CSS 3新增偽類有哪些？
l id選擇器（# myid）
l 類選擇器（.myclassname）
l 標簽選擇器（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 ;
優先級就近原則，樣式定義最近者為準，載入樣式以最后載入的定位為準。
優先級為：
!important > id > class > tag
important 比 內聯優先級高
CSS3新增偽類舉例：
l p:first-of-type 選擇屬于其父元素的首個<p>元素的每個<p>元素。
l p:last-of-type 選擇屬于其父元素的最后<p>元素的每個<p>元素。
l p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個<p>元素。
l p:only-child 選擇屬于其父元素的唯一子元素的每個<p>元素。
l p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個<p>元素。
l :enabled、:disabled 控制表單控件的禁用狀態。
l :checked 單選框或復選框被選中。
6. 如何居中div，如何居中一個浮動元素？
（1）給div設置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
（2）居中一個浮動元素
確定容器的寬高，如寬500、高 300的層，設置層的外邊距：
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
7. 瀏覽器的內核分別是什么？經常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么，常用Hack的技巧有哪些？
（1）IE瀏覽器的內核Trident、Mozilla的Gecko、Google的WebKit、Opera內核Presto；
（2）經常遇到的瀏覽器的兼容性：
l png24為的圖片在IE6瀏覽器上出現背景，解決方案是做成PNG8。
l 瀏覽器默認的margin和padding不同，解決方案是加一個全局的*{margin:0;padding:0;}來統一。
l IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在IE 6顯示margin比設置的大。
l 浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入_display:inline;將其轉化為行內屬性。（_這個符號只有IE 6會識別）。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE 8和IE 7、IE 6分離開來，這樣IE 8已經獨立識別。
css
.bb{
background-color:#f1ee18; /*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff; /*IE6、7識別*/
_background-color:#1e0bd1; /*IE6識別*/
（3）常用Hack的技巧：
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一通過getAttribute()獲取自定義屬性。
IE下，even對象有x,y屬性，但是沒有pageX,pageY屬性；Firefox下，event對象有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件注釋，缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
8. HTML5\CSS3有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
HTML5現在已經不是SGML的子集，主要是關于圖像、位置、存儲、地理定位等功能的增加。新特性有：
l 繪畫canvas元素
l 用于媒介回放的 video 和 audio 元素
l 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
l sessionStorage 的數據在瀏覽器關閉后自動刪除
l 語意化更好的內容元素，比如 article、footer、header、nav、section
l 表單控件，calendar、date、time、email、url、search
CSS3實現圓角、，陰影、對文字加特效，增加了更多的CSS選擇器，多背景rgba，新的技術有webworker、websockt、Geolocation。
移除的元素包括：
l 純表現的元素 basefont、big、center、font、 s、strike、tt、u；
l 對可用性產生負面影響的元素 frame、frameset、noframes。
瀏覽器兼容問題解決方案：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式，當然最好的方式是直接使用成熟的框架：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9. 你怎么來實現頁面設計圖，你認為前端應該如何高質量完成工作？
l 首先劃分成頭部、body、腳部；
l 實現效果圖是最基本的工作，精確到2px；
l 與設計師，產品經理的溝通和項目的參與
l 做好的頁面結構，頁面重構和用戶體驗
l 處理Hack兼容，寫出優美的代碼格式
l 針對服務器的優化、擁抱HTML5。
10. 列出display的值，說明它們的作用。position的值里，relative和absolute定位原點是？
display的值：
l block 像塊類型元素一樣顯示。
l none 缺省值。像行內元素類型一樣顯示。
l inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。
l list-item 像塊類型元素一樣顯示，并添加樣式列表標記。
relative和absolute定位原點：
l absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。
l relative：生成相對定位的元素，相對于其正常位置進行定位。
11. 頁面重構怎么操作？
把“未采用CSS，大量使用HTML進行定位、布局，或者雖然已經采用CSS，但是未遵循HTML結構化標準的站點”變成“讓標記回歸標記的原本意義。通過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。”的過程就是網站重構
網站為什么要進行重構（網站重構的好處）
a、使頁面加載得更快速；
b、降低帶寬帶來的費用，節約成本；
c、讓你在修改設計時更有效率而代價更低；
d、幫助你的整個站點保持視覺的一致性；
e、更利于搜索引擎的檢索（符合SEO的規范）；
f、令站點更容易被各種瀏覽器和用戶
編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。
12. 語義化的理解？
l HTML語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；
l 在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；
l 搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于SEO。
l 使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。
13. HTML5的離線儲存？
l localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
l sessionStorage 數據在瀏覽器關閉后自動刪除。
14. 為什么要初始化CSS樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法就是：* {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. 對BFC規范的理解？
BFC是W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。
16. iframe有哪些缺點？
l iframe會阻塞主頁面的Onload事件；
l iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過JavaScript動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
17. CSS是怎樣定義權重規則的？
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
/*權重為1*/
div{
/*權重為10*/
.class1{
/*權重為100*/
#id1{
/*權重為100+1=101*/
#id1 div{
/*權重為10+1=11*/
.class1 div{
/*權重為10+10+1=21*/
.class1 .class2 div{
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現。
18. 如何理解表現與內容相分離？
表現與結構相分離簡單的說就是HTML中只有標簽元素 表現完全是由CSS文件控制的。
19. 如何解決IE6的雙邊距問題？
解決IE 6雙邊距問題塊級元素就加display：inline；行內元素轉塊級元素display：inline后面再加display：table。
20. 如何定義高度為1px的容器？
div{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
IE 6下這個問題是默認行高造成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也可以解決。
21. 如何解決IE 6的3像素問題？
_zoom:1; margin-left: value; _margin-left: value-3px;
22. Firefox下文本無法撐開容器的高度，如何解決？
清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}
23. 怎么樣才能讓層顯示在Flash之上呢?
解決的辦法是給Flash設置透明屬性
<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
24. cursor:hand在FF下不顯示小手，如何解決？
cursor; pointer;
25. 在IE中內容會自適應高度，而FF不會自適應高度，怎么辦？
在要自適應高度的層中加一個層，樣式為
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層加上一個偽類。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
“css中Doctype的作用是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
