[toc]
## 1.怎么讓一個不定寬高的 DIV,垂直水平居中?
**使用Flex**
- 只需要在父盒子設置:display: flex; justify-content: center;align-items: center;
**使用 CSS3 transform**
- 父盒子設置:`display:relative`
- Div 設置: `transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;`
**使用 display:table-cell 方法**
- 父盒子設置:`display:table-cell; text-align:center;vertical-align:middle`;
- Div 設置: `display:inline-block;vertical-align:middle`;
## 2.position 幾個屬性的作用
position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。
- **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 屬性的元素在標準流中不占位置。
## 3.浮動與清除浮動
### 3.1 浮動相關知識
**float屬性的取值:**
- left:元素向左浮動。
- right:元素向右浮動。
- none:默認值。元素不浮動,并會顯示在其在文本中出現的位置。
**浮動的特性:**
- 浮動元素會從普通文檔流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。
- 不管一個元素是行內元素還是塊級元素,如果被設置了浮動,那浮動元素會生成一個塊級框,可以設置它的width和height,因此float常常用于制作橫向配列的菜單,可以設置大小并且橫向排列。
**浮動元素的展示在不同情況下會有不同的規則:**
- 浮動元素在浮動的時候,其margin不會超過包含塊的padding。*PS:如果想要元素超出,可以設置margin屬性*
- 如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
- 如果有多個浮動元素,浮動元素會按順序排下來而不會發生重疊的現象。
- 如果有多個浮動元素,后面的元素高度不會超過前面的元素,并且不會超過包含塊。
- 如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素
- 浮動元素會盡可能地向頂端對齊、向左或向右對齊
**重疊問題**
- 行內元素與浮動元素發生重疊,其邊框,背景和內容都會顯示在浮動元素之上
- 塊級元素與浮動元素發生重疊時,邊框和背景會顯示在浮動元素之下,內容會顯示在浮動元素之上
**clear屬性**
clear屬性:確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。
取值:left、right、both
### 3.2 父元素高度塌陷問題
**為什么要清除浮動,父元素高度塌陷**
解決父元素高度塌陷問題:一個塊級元素如果沒有設置height,其height是由子元素撐開的。對子元素使用了浮動之后,子元素會脫離標準文檔流,也就是說,父級元素中沒有內容可以撐開其高度,這樣父級元素的height就會被忽略,這就是所謂的高度塌陷。
### 3.3 清除浮動的方法
**方法1:給父級div定義 高度**
原理:給父級DIV定義固定高度(height),能解決父級DIV 無法獲取高度得問題。
優點:代碼簡潔
缺點:高度被固定死了,是適合內容固定不變的模塊。(不推薦使用)
**方法二:使用空元素,如`<div class="clear"></div> (.clear{clear:both})`**
原理:添加一對空的DIV標簽,利用css的clear:both屬性清除浮動,讓父級DIV能夠獲取高度。
優點:瀏覽器支持好
缺點:多出了很多空的DIV標簽,如果頁面中浮動模塊多的話,就會出現很多的空置DIV了,這樣感覺視乎不是太令人滿意。(不推薦使用)
**方法三:讓父級div 也一并浮起來**
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了,又會產生新的浮動問題。 不推薦使用
**方法四:父級div定義 display:table**
原理:將div屬性強制變成表格
優點:不解
缺點:會產生新的未知問題。(不推薦使用)
**方法五:父元素設置 overflow:hidden、auto;**
原理:這個方法的關鍵在于觸發了BFC。在IE6中還需要觸發 hasLayout(zoom:1)
優點:代碼簡介,不存在結構和語義化問題
缺點:無法顯示需要溢出的元素(亦不太推薦使用)
**方法六:父級div定義 偽類:after 和 zoom**
```css
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
```
原理:IE8以上和非IE瀏覽器才支持`:after`,原理和方法2有點類似,`zoom`(IE轉有屬性)可解決ie6,ie7浮動問題
優點:結構和語義化完全正確,代碼量也適中,可重復利用率(建議定義公共類)
缺點:代碼不是非常簡潔(極力推薦使用)
**經益求精寫法**
```css
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照顧IE6,IE7就可以了
```
> 詳細關于浮動的知識請參看這篇文章:[
http://luopq.com/2015/11/08/CSS-float/](http://luopq.com/2015/11/08/CSS-float/)
## 4.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
## 5.box-sizing是什么
設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括`content`,二IE模型包括`border`和`padding`
box-sizing屬性可以為三個值之一:
- content-box,默認值,只計算內容的寬度,border和padding不計算入width之內
- padding-box,padding計算入寬度內
- border-box,border和padding計算入寬度之內
## 6.px,em,rem 的區別
**px** 像素(Pixel)。絕對單位。像素 px 是`相對于顯示器屏幕分辨率`而言的,是一個虛擬長度單位,是計算 機系統的數字化圖像長度單位,如果 px 要換算成物理長度,需要指定精度 DPI。
**em** 是相對長度單位,`相對于當前對象內文本的字體尺寸`。如當前對行內文本的字體尺寸未被人為設置, 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。
**rem** 是 CSS3 新增的一個相對單位(root em,根 em),使用 rem 為元素設定字體大小時,仍然是相對大小, 但`相對的只是 HTML 根元素`。
## 7.CSS 引入的方式有哪些? link 和@import 的區別是?
有四種:內聯(元素上的style屬性)、內嵌(style標簽)、外鏈(link)、導入(@import)
link和@import的區別:
- `link`是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;`@import`屬于CSS范疇,`只能加載CSS`。
- `link`引用CSS時,在`頁面載入時同時加載`;`@import需要頁面網頁完全載入以后加載`。
- `link`是XHTML標簽,`無兼容問題`;`@import`是在CSS2.1提出的,`低版本的瀏覽器不支持`。
- `link`支持使用Javascript控制DOM去`改變樣式`;而`@import`不支持。
## 8.流式布局與響應式布局的區別
**流式布局**
使用非固定像素來定義網頁內容,`也就是百分比布局`,通過盒子的寬度設置成百分比來根據屏幕的寬度來進
行伸縮,不受固定像素的限制,內容向兩側填充。
**響應式開發**
利用CSS3 中的 Media Query(媒介查詢),通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。
- 超小屏幕(移動設備) 768px 以下
- 小屏設備 768px-992px
- 中等屏幕 992px-1200px
- 寬屏設備 1200px 以上
由于響應式開發顯得繁瑣些,一般使用第三方響應式框架來完成,比如 bootstrap 來完成一部分工作,當然也 可以自己寫響應式。
**區別**
| - | 流式布局 | 響應式開發|
|:-----------|:--------------------------|:--------------|
| 開發方式 | 移動Web開發+PC開發 | 響應式開發 |
|應用場景 | 一般在已經有PC端網站,開發移動的的時候只需要單獨開發移動端 | 針對一些新建的網站,現在要求適配移動端,所以就一套頁面兼容各種終端 |
|開發|正對性強,開發效率高|兼容各種終端,效率低|
|適配|只適配移動設備,pad上體驗相對較差|可以適配各種終端|
|效率|代碼簡潔,加載快|代碼相對復雜,加載慢|
## 9.漸進增強和優雅降級
關鍵的區別是他們所側重的內容,以及這種不同造成的工作流程的差異
- **優雅降級**一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。。
- **漸進增強**針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
區別:
- 優雅降級是從復雜的現狀開始,并試圖減少用戶體驗的供給
- 漸進增強則是從一個非常基礎的,能夠起作用的版本開始,并不斷擴充,以適應未來環境的需要
- 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶
## 10.CSS隱藏元素的幾種方式及區別
**display:none**
- 元素在頁面上將徹底消失,元素本來占有的空間就會被其他元素占有,也就是說它會導致瀏覽器的重排和重繪。
- 不會觸發其點擊事件
**visibility:hidden**
- 和`display:none`的區別在于,`元素在頁面消失后,其占據的空間依舊會保留著`,所以它`只會導致瀏覽器重繪`而不會重排。
- 無法觸發其點擊事件
- 適用于那些元素隱藏后不希望頁面布局會發生變化的場景
**opacity:0**
- 將元素的透明度設置為0后,在我們用戶眼中,元素也是隱藏的,這算是一種隱藏元素的方法。
- 和`visibility:hidden`的一個共同點是元素隱藏后依舊占據著空間,但我們都知道,設置透明度為0后,元素只是隱身了,它依舊存在頁面中。
- 可以觸發點擊事件
**設置height,width等盒模型屬性為0**
- 簡單說就是將元素的`margin`,`border`,`padding`,`height`和`width`等影響元素盒模型的屬性設置成`0`,如果元素內有子元素或內容,還應該設置其`overflow:hidden`來隱藏其子元素,這算是一種奇技淫巧。
- 如果元素設置了border,padding等屬性不為0,很顯然,頁面上還是能看到這個元素的,觸發元素的點擊事件完全沒有問題。如果全部屬性都設置為0,很顯然,這個元素相當于消失了,即無法觸發點擊事件。
- 這種方式既不實用,也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如jquery的slideUp動畫,它就是設置元素的overflow:hidden后,接著通過定時器,不斷地設置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom為0,從而達到slideUp的效果。
**其他腦洞方法**
- 設置元素的position與left,top,bottom,right等,將元素移出至屏幕外
- 設置元素的position與z-index,將z-index設置成盡量小的負數
## 11.消除圖片底部間隙的方法
- 圖片塊狀化 - 無基線對齊:`img { display: block; }`
- 圖片底線對齊:`img { vertical-align: bottom; }`
- 行高足夠小 - 基線位置上移:`.box { line-height: 0; }`
## 12."nth-child"和"nth-of-type"的區別
“nth-child”選擇的是父元素的子元素,這個子元素并沒有指定確切類型,同時滿足兩個條件時方能有效果:其一是子元素,其二是子元素剛好處在那個位置;“nth-of-type”選擇的是某父元素的子元素,而且這個子元素是指定類型。[參考](https://juejin.im/post/59bce23c51882519777c5eb5)
## 13.CSS中的顏色體系有哪些?

[參考](http://www.cnblogs.com/coco1s/p/5622534.html)
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式