2020-3月份前端面試總結——HTML/CSS相關

HTML方面

備註： + 代表被問到的次數，沒有 + 代表自己整理了，但沒被問到

1.HTML5 有哪些新元素？

​ 常用的如header、footer、main、nav和新的音頻元素audio、video圖像元素canvas、svg等

2.HTML開頭的DOCTYPE有什麼用

​ 告訴瀏覽器以何種模式來渲染文檔，如果不寫會以混亂模式解析

css方面

1.自適應佈局的方法+

​ rem/calc/vw/lib-flexble 原理：所有尺寸都以rem爲單位，用js根據視口寬度動態改變html根元素的font-size大小。

2.flex佈局及常用的屬性++

• justify-content設置在容器上，定義子元素在主軸上的對齊方式

  flex-start/flex-end/center

• align-items設置在容器上，定義子元素在交叉軸上的對齊方式

  flex-start/flex-end/center

• flex-wrap定義子元素是否換行

  nowrap/wrap/wrap-reverse

3.position有那些值，各個值有哪些區別+

• static 默認值，沒有定位
• relative：相對定位，保留原來的位置
• absolute：絕對定位，相對於最近一級定位不是static的父元素定位，不保留原來的位置
• fixed：相對於瀏覽器視口定位
• sticky：粘性定位，當元素在屏幕內，表現爲relative，就要滾出顯示器屏幕的時候，表現爲fixed。

4.盒模型++

​ 由content+padding+border+margin構成。有2種解析形式，標準盒模型content-box：設置寬高是指content部分的寬高。IE盒模型border-box：設置寬高是指content+padding+border部分的寬高。可以用過box-sizing屬性設置解析形式。

5.css3新增選擇器

• 屬性選擇器 (a[foo = “bar”])
• 僞類選擇器 (a: hover, li:nth-child(n))

6.css權重

​ !important > 內聯樣式 > id > class > 僞類

7.css3動畫效果有哪些？

​ transform（2/3D轉換）/transition（緩動）/animation（動畫）

8.transform裏有哪些對元素的操作

​ 旋轉，平移，放大，傾斜等

10.垂直居中+

• 絕對定位和負margin

  #foo{
      position:relative;
  }
   
  #bar{
      position:absolute;
      top:50%;
      left:50%;
      height：100px;
      width:100px;
      margin:-50px 0 0 -50px;
  }
  

• 絕對定位+transform

  #bar{      
          position:absolute;
          left:50%;    /* 定位父級的50% */
          top:50%;
          transform: translate(-50%,-50%); /*自己的50% */
      }
  

• flexbox

  #foo {
      display: flex;
      justify-content:center;
      align-items:center;
  }
  
  

11.如何設置元素的bfc？+

1. overflow：hidden；
2. display：inline-block；
3. display；flow-root；

12.僞元素和僞類的區別？+