CSS常見(jiàn)問(wèn)題小結(jié)

ivyzhang 發(fā)布于2019-08-30 10:48 / 563人閱讀

摘要：常見(jiàn)問(wèn)題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁(yè)面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁(yè)面不夠純凈，文件體積過(guò)大不利于，后期維護(hù)成本高。

CSS常見(jiàn)問(wèn)題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式

行內(nèi)樣式：代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)；比如：

一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋

在制作頁(yè)面的時(shí)候需要為很多的標(biāo)簽設(shè)置style屬性，所以會(huì)導(dǎo)致HTML頁(yè)面不夠純凈，文件體積過(guò)大

不利于SEO，后期維護(hù)成本高。

內(nèi)聯(lián)樣式：在前面寫(xiě)；比如：

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

樣式只針對(duì)當(dāng)前頁(yè)面

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

css與html分離，維護(hù)方便，最常用

優(yōu)先級(jí)

二、樣式優(yōu)先級(jí)與樣式覆蓋

當(dāng)我們?cè)谟懻揅SS選擇器優(yōu)先級(jí)的時(shí)候，我們?cè)谟懻撌裁矗?br>其實(shí)很多人都對(duì)此有點(diǎn)模糊，那我換個(gè)方式問(wèn)：一個(gè)CSS屬性的最終值是怎么來(lái)？
回答: CSS屬性的最終值是通過(guò)層疊計(jì)算得來(lái)的。
通俗的理解，其實(shí)就是先計(jì)算再重疊

層疊是CSS的一個(gè)基本特征，它是一個(gè)定義了如何合并來(lái)自多個(gè)源的屬性值的算法。它在CSS處于核心地位，CSS的全稱層疊樣式表正是強(qiáng)調(diào)了這一點(diǎn)。

層疊計(jì)算過(guò)程

在學(xué)習(xí)css的時(shí)候，一定會(huì)先認(rèn)識(shí)什么是html element，什么是class，什么是id，什么是css的inline寫(xiě)法。了解了基本的css之后，有一個(gè)東西一定要先了解，那就是什么是css權(quán)重。
權(quán)重影響樣式優(yōu)先級(jí)，優(yōu)先級(jí)的計(jì)算首先是選擇器權(quán)重的優(yōu)先級(jí)計(jì)算，然后是聲明先后順序的優(yōu)先級(jí)計(jì)算

1、先看樣式來(lái)源。同時(shí)結(jié)合!important：開(kāi)發(fā)者 + !important > 瀏覽器 + !important > 開(kāi)發(fā)者 > 瀏覽器。

2、再看規(guī)則的權(quán)重或者說(shuō)特異性(specificity)：!important > 內(nèi)聯(lián) > 選擇器(ID > Class/psuedo-class(偽類(lèi))/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

注意：重復(fù)的 css selector, 其權(quán)重會(huì)被重復(fù)計(jì)算

3、最后看聲明順序

CSS處理屬性值的流程

1、declared value
比如一個(gè)

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

2、cascaded value
通過(guò)計(jì)算層疊優(yōu)先級(jí)，在第一步的多個(gè)值中找到優(yōu)先級(jí)最高的那個(gè)

3、specified value
比如color屬性，如果在前兩步發(fā)現(xiàn)沒(méi)有指定color的值，那么根據(jù)默認(rèn)值的邏輯進(jìn)行填充。

4、computed value
把80%這種相對(duì)值計(jì)算為絕對(duì)值，比如根據(jù)父元素的寬度轉(zhuǎn)換成px單位。

5、used value
多個(gè)屬性值結(jié)合以后，不一定滿足規(guī)范的約束，需要根據(jù)規(guī)范規(guī)定的方式確定各個(gè)屬性最后采用的值。
比如一個(gè)絕對(duì)定位元素的leftright不可能完全根據(jù)指定值來(lái)，那么在指定的值過(guò)度約束時(shí)，需要根據(jù)規(guī)則進(jìn)行調(diào)整。

6、actual value
瀏覽器實(shí)現(xiàn)時(shí)根據(jù)硬件、軟件環(huán)境可能會(huì)對(duì)最后生效的值進(jìn)一步進(jìn)行調(diào)整，比如調(diào)整小數(shù)的精度。

我們常說(shuō)的優(yōu)先級(jí)其實(shí)就是其中 1 到 2 的最初那步，一共就三個(gè)層級(jí)的規(guī)則。

三、選擇器類(lèi)型

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

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

ID選擇器（例如, #example）

通配選擇符，關(guān)系選擇符

!important

四、盒模型

W3C標(biāo)準(zhǔn)盒模型：width = contentWidth+padding+border+margin。(display: content-box;)

盒子在頁(yè)面占據(jù)的大小包括了margin，border，padding以及content。而盒子的實(shí)際大小包括border，padding以及內(nèi)容區(qū)域content，但是不包括margin。另一點(diǎn)需要說(shuō)明的是，我們通過(guò)JavaScript代碼獲取某一個(gè)元素的大小時(shí)，所得到的width和height其實(shí)是盒子模型中的content的大小。

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

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

border-box和content-box的區(qū)別和使用場(chǎng)景？

特殊場(chǎng)景的布局：假設(shè)我們有這樣的一個(gè)場(chǎng)景，設(shè)置子類(lèi)元素的margin或者border時(shí)，可能會(huì)撐破父層元素的尺寸，這時(shí)我就需要使用box-sizing: border-box來(lái)將border包含進(jìn)元素的尺寸中，這樣就不會(huì)存在撐破父層元素的情況了。

統(tǒng)一風(fēng)格的表單元素：表單中有一些input元素其實(shí)還是展現(xiàn)的是傳統(tǒng)IE盒模型，帶有一些默認(rèn)的樣式，而且在不同平臺(tái)或者瀏覽器下的表現(xiàn)不一，造成了表單展現(xiàn)的差異。此時(shí)我們可以通過(guò)box-sizing屬性來(lái)構(gòu)建一個(gè)風(fēng)格統(tǒng)一的表單元素。

五、塊級(jí)元素、行內(nèi)元素、行塊元素

為什么要區(qū)分：

display: block/inline/inline-block，不同的值有不同的使用場(chǎng)景

表現(xiàn)差異：

塊級(jí)元素在寬度上會(huì)占滿其父元素的空間，每個(gè)塊級(jí)元素會(huì)獨(dú)占一行

行內(nèi)元素在寬度等于其內(nèi)容寬度，多個(gè)行內(nèi)元素一行排列，超過(guò)父元素的寬度則另起一行

行塊元素對(duì)外的表現(xiàn)像行內(nèi)元素，對(duì)內(nèi)的表現(xiàn)像塊級(jí)元素（行內(nèi)化的塊級(jí)元素）

行內(nèi)元素特點(diǎn)：

不能設(shè)置heightwidthline-height上下margin上下padding

不能容納塊級(jí)元素

塊級(jí)元素特點(diǎn)：

默認(rèn)寬度為容器寬度

注意點(diǎn)：

行塊元素之間，瀏覽器會(huì)有一個(gè)默認(rèn)的間距，去除inline-block間距的方法？及這個(gè)問(wèn)題未來(lái)可能的解決方向

1.將所有的行內(nèi)塊元素直接設(shè)置浮動(dòng)，個(gè)人認(rèn)為最直接的方法，當(dāng)然是在適當(dāng)?shù)膱?chǎng)景中，因?yàn)檫^(guò)度的浮動(dòng)會(huì)產(chǎn)生需要清除浮動(dòng)的必要（自己也總結(jié)常用的清除浮動(dòng)的方法，有興趣可以喵喵看看，大神越過(guò)）。

2.在產(chǎn)生邊距的行內(nèi)塊的父元素設(shè)置屬性：font-size：0px;

3.在父元素上設(shè)置，word-spacing(詞邊距)的值設(shè)為合適的負(fù)值即可

4.在html中將行內(nèi)塊元素在同一行顯示，不要進(jìn)行美觀縮進(jìn)或者換行

給設(shè)置行內(nèi)元素 floatabsolute定位fixed定位，則該行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素

vertical-align只能作用在非塊級(jí)元素上

替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定元素的具體顯示內(nèi)容。大多數(shù)元素是不可替換元素，即其內(nèi)容直接表現(xiàn)給用戶端（例如瀏覽器）

六、React Native中的樣式與css的區(qū)別

A StyleSheet is an abstraction similar to CSS StyleSheets

React Native 的樣式基本上是實(shí)現(xiàn)了 CSS 的一個(gè)子集，并且屬性名不完全一致，所以當(dāng)你開(kāi)始在考慮兼容 React Native 端之前，可以先簡(jiǎn)要了解一下 React Native 的樣式。

這些樣式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的語(yǔ)法要求使用了駝峰命名法。

RN使用 JavaScript 來(lái)寫(xiě)樣式，所有核心組件都接受名為style的屬性，相當(dāng)于css的行內(nèi)樣式。

在 React Native 中使用 Flexbox 規(guī)則來(lái)指定某個(gè)組件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。因此，如果你要考慮 React Native 端，那你的樣式布局就得采用 Flex 布局。

七、基于flex布局

容器屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

項(xiàng)目屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

常用布局

八、定位

relative、absolute、static、fixed的作用，相對(duì)誰(shuí)定位？

static（靜態(tài)定位）：occurs where it normally would in the document.

默認(rèn)值。元素使用正常的布局行為，相對(duì)于document，即元素在文檔流中當(dāng)前的布局位置。此時(shí)top,bottom, left, right 或者 z-index無(wú)效。

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

生成相對(duì)定位的元素，相對(duì)于本該在文檔中的位置。通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常（原先本身）位置進(jìn)行定位。可通過(guò)z-index進(jìn)行層次分級(jí)。

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

生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過(guò)z-index進(jìn)行層次分級(jí)。絕對(duì)定位可以設(shè)置margin，且不會(huì)與其他元素合并。

fixed（固定定位）：生成絕對(duì)定位的元素，相對(duì)于屏幕飾扣進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。可通過(guò)z-index進(jìn)行層次分級(jí)。打印時(shí)，元素會(huì)出現(xiàn)在每頁(yè)的固定位置。

sticky（粘性定位）：是相對(duì)定位和固定定位結(jié)合，在跨越閾值之前相對(duì)定位，之后固定定位。

九、像素

dp(device pixel) 設(shè)備像素

設(shè)備像素（物理像素），顧名思義，顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的，通過(guò)控制每個(gè)像素點(diǎn)的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來(lái)那天起，它上面的物理像素點(diǎn)就固定不變了，單位pt。

dpr(device pixels ratio) 設(shè)備像素比

dpr = 設(shè)備像素/CSS像素

1px = (dpr)^2 * 1dp

dip(device independent pixel) 邏輯像素

CSS像素 =設(shè)備獨(dú)立像素 = 邏輯像素

獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí)，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素，當(dāng)這個(gè)比率為3:1時(shí)，使用9（3*3）個(gè)設(shè)備像素顯示1個(gè)CSS像素。

注意點(diǎn)

寫(xiě)RN樣式，避免過(guò)多行內(nèi)樣式，通過(guò)創(chuàng)建一個(gè)樣式表，然后利用ID來(lái)引用樣式，從而減少頻繁創(chuàng)建新的樣式對(duì)象。

從 render 函數(shù)中移除具體的樣式內(nèi)容，可以使代碼更清晰易懂。

給樣式命名也可以對(duì) render 函數(shù)中的組件增加語(yǔ)義化的描述。

高度最好不要固定