web前端面試題（HTML&CSS）下 答案詳解
總結了一下遇到的面試上的問題，希望能幫助到大家【歪脖樹】
1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器的解析器，用什麼文件型別規範來解析這個文件。
（2）嚴格模式的排版和JS運作模式是以該瀏覽器支援的最高標準執行。
（3）在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
2.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
（1）塊級元素。預設
（2）行內元素。預設display屬性是inline。a b span img input select strong。
（3）空元素。功能性元素，標籤可以不閉合。<br> <hr> <img> <input> <link> <meta>
3.介紹一下CSS的盒子模型？
（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;--
（2）盒模型：
4.link和@import的區別是？
（1）<link>屬於XHTML標籤，而@import是CSS提供的;
（2）頁面被載入的時，<link>會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import只在IE5以上才能識別，而<link>是XHTML標籤，無相容問題;
（4）<link>方式的樣式的權重高於@import的權重。
5.CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？
CSS 選擇符：
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)
可繼承的樣式：
1) font-size
2) font-family
3) color
4) text-indent
不可繼承的樣式：
1) border
2) padding
3) margin
4) width
5) height
優先順序演算法：
1) 優先順序就近原則，同權重情況下樣式定義最近者為準;
2) 載入樣式以最後載入的定位為準;
3) 3.!important > id > class > tag
4) important 比 內聯優先順序高，但內聯比 id 要高
CSS3新增偽類舉例：
1) p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
2) p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
3) p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
4) p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
5) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
6) :enabled :disabled 控制表單控制元件的禁用狀態。
7) :checked 單選框或複選框被選中。
CSS3有哪些新特性？
1) CSS3實現圓角（border-radius），陰影（box-shadow），
2) 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4) 增加了更多的CSS選擇器 多背景 rgba
5) 在CSS3中唯一引入的偽元素是 ::selection.
6) 媒體查詢，多欄佈局
7) border-image
6.HTML語義化的理解？
（1）用正確的標籤做正確的事情！
（2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
（3）在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的。
（4）搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
（5）使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
7.瀏覽器的核心分別是什麼？
IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera核心原為Presto，現為Blink。
8. iframe有那些缺點？
（1）iframe會阻塞主頁面的Onload事件；
（2）iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
解決方法：使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe新增src屬性值，這樣可以可以繞開以上兩個問題。
9.用純 CSS 建立一個三角形
.triangle{
width: 0;height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid red;
}
10.一個滿屏”品”字佈局如何設計?
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.header{height:200px;background:#e33;width:100%;}
.main{width:100%;height:200px;overflow:hidden;}
.main .left,.main .right{width:50%;height:200px;float:left;background:#a23;}
.main .right{background:#e11;}
相關推薦
web前端面試題（HTML&CSS）下 答案詳解
總結了一下遇到的面試上的問題，希望能幫助到大家【歪脖樹】 1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義? （1）<!DOCTYPE> 宣告位於文件中的最前面，處於 &
web前端面試題（十七）之陣列快速排序?
思路: a) 在資料集之中，選擇一個元素作為"基準"（pivot）。 b) 所有小於"基準"的元素，都移到"基準"的左邊； 所有大於"基準"的元素，都移到"基準"的右邊。 c) 對"基準"左邊和右邊的兩個子集， 不斷重複第一步和第二步， 直到所有子集只剩下一個元素為止。 var quickSort
Web前端面試題（四）
就會 對象 wii 出現 閉包 需要 一個 settime post 1、wiindow.onload和$(document).ready的區別 window.onload只能出現一次，$(document).ready能出現多次 window.onload需要等所有文件都
Web前端面試題（前端開發人員必備）
本人也在學習前端方面的技術，為以後轉行前端做好準備： HTML: 1.對WEB標準以及W3C的理解與認識 標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，
前端面試題（二十三）之前端需要注意哪些SEO？
合理的title，description，keywords：搜尋對著三項的權重逐個減小，title值強調重點即可，重要的關鍵詞出現不要超過兩次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywor
幾道常考的前端面試題（蘑菇街）系列一
今天，偶然在網上看到幾道蘑菇街的筆試題，感覺這些都是前端必考必會的一些常規題，之前做阿里筆試題的時候也碰到其中幾道， 特此哈拿來給自己練手。 好棒啊，CSDN寫部落格，前面不小心關了頁面，都給我自動儲存了，贊一個!!! 自己寫的答案，有不對的，歡迎大家指正，或者有哪些可
2018最新Web前端面試題之HTML部分~~好久不見
好久不見 Doctype作用？標準模式與相容模式各有什麼區別? Doctype用於向瀏覽器申明使用標準模式來解析文件 標準模式是以瀏覽器最高級別來解析文件，而相容模式是以向後相容的方式來解
前端面試題（初級版）
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔
前端面試題（適合vue）
面試題集合1、v-model是什麼？ vue中標籤怎麼繫結事件？答：v-model這個指令只能用在表單元素上，可以用他進行雙向資料繫結。繫結事件：<input @click=doLog() />2、mvvm框架是什麼？說說對雙向資料繫結的理解？它和其它框架（jqu
web前端面試題整理（HTML篇）
pad 關閉 選擇 words vid onunload adding per end 1. h5的改進: 新元素畫布canvas: HTML5 <canvas>元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成音頻audio視頻vid
前端面試題（來自前端網http://www.qdfuns.com/notes/23515/c9163ddd620baac5dd23141d41982bb8.html）
設置 session hat eval 減少 還需要 height 狀態碼 一次 HTML&CSS 1. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)? (Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。 (Q2)內核
web前端面試題系列：（二）
html name 價值 編程 oct rom repeat 清除 frame 1、列舉你工作中遇到的IE6 BUG，談談解決方案 a.雙倍邊距bug: 例如：當給父元素內第一個浮動元素設置margin-left或margin-right的時候，margin屬性會加倍，
2017前端面試題之Html篇（1）
utf doctype clas 停止 要求 驅動 抓取 -c 顯示錯誤 1 . doctype(文檔類型) 的作用是什麽？ 對文檔進行有效性驗證: 它告訴用戶代理和校驗器這個文檔是按照什麽DTD 寫的。這個動作是被動的， 每次頁面加載時，瀏覽器並不會下載DTD
Web前端面試題及答案（姚聰經驗整理）
雖然個人認為有些知識不是必須記憶的，需要的時候可以查閱筆記，但是對於得到面試的機會還是很重要的。 HTML&CSS 1、清除浮動的幾種方式，各自的優缺點 清除浮動：使父元素圍住浮動的子元素，避免對後續元素造成影響。 （1）給父元素設定overflow:hidd
熬夜吐血整理最全web前端面試題合輯（三）
JavaScript篇 Javascript很多考題都出自紅寶書（JavaScript高階程式設計） JS 有哪些資料型別？ 基本資料型別：String Boolean Number Unde
熬夜吐血整理最全web前端面試題合輯（四）
Ajax/ ES6/Http等知識 Ajax是什麼? 如何建立一個Ajax？ Ajax的全稱：Asynchronous Javascript And XML。 Ajax是一種用於建立快速動態網頁的技
2018年 年底web前端面試題總結（附帶答案）
javascript: JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 請用js去除字串空格？ 方法一：使
web前端面試題整理（前端和計算機相關知識）
1. 你能描述一下漸進增強和優雅降級之間的不同嗎?定義:優雅降級（graceful degradation): 一開始就構建站點的完整功能，然後針對瀏覽器測試和修復漸進增強（progressive enhancement): 一開始只構建站點的最少特性，然後不斷針對各瀏覽器
web前端面試題集錦（轉）
web前端面試題集錦 偽類和偽元素的區別 CSS 偽類用於向某些選擇器新增特殊的效果（active、docus、hover、link、visited、lang等）。 CSS 偽元素用於將特殊的效果新增到某些選擇器（first-letter、first
web前端面試題-各大公司面試題（360）
1 下面程式碼的輸出值是： alert(1&&2) //2 answer： 1、只要“||”前面為false,不管“||”後面是true還是false，都返回“||”後面的值。 2、只要“||”前面為true,不管“||”後面是tr