apache僞靜态把css 排除掉_一文梳理CSS必會知識點

本文主要梳理CSS必會知識點，會持續補充更新哦！長文預警！這可能是目前最長的一篇了? ? ? ?

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選擇器種類

1. 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. 位于标簽裡的中所定義的CSS擁有最進階的優先權。 
2. 位于 标簽中的 @import 引入樣式表所定義。
3. 由标簽所引入的樣式表定義。
4. 由标簽所引入的樣式表内的 @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)

• 添加額外标簽

//添加額外标簽并且添加clear屬性

• 建立僞類選擇器清除浮動(推薦)

//添加:after僞元素.parent:after{    content: ''; /* 設定添加子元素的内容是空 */      display: block; /* 設定添加子元素為塊級元素 */           height: 0; /* 設定添加的子元素的高度0 */         visibility: hidden; /* 設定添加子元素看不見 */         clear: both; /* 設定clear：both */}
           

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** 定義多根軸線的對齊方式，如果容器隻有一根軸線，該屬性不起作用**

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

項目屬性(6個)

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

align-self: auto | flex-start | flex-end | center | baseline | 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布局規則：

1. 内部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的margin box的左邊， 與包含塊的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4. BFC的區域不會與外部float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6. 計算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定位的影響等。而這裡，層疊上下文這一塊的影響要更加廣泛與顯著。

如下：

1. z-index值不為auto的flex項(父元素display:flex|inline-flex).
2. 元素的opacity值不是1.
3. 元素的transform值不是none.
4. 元素mix-blend-mode值不是normal.
5. 元素的filter值不是none.
6. 元素的isolation值是isolate.
7. will-change指定的屬性值為上面任意一個。
8. 元素的-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 有什麼差別?

PX

px像素(Pixel)。相對長度機關。像素px是相對于顯示器螢幕分辨率而言的。EM

em的值并不是固定的， 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

格雷格·賽德尼科夫(Greg Sidelnikov) | 著

曾家龍 | 譯

你知道如何用CSS畫圓形、矩形和正方形嗎？ 你知道如何使這些基本形狀變得不規則嗎？ 你知道如何用CSS組合不規則形狀，進而創作出藝術作品嗎？  本書通過200多幅示意圖直覺地展示了常用CSS屬性的用法及效果，涉及面廣，包括僞類選擇器、僞元素選擇器、盒模型、位置、字型、陰影、元素可見性、浮動、顔色漸變、二維變換、三維變換、彈性盒布局、網格布局等。 雖然 CSS 是為網站與 Web 應用程式的布局而生的，但才華橫溢的使用者界面設計師把它用到了極緻。是以，為了增添趣味性，本書剖析了如何用CSS繪制藝術作品“太空中的特斯拉汽車”。書後附有屬性索引，友善讀者參閱。

圖靈官方小店 享受低價折扣