【前端--JavaScript】知識點（八）—— 給男友總結的CSS知識點（二）

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰

不知道昨天的css知識點男友們記住了多少，今天繼續昨天知識點的補充，男友們在空閒時間接着回顧哦！

純css建立三角形的原理

均分原理，把矩形分爲四等份，四等份實際上是邊框，給塊級元素設置寬高爲0，而後設置邊框的寬度，不須要顯示的部分的邊框爲透明色：

.square{
  width:0;
  height:0;
  margin:0 auto; 
  border:6px solid transparent;
  border-top: 6px solid red;  
}
複製代碼

display:none與visibility：hidden的區別

display:none：none不顯示對應的元素，在文檔佈局中不分配空間 visibility：hidden：hidden隱藏對應元素，在文檔佈局中保留原來的空間

position跟display、overflow、float這些特性相互疊加的結果

position：absolute/fixed優先級最高，這時候的float是不起做用的，display值須要調整。float 或者absolute定位的元素，只能是塊元素或表格。

BFC規範的理解

BFC：塊式上下文（block formatting context）; BFC規定了內部的Block Box佈局，定位方案：

1. 內部的Box會在垂直方向上一個接一個放置。
2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
3. 每一個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
4. BFC的區域不會與float box重疊。
5. BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。
6. 計算BFC的高度時，浮動元素也會參與計算。

觸發BFC機制條件：（知足之一便可）

1. 根元素，即html
2. float的值不爲none（默認）
3. overflow的值不爲visible（默認）
4. display的值爲inline-block、table-cell、table-caption
5. position的值爲absolute或fixed

浮動帶來的問題，清除浮動的方式

浮動帶來的問題：

1. 父元素的高度沒法被撐開，影響與父元素同級的元素
2. 與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
3. 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。

清除浮動的方式：

1. 父級div定義height
2. 最後一個浮動元素後加空div標籤 並添加樣式clear:both。
3. 包含浮動元素的父標籤添加樣式overflow爲hidden或auto。
4. 父級div定義zoom

css預處理器

CSS預處理器是用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。可讓CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等。

好比說：Sass（ 基於Ruby寫的  ）、LESS（基於Node寫的）、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。

預處理器能力

1. 嵌套 反映層級和約束 

2. 變量和計算 減小重複代碼 

3. Extend和Mixin 代碼片斷複用 

4. 循環 適用於複雜有規律的樣式 

5. import CSS文件模塊化

CSS優化、提升性能的方法

1. 避免過分約束
2. 避免後代選擇符
3. 避免鏈式選擇符
4. 使用緊湊的語法
5. 避免沒必要要的命名空間
6. 避免沒必要要的重複
7. 儘可能語義化類名
8. 避免！important，能夠選擇其餘選擇器
9. 儘量的精簡規則，合併不一樣類裏的重複規則

margin和padding的使用場景

margin：

1. 須要在border外側添加空白
2. 空白處不須要背景色
3. 上下相連的兩個盒子之間的空白，須要相互抵消時。

padding：

1. 須要在border內側添加空白
2. 空白處須要背景顏色
3. 上下相連的兩個盒子的空白，但願爲二者之和。

兼容性問題：在IE5 IE6中，爲float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。經過改變padding或者指定盒子的display：inline解決。

響應式設計的原理

響應式網站設計(Responsive Web design)是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作相應處理，頁面頭部必須有meta聲明的viewport。

::before 和 :after中雙冒號和單冒號的區別以及僞元素的做用

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。

• ::before就是以一個子元素的存在，定義在元素主體內容以前的一個僞元素。並不存在於dom之中，只存在在頁面之中。

在CSS3的規範裏，僞元素的語法被修改爲使用雙冒號，成爲::before ::after。

對line-height的理解

行高是指一行文字的高度，具體來講是兩行文字以前基線的距離，CSS中起高度做用的是height和line-height，沒有定義height屬性，那起表現做用的必定是line-height。

• 單行文本垂直居中：把line-height值設置爲height同樣大小
• 單行文字的垂直居中，其實也能夠把height刪除。
• 多行文本垂直居中：須要設置display屬性爲inline-block。