HTML+CSS面試題匯總(持續更新)


先注明一下題目來源,劍哥的前端面試每日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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM