2019年底前端面試及答案-html/css

NeverSettle發表於2020-02-12
前端面試HTMLCSS

第一天先更新html/css,還有後續JavaScript、vue、es6會持續更新
(看前先點贊，養成好習慣哈哈哈 )
css盒模型、BFC、css浮動、css經典佈局、css相容、css hack、html/ css基礎

  • JavaScrip面試題地址(超用心)

  • es6面試題地址

  • vue面試題地址

  • css盒模型

    css盒模型基本概念？

    1. margin、border、padding、content。在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border）元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域。4個部分一起構成了css中元素的盒模型。
    2. 分類：標準模型、IE模型

    標準模型和IE模型的區別：計算高度和寬度的不同，怎麼不同，高度寬度是怎麼計算的？

    1. 標準模型
    div寬度 = 內容寬度+border寬度+padding寬度 //改變border寬度，div寬度會變化
box-sizing:content-box;  /*設定標準盒子*/
複製程式碼
    1. 怪異模型|IE模型
    div寬度（定死） = 內容寬度+border寬度+padding寬度 //改變border寬度，div寬度不會變化
box-sizing:border-box; /*IE模型*/
複製程式碼

  • BFC（邊距重疊解決方案）

BFC的基本概念?

BFC（Block Formatting Context ）:塊級格式化上下文
IFC(CSS2.1)：Inline Formating Contexts，內聯元素格式化上下文  
GFC(CSS3):GridLayout Formating Contexts，網格佈局格式化上下文  
FFC(CSS3):Flex Formatting Contexts，自適應格式化上下文
複製程式碼

BFC原理/ BFC渲染規則？

1、BFC元素垂直方向的邊距會發生重疊
2、BFC的區域不會與浮動元素的box重疊（可用於清除浮動）
3、BFC為一個獨立的元素，外面的元素不會影響裡面的元素，裡面的元素也不會影響外面的元素。
4、計算BFC高度的時候，浮動元素也會參與計算。
複製程式碼

如何建立BFC？

1、float值不為none，即為left, right
2、position的值不為static(預設值),relative，即為absolute,fixed
3、display為inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不為visible，overflow為auto,hidden，scroll ;
5、使用fieldset元素（可以給表單元素設定環繞邊框的html元素）
複製程式碼

BFC的使用場景？

1、BFC垂直方向邊距重疊
2、BFC不與float重疊
3、清除浮動：子元素是浮動元素的時候，把外層元素設定成BFC的時候，子元素的浮動元素也會參與到父級元素的高度計算上來。
複製程式碼

  • css浮動

css浮動原理？

浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。
複製程式碼

浮動元素引起的問題？

1、父元素的高度無法被撐開，影響與父元素同級的元素
2、與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
3、若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
複製程式碼

css清除浮動的方法？

1、使用空標籤
給所有浮動標籤後面新增一個空標籤，定義CSS clear:both.
但是這種方法會增加一個無意義的標籤。
2、設定父級元素為BFC元素
3、使用after偽元素清除浮動
這個方法只適用於非IE瀏覽器。該方法必須為需要清除浮動元素的偽物件中設定height:0,不然該元素會比實際元素高出若干畫素。
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
複製程式碼

  • css經典佈局

三欄佈局：左右各300px,中間自適應？

  1. 浮動float
<style>
   html * {
     padding:0;
     margin:0;
   }
   .layout{
     margin-top:20px;
   }
   .layout article div{
     min-height:100px;
   }
 </style>
</head>
<body>
<!--浮動解決方案-->
<section class="layout float">
 <style media="screen">
   .layout.float .left{
     float:left;
     width:300px;
     background:red;
   }
   .layout.float .right{
     float:right;
     width:300px;
     background:blue;
   }
   .layout.float .center{ /*塊元素自動撐開*/
     background:yellow;
   }
 </style>
 <article class="left-right-center">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center">
     <h1>浮動解決方案</h1>
     1.這是三藍布局中間部分
     2.這是三藍布局中間部分
   </div>
 </article>
</section>
複製程式碼
  1. 絕對定位position:absolute
<!--絕對定位解決方案-->
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position:absolute;
    }
    .layout.absolute .left{
      left:0;
      width:300px;
      background:red;
    }
    .layout.absolute .center{
      left:300px;
      right:300px;
      background:yellow;
    }
    .layout.absolute .right{
      right:0;
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>絕對定位解決方案</h2>
      1.這是三藍布局中間部分
      2.這是三藍布局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製程式碼
  1. flex佈局
<!--flexbox解決方案-->
<section class="layout flexbox">
 <style>
   .layout.flexbox{
     margin-top:140px;
   }
   .layout.flexbox .left-center-right{
     display:flex;
   }
   .layout.flexbox .left{
     width:300px;
     background:red;
   }
   .layout.flexbox .center{
     flex:1; /*中間自適應原理*/
     background:yellow;
   }
   .layout.flexbox .right{
     width:300px;
     background:blue;
   }
 </style>
 <article class="left-center-right">
   <div class="left"></div>
   <div class="center">
     <h2>flexbox解決方案</h2>
     1.這是三藍布局中間部分
     2.這是三藍布局中間部分
   </div>
   <div class="right"></div>
 </article>
</section>
複製程式碼
  1. 表格佈局table-cell
<!--表格佈局解決方案-->
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      display:table;
      height:100px;
    }
    .layout.table .left-center-right>div{
      display:table-cell;
    }
    .layout.table .left{
      width:300px;
      background:red;
    }
    .layout.table .center{
      background:yellow;
    }
    .layout.table .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格佈局解決方案</h2>
      1.這是三藍布局中間部分
      2.這是三藍布局中間部分
    </div>
    <div class="right"></div>
  </article>
  </article>
</section>
複製程式碼
  1. 網格佈局grid
<!--網格佈局解決方案-->
<section class="layout grid">
  <style media="screen">
    .layout.grid .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background:yellow;
    }
    .layout.grid .right{
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>網格佈局解決方案</h2>
      1.這是三藍布局中間部分
      2.這是三藍布局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製程式碼
  1. 延伸
    這5種方案的優缺點
    ①浮動：清除浮動，相容性比較好。
    ②絕對定位：快捷，佈局已經脫離了文件流，導致下面的元素也要脫離文件流，使用性較差。
    ③flex佈局，解決了浮動和絕對定位的缺點，移動端基本已經支援了相容性。
    ④表格佈局：表格佈局的相容性非常好
    ⑤網格佈局：新出的
    如果“高度已知”去掉，中間內容高度撐開了，需要左右的高度也自動撐開，哪些方案仍適合
    ①flex、table能用
    ②flex左邊有遮擋，所以顯示在右邊，沒有遮擋的時候，就會顯示在最左邊。建立bfc
  2. 三欄佈局
    ①左右寬度固定，中間自適應
    ②上下高度固定，中間自適應。
  3. 兩欄佈局
    ①左寬度固定，右自適應
    ②右寬度固定，左自適應
    ③上高度固定，下自適應
    ④下高度固定，上自適應

聖盃佈局？

  1. 聖盃佈局的核心是左、中、右三欄都通過float進行浮動，然後通過負值margin進行調整。
  2. .left， .right的margin-left是為了讓.main .left .right在同一行。
  3. .container的padding-left,padding-right，.left的position和left,right的position和left是為了防止文字被遮擋。
<style>
    .main{
      float:left;
      width:100%;
    }
    .content{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .main::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左欄移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右欄移到和左中一行*/
      background-color:yellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
複製程式碼

  • css相容

經常遇到的css相容性的問題在哪些？如何解決的？

本都是ie8及以前的版本會遇到css相容問題。一般是圖片透明、圓角、字型大小，新出的css3樣式。
aSuncat：如此老舊瀏覽器終究會被市場放棄，不花時間在這上面。
複製程式碼

  • css hack

什麼是CSS hack？

針對不同的瀏覽器或瀏覽器不同版本寫相應的CSS的過程，就是CSS hack
複製程式碼

CSS hack分類？
3種：條件hack、屬性級hack、選擇符hack。

// 1、條件hack
<!--[if IE]>
<style>
	.test{color:red;}
</style>
<![endif]-->
複製程式碼
// 2、屬性hack（類內部hack）
.test{
	color:#090\9; /*For IE8*/
	*color:#f00; /*For IE7 and earlier*/
	_color:#ff0; /*For IE6 and earlier*/
}
複製程式碼
// 3、選擇符hack（選擇器屬性字首法）
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/
複製程式碼

CSS hack書寫順序？

CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。
複製程式碼

  • html、css基礎

link和@import的區別？

1、從屬關係區別：
link屬於html標籤，而@import是css提供的。
2、載入順序區別：
頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入。
3、相容性區別：
import只在IE5以上才能識別，而link是html標籤，無相容問題。
4、dom可操作性區別：
可以通過JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式
5、權重區別：
如果已經存在相同樣式，@import引入的這個樣式將被該 CSS 檔案本身的樣式層疊掉，表現出link方式的樣式權重高於@import的權重這樣的直觀效果。
（aSuncat：簡而言之，link和@import，誰寫在後面，誰的樣式就被應用，後面的樣式覆蓋前面的樣式。）
複製程式碼

如何理解標籤語義，它有哪些好處？

1、語義元素清楚地向瀏覽器和開發者描述其意義。
2、好處：
（1）html結構清晰，程式碼可讀性較好。
（2）有利於SEO，搜尋引擎根據標籤來確定上下文和各個關鍵字的權重。
（3）無障礙閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
（4）方便其他裝置解析，如盲人閱讀器根據語義渲染網頁
（5）便於團隊維護和開發，語義化更具可讀性，程式碼更好維護，與CSS3關係更和諧。
複製程式碼

css的選擇符有哪些，優先順序如何計算，哪些屬性可以繼承？

  1. css選擇符型別
1、通用選擇器：*
2、類別選擇器：.class
3、id選擇器：#id
4、標籤選擇器：p
5、後代選擇器：div p
6、子選擇器：div > p
7、群組選擇器：div , p
8、相鄰同胞選擇器：div +p
9、偽類選擇器：:link :visited :active :hover :focus :first-child
10、偽元素選擇器：:first-letter :first-line:before :after :lang(language)
11、屬性選擇器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]
複製程式碼
  1. 優先順序計算
!important > 內聯樣式 > id > class > tag
3、屬性繼承
（1）所有元素可繼承：visibility、cursor
（2）塊級元素可繼承：text-indent、text-align
（3）內聯元素可繼承：
①字型系列屬性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文字系列屬性：
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction

擴充套件：
一、不可繼承的樣式屬性：
1、display
2、文字屬性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型屬性：border、padding、margin、width、height
4、背景屬性：background
5、定位屬性：float、clear、position
6、生成內容屬性：content
7、輪廓樣式屬性：outlien-style
8、頁面樣式屬性：size
9、聲音樣式屬性：pause-before
複製程式碼

行內元素和塊級元素舉幾個例子？

行內元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
塊級標籤：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr
複製程式碼

偽類和偽元素？

偽類：:active :focus :hover :link :visited :first-child
偽元素：:before :after :first-letter :first-line
複製程式碼

svg和canvas的區別？

1、canvas時h5提供的新的繪圖方法 ；svg已經有了十多年的歷史
2、canvas畫圖基於畫素點，是點陣圖，如果進行放大或縮小會失真 ；svg基於圖形，用html標籤描繪形狀，放大縮小不會失真
3、canvas需要在js中繪製 ；svg在html繪製
4、canvas支援顏色比svg多
5、canvas無法對已經繪製的影像進行修改、操作 ；svg可以獲取到標籤進行操作
複製程式碼

flex實現原理？

1、容器上有主軸和縱軸的概念，預設主軸（main-axis）是橫向，從左到右，縱軸是豎向，從上到下。
2、其中所有的孩子的佈局都會受到這兩個軸的影響。
3、有很多相關的css屬性就是通過改變主軸和縱軸的方向來實現不同的佈局效果的。
複製程式碼

src與href的區別？

1、href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
2、src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
複製程式碼

收集不易,如果你對這篇文章感興趣，就點個贊和關注吧

相關文章