CSS引入

**有哪些引入方式？通過link和@import引入有什麼區別？（* ）**

CSS引入方式有4種 內聯、內嵌、外鏈、導入
外鏈 link 除了可以載入css之外,還可以定義rss、rel等屬性，沒有兼容性問題，支持使用javascript改變樣式
導入@import 是css提供的，只能用於載入css，不支持通過javascript修改樣式
頁面被載入的時候，link會被同時載入，而@import則需等到頁面載入完後再載入，可能出現無樣式網頁

Style 標籤寫在 body 後和 body 前有什麼區別？

一般情況下，頁面載入時自上而下的。將style標籤至於body之前，為的是先載入樣式。
若是寫在body標籤之後，由於瀏覽器以逐行方式對html文檔進行解析，當解析到寫在寫在文檔尾部的樣式表時，會導致瀏覽器停止之前的渲染，等待載入且解析樣式表完成之後會重新渲染，在windows的IE下可能會出現FOUC現象（頁面閃爍）。、

什麼是 FOUC(Flash of Unstyled Content)？如何來避免 FOUC

當使用@import導入CSS時，會導致某些頁面在IE出現奇怪的現象：沒有樣式的頁面內容顯示瞬間閃爍，這種現象被稱為「文檔樣式暫時失效」，簡稱FOUC。
產生原因： 當樣式表晚於結構性html載入時，載入到此樣式表時，頁面將會停止之前的渲染。等待此樣式表被下載和解析後，再重新渲染頁面，期間導致短暫的花屏現象。
解決辦法： 只要在之間加入一個或者元素即可。

CSS選擇器

CSS選擇器的解析是從上到下，從右向左解析，為了避免對所有元素進行解析

可繼承的樣式：font-size, font-family, color，ul，li，dl，dt，dd；
不可繼承的樣式：border, padding, margin, width, height

CSS選擇器種類

id選擇器
- 根據提供的唯一id號快速獲取標籤對象
- 用於充當label標籤for屬性的值：用戶名：，表示單擊此label標籤時，id為userid的標籤獲得焦點
類選擇器 (class )
標籤選擇器 (h1)
相鄰選擇器
- 直接相鄰元素選擇器 (h1+p)
- 普通相鄰元素選擇器（h2 ~ h2）
子選擇器(ul>li)
後代選擇器(li a)
通配符選擇器(*)
屬性選擇器（a[rel = “XXX”]）
偽類選擇器( :hover :first-child ···)
偽元素選擇器( :before :after ···)
分組選擇器

CSS選擇器優先順序

優先順序由高到低 !important > 內聯style > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符選擇器>繼承
優先順序演算法(權重)
- 元素標籤（派生選擇器）：1
- class選擇符：10
- id選擇符：100
- 內聯樣式最大：1000
- 元素選擇符的權值
- 繼承得到的樣式的優先順序最低
- 比較多個權重相同的CSS選擇器優先順序，定義的位置決定一切。從位置上由高到低分為六級：

      1. 位於<head/>標籤里的<style/>中所定義的CSS擁有最高級的優先權。
      2. 位於 <style/>標籤中的 @import 引入樣式表所定義。
      3. 由<link/>標籤所引入的樣式表定義。
      4. 由<link/>標籤所引入的樣式表內的 @import 導入樣式表定義。
      5. 用戶設定。
      6. 瀏覽器默認。

同位置情況下樣式定義最近者為準（優先順序相同，選擇最後出現的樣式）

CSS偽類和偽元素

CSS偽元素

::selection 選擇被用戶選取的元素部分
:first-line 選擇元素中的第一行
:first-letter 選擇元素中的第一個字元
:after 在元素在該元素之後添加內容
:before 在元素在該元素之前添加內容

CSS偽類

:root 選擇文檔的根元素，等同於html元素
:empty 選擇沒有子元素的元素
:target 選取當前活動的目標元素
:not(selector) 選擇除 selector 元素意外的元素
:enabled 選擇可用的表單元素
:disabled 選擇禁用的表單元素
:checked 選擇被選中的表單元素
:first-child 選取當前選擇器下第一個元素。
:last-child 和 first-child 相反，選取當前選擇器下最後一個元素。
:only-child 選取唯一子元素。如果一個元素的父元素只有它一個子元素，這個偽類就會生效。如果一個元素還有兄弟元素，這個偽類就不會對它生效。
:only-of-type 選取唯一的某個類型的元素。如果一個元素的父元素里只有它一個當前類型的元素，這個偽類就會生效。這個偽類允許父元素里有其他元素，只要不和自己一樣就可以。

靜態偽類（只用於a標籤）

:link 指示這個「超鏈接」（即 a 元素里有一個 href 屬性）未被訪問
:visited 指示這個「超鏈接」已被訪問

動態偽類（使用時鼓勵「LVHT」順序）

:focus 指示這個元素擁有輸入「焦點」——即可以接受鍵盤輸入，或通過某種方式可以激活
:hover 指示當滑鼠停留在這個元素上時，外觀可以作相應改變
:active 指示這個元素可以被用戶輸入「激活」，如，用戶停留在一個超鏈接上，當點擊滑鼠時，這個鏈接就會「激活」

偽類和偽元素的根本區別

它們是否創造了新的元素(抽象)。
從我們模仿其意義的角度來看，如果需要添加新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上添加類別的，就是偽類。
偽元素在一個選擇器里只能出現一次，並且只能出現在末尾。
偽類則是像真正的類一樣發揮著類的作用，沒有數量上的限制，只要不是相互排斥的偽類，也可以同時使用在相同的元素上。
偽類用一個冒號表示 :first-child，偽元素則使用兩個冒號表示 ::first-line(為了向下兼容，現在的瀏覽器中偽元素選擇器用單冒號和雙冒號都可以)。

CSS盒模型

盒模型分類

IE盒模型（怪異盒模型）
- width = border + padding + content
- 一個盒子的寬度 = width + margin
W3C盒模型（標準盒模型）
- width = content
- 一個盒子的寬度 = width + padding + border + margin

轉換盒模型

Css中默認的盒模型是W3C盒模型，兩者間的轉換可以通過設置屬性box-sizing來轉換

box-sizing: content-box; // W3C盒模型標準
box-sizing: border-box; // IE盒模型標準

盒子一些相關寬度

clientWidth = width+左右padding
offsetWidth = width + 左右padding + 左右boder
scrollWidth：獲取指定標籤內容層的真實寬度（可視區域寬度+被隱藏區域寬度）

邊界塌陷

CSS 中存在一個 margin collapse，即邊界塌陷或者說邊界重疊。只有普通文檔流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

並排 DIV 邊界塌陷（兄弟）

對於上下兩個並排的 DIV 塊而言，上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 會塌陷，會取上下兩者 margin 里最大值作為顯示值，只設置單個margin。

包含元素盒子塌陷（父子）

父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content(文本)中的其中一個，然後按此div 進行margin。

解決方法

為父盒子設置border，為外層添加border後父子盒子就不是真正意義上的貼合（可以設置成透明：border: 1px solid transparent）
為父盒子添加overflow: hidden;
為父盒子設定padding值；
為父盒子添加position：fixed；

負值作用

負 marign實現元素的水平垂直居中
負 marign隱藏列表 li 首尾多餘的邊框
負 text-indent 實現文字的隱藏
負的 z-index 參與層疊上下文排序
定位中的left、right、top、bottom

position 定位

static(普通流定位)

默認定位

relative(相對定位)

相對本元素的左上角進行定位（相對於自身位置進行定位），本元素需要設置position為relative，top、left、bottom、right都可以有值。
雖然經過定位後，位置可能會移動，但是本元素並沒有脫離文檔流，還佔有原來的頁面空間。

absolute(絕對定位)

相對於祖代中有relative(相對定位)並且離本元素層級關係上是最近的元素的左上角進行定位，如果在祖代元素中沒有有relative定位的，就默認相對於body進行定位。
元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
絕對定位是脫離文檔流的，與浮動定位是一樣的效果，會壓在非定位元素的上方。

fixed(固定定位)

類似於absolute定位，但是是相對於瀏覽器窗口進行定位

inherit

繼承父級元素position屬性值

sticky （額外補充）

粘性的-集合了flex和relative,參考殺了個回馬槍，還是說說position:sticky吧

float浮動

有兩個取值：left(左浮動)和right(右浮動)。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

優點

最初的優點就是在圖文混排的時候可以很好的使文字周圍在圖片周圍。另外當元素浮動了起來之後，它具有塊級元素的一些性質例如可以設置寬高等，但它與inline- block還是有一些區別的，第一個就是關於橫向排序的時候，float可以設置方向而inline-block方向是固定的；還有一個就是inline-block在使用時有時會有空白間隙的問題。

缺點

最明顯的缺點就是浮動元素一旦脫離了文檔流，就無法撐起父元素，會造成父級元素高度塌陷為0(盒子塌陷)。▲ 注意：設置元素浮動後，該元素的display值會變為block

**清除浮動（*）**

盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止，非自適應
父級元素設置高度
父級元素觸發BFC（Float，Overflow: Hidden | Visible，Display: Flex | Grid）

<div class="parent" style="overflow:hidden">
    <div class="f"></div>
</div>

添加額外標籤

<div class="parent">    //添加額外標籤並且添加clear屬性
    <div class="f"></div>
</div>
<div style="clear:both"></div>

建立偽類選擇器清除浮動（推薦）

//添加:after偽元素
.parent:after{
    content: ''; /* 設置添加子元素的內容是空 */  
    display: block; /* 設置添加子元素為塊級元素 */       
    height: 0; /* 設置添加的子元素的高度0 */     
    visibility: hidden; /* 設置添加子元素看不見 */     
    clear: both; /* 設置clear：both */
}
<div class="parent">
    <div class="f"></div>
</div>

display 布局

值描述none元素會被隱藏，不顯示inline元素會被設置為內聯元素，內部按行從左向右排列（元素前後沒有換行符）block元素會被設置為塊級元素，內部按列從上到下排列（元素前後帶有換行符）inline-block元素會被設置為行內塊級元素，不會獨佔一行的塊級元素list-item元素會作為列表顯示table元素會作為塊級表格來顯示（類似table），表格前後帶有換行符flex元素會進入flex布局模式

inline、block、inline-block三者區

block塊級特點：

每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（一個塊級元素獨佔一行）
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

inline內聯特點：

和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

inline-block 特點：

inline-block內聯塊狀元素同時具備內聯元素、塊狀元素的特點。
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。

**使用 display:inline-block 會產生什麼問題？又如何解決？（*）**

兩個inline-block元素放到一起會產生一段空白。

產生空白的原因

元素被當成行內元素放置的時候，元素之間的空白符（空格，回車換行等）都會被瀏覽器處理，根據CSS中空白屬性的處理方式（否則是正常，合併多餘空白），原來HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符較長一定長度，所以inline-block的元素之間就出現了空隙。

解決辦法

將子元素標籤的結束符和下一個標籤的開始符寫在同一行或把所有子標籤寫在同一行
父元素中設置字體大小：0，在子元素上重置正確的字體大小
為子元素設置float：left

flex布局

該布局提供了一種更高效的方法對容器中的項目進行布局、對齊和分配空間，他沒有方向上的限制，可以由開發人員自由操作（子元素的 vertical-align、float、clear 屬性會失效）。

容器屬性（6個）

flex-direction** 決定主軸方向（容器排列方向）**

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap** 如果一條軸線排不下，定義換行規則**

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow** flex-direction和flex-wrap的簡寫形式**

flex-flow: flex-direction||flex-wrap;

justify-content** 定義容器在主軸上的對齊方式**

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items** 定義容器在交叉軸上的對齊方式**

align-items: flex-start | flex-end | center | baseline | stretch;

align-content** 定義多根軸線的對齊方式，如果容器只有一根軸線，該屬性不起作用**

項目屬性（6個）

order 定義項目的排列順序，數值越小，排列越靠前，默認為0
flex-grow 定義項目的放大比例，默認為0（即如果存在剩餘空間，也不放大）
flex-shrink 定義項目的縮小比例，默認為1（即如果空間不足，該項目將縮小）
flex-basis 定義了在分配多餘空間之前，項目佔據的主軸空間。默認值為auto（項目本來大小）
align-self允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性，默認值為auto（表示繼承父元素align-items屬性，如果沒有父元素，等同於stretch）

flex 是flex-grow、flex-shrink和flex-basis的簡寫，默認值為 0 1 auto

flex: none | [ ‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’]該屬性有兩個快捷值: auto(1 1 auto) 和 none(0 0 auto)建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值

overflow溢出

scroll：必定出現滾動條
auto：子元素內容大於父元素時出現滾動條
visible：溢出的內容出現在父元素之外
hidden：溢出時隱藏

**如何實現：單行文本溢出加 …(*)**

white-space: nowrap; /* 首先，強制文本不換行；*/ 
overflow: hidden; /*其次，隱藏溢出；*/  
text-overflow: ellipsis; /*最後，對溢出的文本用 ellipsis 省略號代替。*/

全屏滾動的原理？需要哪些css屬性？

原理

類似於輪播圖，整體元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度將會是500%，但我們只能展示100%，剩下的內容可以通過transform進行Y軸定位，也可以通過margin-top實現

涉及css屬性

overflow:hidden | transition:all 1000ms ease

BFC塊級格式上下文

什麼是BFC？

BFC直譯為塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，並且與外部毫不相干。
W3C對BFC的定義如下：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如，內聯塊，表單元格和表標題），以及溢出值不為「可見」的塊級盒子，，都會為他們的內容創建新的BFC（阻止Fromatting上下文，即塊級格式文本）。
注意：可以把BFC理解為一個大的盒子，其內部是由Block-level box組成的

**如何觸發BFC？（*）**

根元素 → 根元素（html）就是最大的BFC
position設置為 fixed 或者 absolute
display設置為 inline-block 、table-block 、table-caption
overflow的值不為visible
float的值不為none

BFC布局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊，與包含塊的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與外部float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

BFC的作用及原理：

自適應兩欄布局
清除內部浮動
防止垂直 margin 重疊（將垂直方向上的盒子放在不同的 BFC 中，margin 就不會重疊了。）
BFC內部的元素和外部的元素絕對不會互相影響，因此，當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

IFC行內格式上下文

內部的盒子一個接著一個地排列，起點是包含塊的頂點。
如果一行放不下內容，那麼會被「拆」開放到下一行。
只有水平方向上的 Margin 會在盒子中保留。
Padding 和 Border 不會撐開行高。

z-index層疊上下文

z-index 可以解決元素之間覆蓋順序的問題，設置它的層疊順序。
如果元素是沒有定位的，對其設置的 z-index 會是無效的。

**元素層疊時，覆蓋關係準則（*）**

同父同級元素

當具有明顯的層疊水平標示時，如識別的z-index值
- z-index大的覆蓋小的，數值越大，越靠近視覺點。
- z-index相同時，在DOM流中處於後面會覆蓋前面。
都沒有設置 z-index時，使用默認值，一個定位一個沒有定位，那麼定位覆蓋未定位元素。
都沒有定位且發生位置重合現象時，在DOM流中處於後面會覆蓋前面。

父子層級元素

不同父元素，只要父元素越大，那麼整體就越靠近視覺點，而不管其子元素大小情況。
如果父元素 z-index 有效，那麼子元素無論是否設置 z-index 都和父元素一致，會在父元素上方；
如果父元素 z-index 失效（未定位或者使用默認值），那麼定位子元素的 z-index 設置生效。

層疊上下文的創建

根層疊上下文

指的是頁面根元素，也就是滾動條的默認的始作俑者元素。這就是為什麼，絕對定位元素在left/top等值定位的時候，如果沒有其他定位元素限制，會相對瀏覽器窗口定位的原因。

定位元素與傳統層疊上下文

對於包含有
position:relative/position:absolute/position:fixed的定位元素，當其z-index值不是auto的時候，會創建層疊上下文。

CSS3與新時代的層疊上下文

CSS3的出現除了帶來了新屬性，同時還對過去的很多規則發出了挑戰。例如，CSS3 transform對overflow隱藏對position:fixed定位的影響等。而這裡，層疊上下文這一塊的影響要更加廣泛與顯著。如下：

z-index值不為auto的flex項(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的屬性值為上面任意一個。
元素的-webkit-overflow-scrolling設為touch

CSS管理方案

ITCSS

ITCSS（Inverted Triangle CSS）通過規範樣式文件的組織結構來適應項目中特殊性不斷增加的選擇器。見以下倒立的三角形，其中每一層都代表一種樣式的概念結構：

Settings：Global variables、Config switches
Tools：Mixins、Functions
Generic：Ground-zero styles（Normalize.css，resets.css）
Base：Unclassed HTML elements（Type selectors）
Objects：Cosmetic-free design patterns
Components：Designed components
Trumps：Helpers、Overrides

層級自上而下，選擇器影響的 DOM 數量也越來越少，同時選擇器特殊性遞增。修改某個樣式時我們可以輕易從相關組織文件中做出修改，而不影響其它樣式，或是導致 CSS 樣式繼承的崩塌。

命名方案

解決的主要是命名衝突和復用兩個問題，在眾多解決方案中，沒有絕對的優劣。還是要結合自己的場景來決定。

OOCSS

面對對象的規則，主要的原則是兩種：分離結構和外觀，分離容器和內容。
分離結構和外觀：增加可重複的設計單元，同時去推進產品和ui對這方面的思考，比如下面的css使用時對象模式的命名和模塊化規則。
分離容器和內容：指的是樣式的使用不以元素位置唯一匹配，在任何位置你都可以使用這個樣式，如果你不適用這個樣式，會保持默認的樣式。

SMACSS

sma和oocss有很多類似之處，但區分的地方有很多，主要是對樣式的分類。分別是：基礎、布局、模塊、狀態、主題
與oocss相比，其實大部分設計思路是一樣的，以一個類作為css的作用域（作用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區別就是針對皮膚和狀態的不同書寫規則
- 基礎：可以適用於任何位置，我也稱全局樣式
- 布局：主要是用來實現不同的特色布局，提高布局的復用率，
- 模塊：設計中的模塊化，可重複使用的一個單元，一般是dom+css的耦合綁定。
- 狀態：描述在特定狀態下的布局或者模塊的特殊化表現，這裡我覺得要推薦下《css禪意花園》，在dom結構不變的情況下，可以通過css的皮膚化實現樣式的改版。
- 主題：與狀態相比更加定製的是，我們會針對有些特殊的模塊，進行主題的設置，包括一系列的顏色、尺寸、交互等進行重度設計，參數化設計。

BEM

bem就是塊、元素、修飾符的思維去寫樣式。它不涉及具體的css結構，只是建議你如何命名css。

塊級：所屬組件的名稱
元素：元素在組件里的名稱
修飾符：任何與元素修飾相關的類

Style-Components

徹底拋棄 CSS，用 JavaScript 寫 CSS 規則

CSS Modules

使用JS編譯原生的CSS文件，使其具備模塊化的能力

按需載入

使用require.js按需載入CSS
webpack配置CSS的按需載入

CSS瀏覽器兼容性

瀏覽器CSS樣式初始化

由於每個瀏覽器的css默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，在所有CSS開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣（推薦初始化庫Normalize.css）。

瀏覽器私有屬性

我們經常會在某個CSS的屬性前添加一些前綴，比如-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性，出現私有屬性的原因是制定HTML和CSS標準的組織W3C動作是很慢的。
通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很複雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經夠成熟了，就會在瀏覽器中加入支持。

為避免日後W3C公布標準時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日後W3C公布了標準，border-radius的標準寫法確立之後，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：

-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性
-o代表opera私有屬性

對於私有屬性的順序要注意，把標準寫法放到最後，兼容性寫法放到前面

 -webkit-transform:rotate(-3deg); /*為Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*為Firefox*/ 
 -ms-transform:rotate(-3deg); /*為IE*/ 
 -o-transform:rotate(-3deg); /*為Opera*/ 
 transform:rotate(-3deg);

CSS hack

有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack，寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack。

自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，它可以解析CSS文件並且添加瀏覽器前綴到CSS內容里，使用Can I Use（caniuse網站）的數據來決定哪些前綴是需要的。
把Autoprefixer添加到資源構建工具（例如Grunt）後，可以完全忘記有關CSS前綴的東西，只需按照最新的W3C規範來正常書寫CSS即可。如果項目需要支持舊版瀏覽器，可修改browsers參數設置。
目前webpack、gulp、grunt都有相應的插件，別再讓CSS兼容性浪費你的時間。

常見的CSS兼容性問題有哪些

不同瀏覽器的標籤默認的padding/margin不同，通過初始化css樣式可以解決 *{ margin:0;padding:0px; }
IE6雙邊距BUG
設置較小高度標籤（一般小於10px）在IE6,IE7中高度超出自己設置的高度，通過設置overflow:hidden;或者設置行高line-height小於你設置的高度
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性
Chrome中文界面下默認會將小於12px的文本強製為12px 通過加入css屬性 -webkit-text-size-adjust：none;可以解決，或者使用transform中的縮放屬性
超鏈接訪問過後hover樣式就不出現，因為被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變css屬性的排列屬性：L-V-H-A a:link{} → a:visited{} → a:hover{} → a:active{}
IE下，event對象有x,y屬性，但是沒有pageX，pageY屬性，但沒有x，y屬性解決方式：通過條件- png24位的圖片在IE6瀏覽器上出現背景，解決方案是做出PNG8

CSS優化及性能提升

將css文件放在頁面最上面，多個css可合併，並盡量減少http請求
避免過渡約束，避免使用後代選擇符，鏈式選擇符，多種類型選擇符
避免不必要的命名空間，避免不必要的重複樣式，移除空的css規則
使用具有語義的名字，使用緊湊的語法
避免使用 !important
儘可能地精簡規則，儘可能合併不同類的重複規則，修復解析錯誤
正確使用display屬性
- inline後不應該使用width、height、margin、padding以及float
- inline-block後不應該使用float；block後不應該使用vertical-align
不濫用浮動，遵守盒模型規則
不濫用web字體，不聲明過多font-size，不重複定義h1-h6，不給h1-h6定義過多樣式
值為0時不需要任何單位
標準化各種瀏覽器前綴

WEB標準以及W3C

對於結構的要求：

規範的標籤可以提高搜索引擎對頁面的抓取效率，對SEO很有幫助

標籤要閉合
標籤字母小寫
標籤不允許隨意嵌套

對於CSS和JS來說：

盡量使用外鏈CSS樣式表和JS腳本。同時結構，表現和行為分為三塊，符合規範。此外，還得提高頁面渲染速度，提高用戶體驗。
盡量少用行內樣式，保證結構和表現分離。標籤的id和class等的屬性命名要做到見文知意，標籤越少，載入越快，用戶體驗就會越高。同時代碼方面也會更易於維護，便於改版。
不需要變動內容，便可一同列印版本而不需要複製內容，提高網站易用性。

問幾個問題

Q1: 當position跟display、overflow、float這些特性相互疊加後會出現什麼情況？

display：規定元素應該生成的框的類型（子元素的排序方式）
position：規定元素的定位類型
float：定義元素在哪個方向浮動
其中，position:absolute / fixed 優先順序最高，當position設置為absolute或者fixed時，float失效，display需要調整，float / absolute定位的元素，只能是塊元素或表單（block / table）

Q2：display:none 與 visibility:hidden 的區別是什麼？

display:none 隱藏對應的元素，在文檔布局中不再分配空間（導致重排）
visibility:hidden 隱藏對應的元素，在檔布局中保留原來的空間（導致重繪）
前者會使元素及其後代全部隱藏；後者具有繼承性，子代會保持 hidden 的狀態，但也可以單獨設置為 visibility: visible 進行顯示。

Q3：border:none;與border:0;有什麼區別？

性能差異：

{border：0;}: 把border設置為0像素，雖然在頁面上看不到，但是按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用內存值；
{border：none；}被理解為border-style:none。boder:0;比border:none多渲染了一個border-width:0,也就是為什麼border:none的性能要比border:0高；

兼容性差異：

{border:none;}當border為「none」時似乎對IE6/7無效邊框依然存在當border為「0」時，感覺比「none」更有效，所有瀏覽器都一致把邊框隱藏。

Q4：px | em| REM 有什麼區別?

PXpx像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕解析度而言的。EMem的值並不是固定的， em會繼承父級元素的字體大小。（瀏覽器body中1em=16px）

body選擇器中聲明Font-size=62.5%；
將你的原來的px數值除以10，然後換上em作為單位；
重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

REM（css3新增）使用rem相對的只是HTML根元素。集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。EX（不推薦）

ex 是一個相對長度單位，1ex 被定義為一種給定字體的小寫字母「x」的高度。因此，這個值會隨字體的不同而變化。
然而，很多瀏覽器都沒有內置 ex 高度值，只是簡單的取 em 的值，再取其一半作為 ex 的值。所以，一般不推薦使用 ex 這個長度單位。選擇使用什麼字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。

Q5：視口單位 vw、vh、vmin、vmax

vw 視口寬度的1/100。
vh 視口高度的1/100。
vmin vw 和 vh 中的最小值。
vmax vw 和 vh 中的最大值。

Q6：RGBA() 與 opacity 在透明效果上有什麼區別？

opacity 作用於元素，以及元素內的所有內容的透明度
rgba() 只作用於元素的顏色或者背景色（設置rgba透明的元素的子元素不會繼承透明效果）

Q7：png、jpg、 jpeg、 bmp、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？

png攜帶型網路圖片（Portable Network Graphics）,是一種無損數據壓縮點陣圖文件格式。優點是：壓縮比高，色彩好。大多數地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種點陣圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果。
bmp的優點：高質量圖片；缺點：體積太大；適用場景：windows桌面壁紙；
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

Q8：隱藏或者透明元素的方法？

opacity: 0; //1透明度為 0，整體都看不見了；
visibility: hidden; //2這個和上邊類似；
display: none; //3消失，不佔用位置；
background-color: rgba(0,0,0,0.2); //4隻是背景色透明

Q9：css sprites是什麼？如何使用？

CSS sprites（雪碧）的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非標籤。

Q10：什麼是漸進增強和優雅降級？

漸進增強

是指從最基本的可用性出發，在保證站點頁面在低級瀏覽器中的可用性和可訪問性的基礎上，逐步增加功能及提高用戶體驗。
本質上講，我們日常的一些開發習慣，例如首先使用標記語言編寫頁面，然後通過樣式表來控制頁面樣式等，都屬於漸進增強的概念
其他更為明顯的行為包括使用HTML5、CSS3等新技術，針對高級瀏覽器為頁面提高用戶體驗的豐富程度。

優雅降級

是指首先使用最新的技術面向高級瀏覽器構建最強的功能及用戶體驗，然後針對低級瀏覽器的限制，逐步衰減那些無法被支持的功能及體驗。
在我們日常的開發中，一個典型的平穩退化的例子就是首先針對Chrome編寫頁面代碼，然後修復IE中的異常或針對IE去除那些無法被實現的功能特色

所以

這兩個概念方法其實早已並存在我們的日常開發工作中了，只是「漸進增強」與「優雅降級」這樣的措辭是近些年才開始被普及。
在我們眼下的HTML5與 CSS3實戰中，這兩個概念就尤其重要了，怎樣保證使用不斷變化的新技術來構建在主流瀏覽器下都具有基本可用性的站點，並針對高級瀏覽器進行體驗提升，是我們在開發過程中需要明確的思路。

巨人的肩膀

徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index
深入理解CSS中的層疊上下文和層疊順序
30 分鐘學會 Flex 布局
寫給自己看的display: flex布局教程
瀏覽器將rem轉成px時有精度誤差怎麼辦？
CSS 基礎拾遺 | 整理了數十萬字資料，分享給你這些 CSS 乾貨
css篇–100道近兩萬字幫你鞏固css知識點

最後

歡迎糾錯，看到會及時修改噠！溫故而知新，希望我們都可以保持本心，念念不忘，必有迴響。

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/253085.html

三個div上中下布局「如何讓兩個div上下排列」