先注明一下題目來源,劍哥的前端面試每日3+1 大家如果有興趣可以去github上答題
1、 頁面導入樣式,使用link與@import有什么區別?
a、從屬關系:link是html標簽,@import是css提供的
b、加載差異:頁面加載時,link會同事加載;而@import引入的css會在頁面加載完成后加載
c、兼容性: link沒有兼容問題,@import不兼容ie5一下的瀏覽器
d、link可以通過js操作dom插入link標簽改變樣式,而@import不能
2、.描述塊級元素與行內元素的區別?寫出五個塊級元素及五個行內元素?img是塊級元素還是行內元素?怎么指定元素以塊級元素展示?
a 區別
內元素會在一條直線上排列,水平方向排列;塊級元素各占據一行,垂直方向排列
塊級元素可以包含行內元素和塊級元素,行內元素不能包含塊級元素,只能包含文字或其它行內元素
行內元素設置width,height無效,margin上下無效,padding上下無效
b 列舉
行內元素: span,a, em, strong, i, input, select
塊級元素:div,ul,ol, li, h1-h6,p
c img和input屬於行內替換元素,height/width/padding/margin均可用。效果等於塊元素
d display:block;
3、 H5有哪些新特性?
a 語義化標簽: header,footer,section,nav,aside,article
b 增強型表單:input新增多個實用type
c 新增表單元素: datalist,keygen, output
d 新增表單屬性:placehoder,require,min,max
e 音頻,視頻: video,audio
f canvas,地理定位,拖拽
g 本地存儲: localStorage---沒有時間限制的數據存儲,sessionStorage---針對一個session的數據存儲,當用戶關閉瀏覽器窗口后,數據會被刪除
h 新事件: onresize, onscroll, onerror, onplay,onpause,ondrag,onmousewheel
i webSocket: 單個tcp鏈接上的全雙工協議
4、 cookie,localStorage,sessionStorage的區別
特性 | cookie | localStorage | sessionStorage |
存儲大小 | 4k | 5M | 5M |
數據有效期 | cookie在設置的有效期內保存,超過有效期自動清理 | 緩存數據永久有效,可手動清除 | 當前會話有效,關閉頁面或瀏覽器會自動清除 |
與服務器通訊 | cookie會參與服務器的通信,每次都會攜帶在http的頭部信息中 | 不參與通信 | 不參與通信 |
作用域區別 | 不同瀏覽器不能共享localStorage,sessionStorage中的數據 | 相同瀏覽器不同頁面可以共享相同的localStorage(頁面屬於相同的域名及端口),但是不同頁面及標簽間不能共享相同的sessionStorage |
5 、css選擇器有哪些?優先級?
a.通配符選擇器(*):用來選擇所有元素,或者某個元素的所有子元素
b.元素選擇器(E):常見,最基本的選擇器
c.id選擇器(#ID):id選擇器只能選擇頁面中的唯一一個ID
d.class選擇器(.class):類選擇器會選擇頁面中class名為指定名的所有標簽,組成一個類數組
e.后代選擇器(E F):E為父元素,F為子元素
f.子元素選擇器(E>F):使用大於號 “>”指定
g.相鄰選擇器(E+F) : 選擇一個指定元素的兄弟元素
h.選擇器優先:!important > 內聯 > ID選擇器 > class選擇器 > 標簽選擇器
6 、什么叫css盒模型?有幾種盒模型?margin與padding的區別?
css盒模型是css技術的一種思維模式。每個盒模型有內容(content),填充(padding),邊框(border),外邊距(margin)組成
css盒模型有兩種,IE盒模型和w3c標准盒模型,其中IE模型的width=content+padding+border,而標准盒模型width=content
margin是自身容器邊框到另一個容器容器邊框的距離,就是容器的外邊距
padding是自身容器邊框到自身內容之間的距離,是為內邊距
7、Doctype作用?標准模式與兼容模式各有什么區別? 你知道多少種Doctype文檔類型
a、告訴瀏覽器解析器以什么文檔標准來解析文檔,DOCtype不存在或者編寫錯誤會以兼容模式來呈現
b、 標准模式下排版和js運行模式都以瀏覽器支持的最高標准運行
兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為已防止頁面無法工作
c、常用的Docytpe有:html5、htm4.1 strict、html4.1 transitional、html4.1 frameset
8、說說你對語義化的理解
根據內容的結構化使用適合的語義化標簽,讓瀏覽器的爬蟲和機器更好的解析,同時增加代碼的可讀性及可維護性
9、html與xhtml的區別?
xhtml必須被正確地嵌套
xhmtl便簽必須小寫
xhtml空標簽也必須被關閉
xhtml文檔必須有根元素<html></html>
10、css3新增偽類選擇器
a、E:not(ele) 除了ele以外的都選中,常用於除最后一個li外就下邊框 ---ul li:not(:last-of-type)
b、E:root 獲取根元素---:root {background:red}
c、E:first-child 第一個子元素;E: last-child 最后一個子元素; E:only-child 判斷是否是獨生子,如果是就選中
d、E:nth-child(n) 選中第n個元素,n從1開始;n也可以是表達式,如2n+1;可以配合odd(奇數),even(偶數)使用
e、E:nth-last-child(n),與E:nth-child(n)用法一樣,但是是從末尾開始計數的,就是倒數 ;
f、以上cde所述選擇器都會受到其它元素的影響,例如父元素的第n個元素不是指定元素,就選不了了
g、E:first-of-type在父元素下查找第一個E;E:last-of-type在父元素下查找最后一個E;E:only-of-type判斷是否是獨生子,如果是就選中;
h、E:nth-of-type(n) 與nth-child(n)一樣,不過不會受到其它元素影響
i、E:nth-of-last-type 與E:nth-of-type(n)相反,是倒數計數
j、以上ghi所述選擇都不會受到其它元素影響
k、E:empty 選中一個空元素,里面什么都沒有,包括空格
l、E:checked 匹配被選中的表單,radio或者CheckBox
m、E:enabled,E:disabled 匹配input的正常狀態和不可操作狀態
11. div+css布局的好處
- 代碼精簡,且結構與樣式分離,易於維護
- 代碼量減少了,減少了大量的帶寬,頁面加載的也更快,提升了用戶體檢
- 對seo搜索引擎更加友好,且H5又新增了許多語義化標簽更是如此
- 允許更多炫酷的頁面效果,豐富了頁面
- 符合W3C標准,保證網站不會因為網絡應用的升級而淘汰
12. 盒模型及如何轉換
- box-sizing: content-box (W3C盒模型,又名標准盒模型): 元素的寬高大小表現為內容的大小
- box-sizing: border-box(IE盒模型,又名怪異盒模型):元素的寬高表現為內容 + 內邊距 + 邊框的大小
13. 實現水平垂直居中的幾種方式
- flex布局
.box { display: flex; width: 100px; height: 100px; background-color: pink; justify-content: center; align-items: center; } .box-center{ background-color: greenyellow; }
- 絕對定位布局
.box { position: relative; height: 100px; width: 100px; background-color: pink; } .box-center{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 50px; height: 50px; background-color: greenyellow; }
或者
.box { position: relative; background-color: pink; } .box-center{ position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%) margin: auto; width: 50px; height: 50px; background-color: greenyellow; }
13、flex的兼容性怎么樣??
- IE9(包括IE9)以下不支持,IE10~11部分支持,但是需要-ms-前綴
- 其他主流瀏覽器包括安卓iOS基本都支持了
14、font樣式的便捷式寫法
font: font-style font-variant font-weight font-size/line-height font-family