CSS常見問題小結

CSS常見問題小結

1、行內樣式、內聯樣式、外部樣式

• 行內樣式：代碼寫在具體網頁中的一個元素內；好比：

  <div style="color:#f00"></div>

  • 通常不須要擔憂樣式優先級與樣式覆蓋
  • 在製做頁面的時候須要爲不少的標籤設置style屬性，因此會致使HTML頁面不夠純淨，文件體積過大
  • 不利於SEO，後期維護成本高。

• 內聯樣式：在</head>前面寫；好比：

  <style type="text/css">.div{color:#F00}</style>

  • 若是文件不多，CSS代碼也很少，不考慮樣式複用，能夠選擇這種方式
  • 樣式只針對當前頁面

• 外部樣式：引用外部css文件；好比：

  <link href="css.css" type="text/css" rel="stylesheet" />

  • css與html分離，維護方便，最經常使用
• 優先級

2、樣式優先級與樣式覆蓋

當咱們在討論CSS選擇器優先級的時候，咱們在討論什麼？
其實不少人都對此有點模糊，那我換個方式問： 一個CSS屬性的最終值是怎麼來？
回答: CSS屬性的最終值是經過層疊計算得來的。
通俗的理解，其實就是先計算再重疊

層疊是CSS的一個基本特徵，它是一個定義瞭如何合併來自多個源的屬性值的算法。它在CSS處於核心地位，CSS的全稱層疊樣式表正是強調了這一點。

層疊計算過程

在學習css的時候，必定會先認識什麼是html element，什麼是class，什麼是id，什麼是css的inline寫法。瞭解了基本的css以後，有一個東西必定要先了解，那就是什麼是css權重。
權重影響樣式優先級，優先級的計算首先是 選擇器權重 的優先級計算，而後是 聲明前後順序 的優先級計算

• 一、先看樣式來源。同時結合!important：開發者 + !important > 瀏覽器 + !important > 開發者 > 瀏覽器。

• 二、再看規則的權重或者說特異性(specificity)：!important > 內聯 > 選擇器(ID > Class/psuedo-class(偽類)/attribute（屬性選擇器） > Element)

  W3C文檔地址

  A selector’s specificity is calculated for a given element as follows:

  1.count the number of ID selectors in the selector (= A)

  2.count the number of class selectors, attributes selectors, and pseudo-classes in the s elector (= B)

  3.count the number of type selectors and pseudo-elements in the selector (= C)

  4.ignore the universal selector

  注意：重複的 css selector, 其權重會被重複計算

• 三、最後看聲明順序

CSS處理屬性值的流程

• 一、declared value
  好比一個<div>元素的width屬性，可能被不少地方的聲明命中
• 二、cascaded value
  經過計算層疊優先級，在第一步的多個值中找到優先級最高的那個
• 三、specified value
  好比color屬性，若是在前兩步發現沒有指定color的值，那麼根據默認值的邏輯進行填充。
• 四、computed value
  把80%這種相對值計算爲絕對值，好比根據父元素的寬度轉換成px單位。
• 五、used value
  多個屬性值結合之後，不必定知足規範的約束，須要根據規範規定的方式肯定各個屬性最後採用的值。
  好比一個絕對定位元素的leftright不可能徹底根據指定值來，那麼在指定的值過分約束時，須要根據規則進行調整。
• 六、actual value
  瀏覽器實現時根據硬件、軟件環境可能會對最後生效的值進一步進行調整，好比調整小數的精度。

咱們常說的優先級其實就是其中 1 到 2 的最初那步，一共就三個層級的規則。

3、選擇器類型

• 類型選擇器（type selectors）（例如, h1）和 僞元素（pseudo-elements）（例如, ::before）
• 類選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type="radio"]），僞類（pseudo-classes）（例如, :hover）
  css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句話中的第一個字母，或者是列表中的第一個元素。
• ID選擇器（例如, #example）
• 通配選擇符，關係選擇符
• !important

4、盒模型

• W3C標準盒模型：width = contentWidth+padding+border+margin。(display: content-box;)

盒子在頁面佔據的大小包括了margin，border，padding以及content。而盒子的實際大小包括border，padding以及內容區域content，可是不包括margin。另外一點須要說明的是，咱們經過JavaScript代碼獲取某一個元素的大小時，所獲得的width和height實際上是盒子模型中的content的大小。

• IE盒模型：width = contentWidth(包含border+padding)+margin。(display: border-box;)

IE盒模型也包含margin，border，padding以及content這幾部分。IE盒模型的content部分包含了border和padding。

• border-box和content-box的區別和使用場景？

• • 特殊場景的佈局：假設咱們有這樣的一個場景，設置子類元素的margin或者border時，可能會撐破父層元素的尺寸，這時我就須要使用box-sizing: border-box來將border包含進元素的尺寸中，這樣就不會存在撐破父層元素的狀況了。
• 統一風格的表單元素：表單中有一些input元素其實仍是展示的是傳統IE盒模型，帶有一些默認的樣式，並且在不一樣平臺或者瀏覽器下的表現不一，形成了表單展示的差別。此時咱們能夠經過box-sizing屬性來構建一個風格統一的表單元素。

5、塊級元素、行內元素、行塊元素

• 爲何要區分：

  • display: block/inline/inline-block，不一樣的值有不一樣的使用場景

• 表現差別：

  • 塊級元素在寬度上會佔滿其父元素的空間，每一個塊級元素會獨佔一行
  • 行內元素在寬度等於其內容寬度，多個行內元素一行排列，超過父元素的寬度則另起一行
  • 行塊元素對外的表現像行內元素，對內的表現像塊級元素（行內化的塊級元素）

• 行內元素特色：

  • 不能設置heightwidthline-height上下margin上下padding
  • 不能容納塊級元素

• 塊級元素特色：

  • 默認寬度爲容器寬度

• 注意點：

  • 行塊元素之間，瀏覽器會有一個默認的間距，去除inline-block間距的方法？及這個問題將來可能的解決方向

  • • 1.將全部的行內塊元素直接設置浮動，我的認爲最直接的方法，固然是在適當的場景中，由於過分的浮動會產生須要清除浮動的必要（本身也總結經常使用的清除浮動的方法，有興趣能夠喵喵看看，大神越過）。
  • 2.在產生邊距的行內塊的父元素設置屬性：font-size：0px;
  • 3.在父元素上設置，word-spacing(詞邊距)的值設爲合適的負值便可
  • 4.在html中將行內塊元素在同一行顯示，不要進行美觀縮進或者換行
• 給設置行內元素 floatabsolute定位fixed定位，則該行內元素轉換爲塊級元素
• vertical-align只能做用在非塊級元素上
• 替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）

6、React Native中的樣式與css的區別

A StyleSheet is an abstraction similar to CSS StyleSheets

• React Native 的樣式基本上是實現了 CSS 的一個子集，而且屬性名不徹底一致，因此當你開始在考慮兼容 React Native 端以前，能夠先簡要了解一下 React Native 的樣式。
• 這些樣式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的語法要求使用了駝峯命名法。
• RN使用 JavaScript 來寫樣式，全部核心組件都接受名爲style的屬性，至關於css的行內樣式。
• 在 React Native 中使用 Flexbox 規則來指定某個組件的子元素的佈局。Flexbox 能夠在不一樣屏幕尺寸上提供一致的佈局結構。所以，若是你要考慮 React Native 端，那你的樣式佈局就得采用 Flex 佈局。

7、基於flex佈局

• 容器屬性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

• 項目屬性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
• 經常使用佈局

8、定位

relative、absolute、static、fixed的做用，相對誰定位？

• static（靜態定位）：occurs where it normally would in the document.

默認值。元素使用正常的佈局行爲，相對於document，即元素在文檔流中當前的佈局位置。此時top,bottom, left, right 或者 z-index無效。

• relative（相對定位）：you can use top,bottom... to move the element relative to where it would normally occur in the document.

生成相對定位的元素，相對於本該在文檔中的位置。經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。

• absolute (絕對定位）：the element will removed from the document and placed exactly where you tell it to go.

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。絕對定位能夠設置margin，且不會與其餘元素合併。

• fixed（固定定位）：生成絕對定位的元素，相對於屏幕飾釦進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。打印時，元素會出如今每頁的固定位置。
• sticky（粘性定位）：是相對定位和固定定位結合，在跨越閾值以前相對定位，以後固定定位。

9、像素

• dp(device pixel) 設備像素

  • 設備像素（物理像素），顧名思義，顯示屏是由一個個物理像素點組成的，經過控制每一個像素點的顏色，使屏幕顯示出不一樣的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位pt。

• dpr(device pixels ratio) 設備像素比

  • dpr = 設備像素/CSS像素
  • 1px = (dpr)^2 * 1dp

• dip(device independent pixel) 邏輯像素

  • CSS像素 =設備獨立像素 = 邏輯像素

得到設備像素比後，即可得知設備像素與CSS像素之間的比例。當這個比率爲1:1時，使用1個設備像素顯示1個CSS像素。當這個比率爲2:1時，使用4個設備像素顯示1個CSS像素，當這個比率爲3:1時，使用9（3*3）個設備像素顯示1個CSS像素。

注意點

• 寫RN樣式，避免過多行內樣式，經過建立一個樣式表，而後利用ID來引用樣式，從而減小頻繁建立新的樣式對象。

  • 從 render 函數中移除具體的樣式內容，可使代碼更清晰易懂。
  • 給樣式命名也能夠對 render 函數中的組件增長語義化的描述。
• 高度最好不要固定