前端開發工程師——面試題總結

一、CSS部分

1、W3C標準盒模型

2、垂直水平居中

3、flex佈局

4、position的幾種屬性值

static:默認位置。 在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不願意見到元素所繼承的屬性影響本身，從而可以用Position:static取消繼承，即還原元素定位的默認值。設置爲 static 的元素，它始終會處於頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
relative:相對定位。 相對定位是相對於元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置爲基準偏移，而不管其他元素會怎麼樣。注意 relative 移動後的元素在原來的位置仍佔據空間。
absolute:絕對定位。 設置爲 absolute 的元素，如果它的父容器設置了 position 屬性，並且 position 的屬性值爲 absolute 或者 relative，那麼就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性，那麼偏移是以 body 爲依據。注意設置 absolute 屬性的元素在標準流中不佔位置。
fixed:絕對定位。 位置被設置爲 fixed 的元素，可定位於相對於瀏覽器窗口的指定座標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 爲依據的。注意設置 fixed 屬性的元素在標準流中不佔位置。

5、display的幾種屬性值

默認值 inline

此元素會被顯示爲內聯元素，元素前後沒有換行符。設置width,height,margin-top,margin- bottom,padding-top,padding-bottom無效；
內聯元素不能設置寬高，但這也不是絕對的。
html標籤中有部分標籤，例如：<span/>、<a>、<em>、<img>、<input>、<label>等等都是內聯元素，默認display屬性均爲inline，但是<img>、<input>標籤的元素卻可以設置寬高！因爲它有內在尺寸，所以具有width和height，可以設定。

none

此元素不會被顯示。
經常會考到，display:none與visibility: hidden有什麼區別？

都是看不見元素，但是display:none意思是不展示這個元素，該元素不佔據空間，
而visibility: hidden只是將該元素隱藏了，只是用戶不可見而已，佔據頁面空間

block

此元素將顯示爲塊級元素，此元素前後會帶有換行符。
塊狀元素可以設置寬高。
html標籤中有部分標籤，例如：<div>、<p>、<ol>等等，其display屬性默認爲block

inline-block

行內塊元素，結合了inline、block的特點，此元素前後沒有換行符，可以設置寬高。

參考：https://blog.csdn.net/Elena_cc/article/details/71750833

6、css3新特性

border-radius:5px; //圓角邊框
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; //多背景圖片
background: rgba(0,0,0,.5); //顏色和透明度
display: flex; //彈性佈局

transform: translate(50px,100px);//移動
transform: rotate();//旋轉
transform: scale();//縮放
transform: skew();//傾斜
// 用於元素的直接或者鼠標感應變化，沒有其他變幻參數（如延時，持續時間，變幻曲線），立即改變。

transition: width 1s linear 2s; //過渡效果，transition通過指定某些屬性和變幻參數，以原始定義爲開始狀態，通過鼠標操作變化(hover)，hover狀態定義結束狀態，實現過渡效果。

animation: myfirst 5s;
 @keyframes myfirst {
    0% {background: block;}
    25% {background: red;}
    50% {background: yellow;}
    100% {background: green;}
  }
//動畫效果，加強版的過渡效果，通過animation指定動畫名和動畫參數，@keyframes定義動畫內容，根據參數自動觸發。

@media screen //媒體查詢

h1 {//文字陰影
    text-shadow: 5px 5px 5px red;
}
div {//盒子陰影
    box-shadow: 10px 5px 5px yellow;
}

7、css選擇器

CSS的選擇器分爲兩大類：基本選擇題和擴展選擇器。

基本選擇器：

標籤選擇器：針對一類標籤
ID選擇器：針對某一個特定的標籤使用
類選擇器：針對你想要的所有標籤使用

高級選擇器：

後代選擇器：用空格隔開
僞類選擇器
僞元素選擇器

8、css單位

px 像素(Pixel)。絕對單位。像素 px 是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。

em 是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此並不是一個固定的值。

rem 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 爲元素設定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

9、浮動、清除浮動

參考：http://luopq.com/2015/11/08/CSS-float/

10、相鄰的兩個inline-block節點爲什麼會出現間隔，該如何解決

由於浮動造成的，一種方式爲兩個節點添加clear:both，另一種方式是增加父標籤，設置overflow:hidden

11、css實現寬度自適應100%，寬高16:9的比例的矩形

<style>
/* box 用來控制寬度 */
.box {width: 100%;}
/* scale 用來實現寬高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */
.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
/* item 用來放置全部的子元素 */
.item {width: 100%;height: 100%;background-color: #000;position: absolute;}
</style>
 
<div class="box">
	<div class="scale">
	    <div class="item">
	        <img src=""/>
	    </div>
	</div>
</div>

12、1像素邊框問題

一般是採用僞元素模擬的方式

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

關於移動端開發1px邊框的一些理解及解決辦法

13、css3動畫優化

高性能 CSS3 動畫

14、BFC相關

定義：BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有 Block-level box 參與，它規定了內部的 Block-level Box 如何佈局，並且與這個區域外部毫不相干。

BFC佈局規則 BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

BFC這個元素的垂直方向的邊距會發生重疊，垂直方向的距離由margin決定，取最大值
BFC 的區域不會與浮動盒子重疊（清除浮動原理）。
計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

根元素
float 屬性不爲 none
position 爲 absolute 或 fixed
display 爲 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不爲 visible

15、移動端css問題總結

騰訊移動Web前端知識庫

16、一些css問題總結

https://juejin.im/post/5a0c184c51882531926e4294

二、HTML部分

1、語義化

什麼是語義化？就是用合理、正確的標籤來展示內容，比如h1~h6定義標題。

2、HTML5新標籤新特性

主體結構標籤，如圖：

新表單標籤，calendar、date、time、email、url、search
媒介標籤： video 和 audio
繪畫標籤： canvas

3、移動端忽略將頁面中的數字識別爲電話號碼的方法

meta標籤中format-detection翻譯成中文的意思是“格式檢測”，是用來檢測html裏的文本格式的，還包括：

<meta name="format-detection" content="telephone=no">  //禁止把數字轉化爲撥號鏈接
<meta name="format-detection" content="email=no">  //禁止郵箱,禁止發送郵件
<meta name="format-detection" content="adress=no">  //禁止地址跳轉至地圖
<meta name="format-detection" content="telephone=no,email=no,adress=no">  //合併寫法

4、用一個div模擬textarea的實現

<div class="textarea" contenteditable="true">輸入文字</div>

.textarea{
  resize: both;
  min-width: 300px;
  min-height: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius:5px;
  line-height: 1.2;
  outline:none;
  overflow:auto;
}

5、實現兩個窗口間通信

HTML5 postMessage 和 localStorage 實現窗口間通信