個人前端知識梳理-HTML，CSS篇

前言：因爲最近在梳理一下我本身的知識體系，爲了更好的記錄，如今把整理好的資料分享出來，也但願可以發現錯誤的地方可以予以指點。謝謝。

======================相關文章和開源庫=======================

系列文章

1.前端知識梳理-HTML，CSS篇

2.前端知識梳理-ES5篇

3.前端知識梳理-ES6篇

4.前端知識梳理-VUE篇

我的維護的開源組件庫

1.bin-ui，一個基於vue的pc端組件庫

2.樹形組織結構組件

3.bin-admin ，基於bin-ui的後臺管理系統集成方案

4.bin-data ,基於bin-ui和echarts的數據可視化框架

5.其他生態連接

========================================================

（1）dom選擇器優先級是什麼，以及權重值計算

1.行內樣式 1000

2.id 0100

3.類選擇器、僞類選擇器、屬性選擇器[type="text"] 0010

4.標籤選擇器、僞元素選擇器(::first-line) 0001

5.通配符*、子選擇器、相鄰選擇器 0000

（2）css3新特性簡述

一、顏色：新增RGBA、HSLA模式

二、文字陰影(text-shadow)

三、邊框：圓角（border-radius）邊框陰影：box-shadow

四、盒子模型：box-sizing

五、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以「，」分隔能夠設置多背景，用於自適應佈局

六、漸變：linear-gradient、radial-gradient

七、過渡：transition可實現動畫

八、自定義動畫

九、在CSS3中惟一引入的僞元素是::selection

十、多媒體查詢、多欄佈局

十一、border-image

十二、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

1三、3D轉換

（3）有幾種定位方式，有什麼區別

`static` 是默認值

`relative` 相對定位 相對於自身原有位置進行偏移，仍處於標準文檔流中

`absolute` 絕對定位 相對於最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素爲參考標準。若是無已定位祖先元素, 以`body`元素爲偏移參照基準, 徹底脫離了標準文檔流。

`fixed` 固定定位的元素會相對於視窗來定位,這意味着即使頁面滾動，它仍是會停留在相同的位置。一個固定定位元素不會保留它本來在頁面應有的空隙。

（4）重排和重繪，什麼狀況下會觸發

部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算。這被稱爲重排。注意這裏至少會有一次重排-初始化頁面佈局。 因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新。這樣的更新被稱爲重繪。

添加、刪除、更新 DOM 節點 經過 display: none 隱藏一個 DOM 節點-觸發重排和重繪 經過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，由於沒有幾何變化 移動或者給頁面中的 DOM 節點添加動畫 添加一個樣式表，調整樣式屬性 用戶行爲，例如調整窗口大小，改變字號，或者滾動。

（5）css清除浮動的幾種方法

清除浮動： 核心：clear:both;

1.使用額外標籤法（不推薦使用）

在浮動的盒子下面再放一個標籤，使用 clear:both;來清除浮動

a 內部標籤：會將父盒子的高度從新撐開

b 外部標籤：只能將浮動盒子的影響清除，可是不會撐開盒子

2.使用 overflow 清除浮動（不推薦使用）

先找到浮動盒子的父元素，給父元素添加一個屬性：overflow:hidden;就會清除子元素對頁面的影響

3.使用僞元素清除浮動(用的最多)

僞元素：在頁面上不存在的元素，可是能夠經過 css 添加上去

種類：

:after(在。。。以後)

:before(在。。。以前)

注意：每一個元素都有本身的僞元素

.clearfix:after {  content:"";  height:0;  line-height:0;  display:block;  clear:both;  visibility:hidden; /_將元素隱藏起來_/  在頁面的 clearfix 元素後面添加了一個空的塊級元素 （這個元素的高爲 0 行高也爲 0 而且這個元素清除了浮動）}.clearfix {  zoom:1;/_爲了兼容 IE6_/}複製代碼

（6）行內元素和塊級元素的區別

塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：

1和相鄰的內聯元素在同一行;

2寬度(width)、高度(height)、內邊距的 top/bottom(padding-top/padding-bottom)和外邊距的 top/bottom(margin-top/margin-bottom)都不可改變（也就是 padding 和 margin 的 left 和 right 是能夠設置的），就是裏面文字或圖片的大小。

那麼問題來了，瀏覽器還有默認的天生 inline-block 元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

（7）如何水平垂直居中一個元素

方法一：絕對定位居中（原始版之已知元素的高寬）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    position: absolute; /*父元素須要相對定位*/  
    top: 50%;  
    left: 50%;  
    margin-top: -100px; /*設爲高度的1/2*/  
    margin-left: -100px; /*設爲寬度的1/2*/
}複製代碼

方法二：絕對定位居中（改進版之一未知元素的高寬）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    position: absolute; /*父元素須要相對定位*/  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}複製代碼

方法三：絕對定位居中（改進版之二未知元素的高寬）

.content {  
    width: 200px;  
    height: 200px;  
    background-color: #6699ff; 
    margin: auto; /*很關鍵的一步*/  
    position: absolute; /*父元素須要相對定位*/  
    left: 0; 
    top: 0;  
    right: 0; 
    bottom: 0; /*讓四個定位屬性都爲0*/
}複製代碼

方法四：flex 佈局居中

body {  
    display: flex; /*設置外層盒子display爲flex*/  
    align-items: center; /*設置內層盒子的垂直居中*/  
    justify-content: center; /*設置內層盒子的水平居中*/  
    .content {    
        width: 200px;    
        height: 200px;    
        background-color: #6699ff; 
    }
}複製代碼

那麼問題來了，如何垂直居中一個 img（用更簡便的方法。）

.content {  
    //img的容器設置以下  
    display: table-cell;  
    text-align: center;  
    vertical-align: middle;
}複製代碼

（8）display:inline-block 爲何會顯示間隙

間隙產生的緣由是由於，換行或空格會佔據必定的位置

推薦解決方法：

父元素中設置 font-size:0;letter-spaceing:-4px;

（9）你瞭解 CSS Flex 和 Grid 嗎

Flex 主要用於一維佈局，而 Grid 則用於二維佈局。

解析：

Flex

flex 容器中存在兩條軸， 橫軸和縱軸， 容器中的每一個單元稱爲 flex item。

在容器上能夠設置 6 個屬性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

注意：當設置 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將會失效。

Flex 項目屬性

有六種屬性可運用在 item 項目上:

order

flex-basis

flex-grow

flex-shrink

flex

align-self

Grid

CSS 網格佈局用於將頁面分割成數個主要區域，或者用來定義組件內部元素間大小、位置和圖層之間的關係。

像表格同樣，網格佈局讓咱們可以按行或列來對齊元素。 可是，使用 CSS 網格可能仍是比 CSS 表格更容易佈局。 例如，網格容器的子元素能夠本身定位，以便它們像 CSS 定位的元素同樣，真正的有重疊和層次。