CSS常見問題小結

ivyzhang 發布于2019-08-30 10:48 / 573人閱讀

摘要：常見問題小結一行內樣式內聯樣式外部樣式行內樣式代碼寫在具體網頁中的一個元素內比如一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時候需要為很多的標簽設置屬性，所以會導致頁面不夠純凈，文件體積過大不利于，后期維護成本高。

CSS常見問題小結 一、行內樣式、內聯樣式、外部樣式

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

一般不需要擔心樣式優先級與樣式覆蓋

在制作頁面的時候需要為很多的標簽設置style屬性，所以會導致HTML頁面不夠純凈，文件體積過大

不利于SEO，后期維護成本高。

內聯樣式：在前面寫；比如：

如果文件很少，CSS代碼也不多，不考慮樣式復用，可以選擇這種方式

樣式只針對當前頁面

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

css與html分離，維護方便，最常用

優先級

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

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

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

層疊計算過程

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

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

2、再看規則的權重或者說特異性(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, 其權重會被重復計算

3、最后看聲明順序

CSS處理屬性值的流程

1、declared value
比如一個

元素的width屬性，可能被很多地方的聲明命中

2、cascaded value
通過計算層疊優先級，在第一步的多個值中找到優先級最高的那個

3、specified value
比如color屬性，如果在前兩步發現沒有指定color的值，那么根據默認值的邏輯進行填充。

4、computed value
把80%這種相對值計算為絕對值，比如根據父元素的寬度轉換成px單位。

5、used value
多個屬性值結合以后，不一定滿足規范的約束，需要根據規范規定的方式確定各個屬性最后采用的值。
比如一個絕對定位元素的leftright不可能完全根據指定值來，那么在指定的值過度約束時，需要根據規則進行調整。

6、actual value
瀏覽器實現時根據硬件、軟件環境可能會對最后生效的值進一步進行調整，比如調整小數的精度。

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

三、選擇器類型

類型選擇器（type selectors）（例如, h1）和偽元素（pseudo-elements）（例如, ::before）

類選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如, [type="radio"]），偽類（pseudo-classes）（例如, :hover）
css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。

ID選擇器（例如, #example）

通配選擇符，關系選擇符

!important

四、盒模型

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屬性來構建一個風格統一的表單元素。

五、塊級元素、行內元素、行塊元素

為什么要區分：

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只能作用在非塊級元素上

替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）

六、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 布局。

七、基于flex布局

容器屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

項目屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

常用布局

八、定位

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（粘性定位）：是相對定位和固定定位結合，在跨越閾值之前相對定位，之后固定定位。

九、像素

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 函數中的組件增加語義化的描述。

高度最好不要固定

GPU云服務器云服務器設計小結對象小結個人小結小結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114577.html

富文本編輯器小結

摘要：自己寫一個富文本編輯器。無處不在的坑首先端的富文本編輯器，基本命令參照命令文檔，兼容性的問題就不說了，大家都知道，主要說說一些開發了才能知道的坑。近況最近由于公司業務上的需求，我們需要一個自己的編輯器來編寫我們得到APP里面的訂閱文章，為什么需要自己的編輯器，主要是因為用第三方的編輯器很難完成公司定制化的需求，比如：排版上我們想要更好看點，統一，因為各個訂閱專欄編輯的人不一樣，容易...

ZHAO_ 2019-08-20 12:06 評論0 收藏0
富文本編輯器小結

摘要：自己寫一個富文本編輯器。無處不在的坑首先端的富文本編輯器，基本命令參照命令文檔，兼容性的問題就不說了，大家都知道，主要說說一些開發了才能知道的坑。近況最近由于公司業務上的需求，我們需要一個自己的編輯器來編寫我們得到APP里面的訂閱文章，為什么需要自己的編輯器，主要是因為用第三方的編輯器很難完成公司定制化的需求，比如：排版上我們想要更好看點，統一，因為各個訂閱專欄編輯的人不一樣，容易...

CatalpaFlat 2019-08-01 15:54 評論0 收藏0
CSS 小結筆記之三種樣式表

摘要：內部樣式表內部樣式表一般寫在頭部，在標簽內用標簽括起來。外部樣式表外部樣式表是單獨將樣式寫到一個文件中，并在頭部引用。使用外部樣式表時要注意如果出現多重樣式時樣式覆蓋帶來的問題。CSS 引入共有三種方式：內部樣式表，內聯樣式（行內樣式）表，外部樣式表，當然也可以使用多重樣式內聯樣式內聯樣式表內聯樣式直接把樣式卸載html代碼行內，一般僅僅在此樣式僅僅只在當前元素上應用時使用，其他...

李文鵬 2019-04-23 13:30 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

galaxy_robot 2019-08-01 17:40 評論0 收藏0
移動web開發問題和優化小結

摘要：如何讓我們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發問題和優化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言到目前為止，互聯網行業里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...

ysl_unh 2019-08-21 16:44 評論0 收藏0