[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)