CSS總結

時間 2019-12-09

標籤 css 總結欄目 CSS 简体版

原文原文鏈接

display

inline/inline-block/block -->> 牛奶/果凍/堅果css

inline: img, span, strong, em, i, em, a...
inline-block: input, button, ...（table-cell元素）
block: p, div, ...(元素只要應用了float, position就會變成block元素)
table
flex

table

table-row (tr)
table-cell (td)
table-row-group (tbody)
table-header-group (thead)
table-footer-group (tfooter)
table-caption (caption)
table-column (col)
table-column-group (colgroup)

display:table-cell下，垂直居中，等高特性

table表格中的同一行列表元素都等高。 display:table-cell屬性的元素對margin不敏感，也就是margin做用在上面不work的。html

最適用場景

列表個數不固定，可是不管列表幾個，都平分容器空間android

父級設置display:table，同時寬度爲容器寬度，或是直接width:100%, 此時display:table-cell子元素就會自動等分。chrome

flex

flex-direciton | flex-wrap (flex container)

.container { display: flex | inline-flex; }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
.container { flex-flow: <'flex-direction'> | <'flex-wrap'> }瀏覽器

justify-content | align-items | align-content (flex container)

justify-content定義了item在主軸上的對齊方式

.item { justify-content: flex-start | flex-end | center | space-between （兩端對齊，item之間的間隔都相等）| space-around(最邊緣item與邊框的間隔相等，item之間的間隔比item與邊框的間隔大一倍); }dom

align-items定義了item在交叉軸（側軸）上的對齊方式

.item { align-items: flex-start | flex-end | center | baseline | stretch (default); }ide

align-content定義了多根軸線的對齊方式。若是item只有一根軸線(當只有一行，無換行時)，該屬性不起做用

.item { align-content: flex-start | flex-end | center | space-between | space-around | stretch (default); }字體

order定義了item的排列順序，數值越小，數列越靠前，default: 0 (flex items)

.item { order: <integer>; }flex

flex-grow | flex-shrink | flex-basis (flex items)

flex(default: 0 1 auto)

auto(1 1 auto) none(0 0 auto).item { flex: none | [<'flex-grow'> <'flex-shrink'> <'flex-basis'>]; }動畫

flex-grow(default: 0)索取父容器剩餘的空間

flex-basis(default: auto)是width的替代品，在分配空間以前，它會先跟父容器預定這麼多空間，而後剩餘的才歸置到剩餘空間，父容器再把剩餘空間分配給設置了flex-grow的容器，若同時設置了flex-basis和width，width會被覆蓋，即優先級flex-basis > width。可是如若flex-basis，width其中有auto, 則另外的非auto屬性優先級會更高。

flex-shrink(default: 1)定義一個子容器的壓縮比例。

<div class="container"> <div class="B B1">width:300</div> <div class="B B2">width:160</div> <div class="B B3">width:120</div> </div>.container { display: flex; width: 500px; height: 150px; background-color: #eee; } .B { height: 100px; } .B1{ background-color:rgba(255,255,0,.5); width: 300px; flex-grow:1; flex-shrink:2; } .B2{ background-color:rgba(255,0,255,.5); width: 160px; } .B3{ background-color:rgba(0,255,255,.5); width: 120px; }
x2 = 2 * x1500 = 300 * x2 + 160 * x1 + 120 * x1

summary:

剩餘空間＝父容器空間－(子容器1.flex-basis/width) - (子容器2.flex-basis/width) - …
若是父容器空間不夠，就走壓縮flex-shrink，不然走擴張flex-grow；
若是你不但願某個容器在任什麼時候候都不被壓縮，那設置flex-shrink:0；
若是子容器的的flex-basis設置爲0(width也能夠，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將不會爲子容器預留空間。
若是子容器的的flex-basis設置爲auto(width也能夠，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將會根據子容器內容的多少來預留空間。
若是父級的空間足夠：flex-grow有效，flex-shrink無效。若是父級的空間不夠：flex-shrink 有效，flex-grow無效。

align-self容許單個item有與其餘item不同的對齊方式，可覆蓋align-items屬性 (flex-items)

.item { align-self: auto（default，表示繼承父元素的align-items屬性，若無父元素，equal stretch） | flex-start | flex-end | center | baseline | stretch; }

flexBox css tricks: https://css-tricks.com/snippe...

css units

另外需注意chrome強制最小字體爲12號，即便設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節點rem的計算仍是以12px爲基準，因此網上不少文章提到的將html的font-size設爲10方便計算不是那麼可取)。
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。 vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。 vmin：vw和vh中較小的那個。 vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
其它的單位還有： %:百分比 in:寸 cm:釐米 mm:毫米 pt:point，大約1/72寸 pc:pica，大約6pt，1/6寸

padding

不支持任何的負值, margin, letter-spacing, word-spacing, vertical-align支持負值

background-clip

border-box
padding-box
content-box

margin

普通元素的百分比margin都是相對於父級容器的寬度來計算的
絕對定位圓度的百分比margin是相對於第一個定位祖先元素（relative|absolute|fixed）的寬度計算的

margin重疊計算規則：

正正取大值
正負值相加
負負最負值

margin無效的狀況：

inline水平元素(非替換元素，button標籤；正常書寫)垂直margin無效
margin重疊了
display:table-cell/table-row等聲明的margin無效，可是替換元素們例外（firefox: table-cell類型是inline-block渲染；IE：table-call類型是table-cell渲染）
絕對定位的margin值實際上是一直有效的，只是不像普通元素那樣，能讓兄弟元素移動（由於絕對元素是脫離文檔流的）
相對float元素設置margin，它不是相對於該浮動元素，而是外部容器
inline元素致使的margin失效

margin-start | margin-collapse

正常流，margin-start == margin-left, 其它狀況能夠===margin-right|margin-top

vertical-align

vertical-align只對inline/inline-block(table-cell也能夠理解爲inline-block)水平的元素起做用

vertical-align: -2px 元素相對於baseline向下偏移2像素
vertical-align: -10% 這裏的百分比是相對於該元素繼承的行高來計算的
bottom/text-bottm : 與line box底端對齊/與父元素內容區域的底端對齊
-> vertical-align: super 提升盒子的基線到父級合適的上標基線
-> vertical-align: sub 下降盒子的基線到父級合適的下標基線

vertical-align:middle 不起做用，多是由於行高不夠，將行高設爲容器高度便可
table-cell自身設置vertical-align:middle, 才能起做用，給table-cell中的內部元素設middle是不起做用的
inline-block的基線是正常流中最後一個line box的基線

Example: make icon align with text:
<span class="icon middle"></span>
<span class="middle">Centered!</span>

<style type="text/css">
  .icon   { display: inline-block;
  .middle { vertical-align: middle; }
</style>

z-index

指定元素及其子元素的【z順序】，而【z順序】能夠決定當元素髮生覆蓋的時候，哪一個元素在上面。一般較大的z-index值的元素會覆蓋較低的那個元素，若是發生z-index的嵌套，則遵循祖先優先的原則。

z-index: auto（默認值）
z-index: 數字（能夠爲負值，也支持animation,遵循後來居上的，誰大誰牛逼的原則）
z-index: inherit（不考慮CSS3，只有定位(非static)元素（position: relative/absolute/fixed/sticky）的z-index才起做用的）

tips：

層疊上下文即指z軸上下文，頁面根元素天生具備層疊上下文，稱爲「根層疊上下文」，z-index: 的定位元素也具備層疊上下文。
層疊上下文中的每一個元素都有一個層疊水平，決定了同一個層疊上下文中的元素在z舟上的顯示順序。
層疊水平並非z-index, 普通元素就有層疊水平，可是隻有定位元素纔有z-index。
層疊順序：

層疊上下文background/border
負z-index
block塊狀水平盒子
float浮動盒子
inline/inline-block水平盒子
z-index:auto,定位元素的默認值，從層疊順序上來說，等價於z-index: 0
正z-index

z-index嵌套而且z-index都爲Number時，遵循祖先優先原則，可是對於z-index: auto，祖先遵循原則不work，緣由是（z-index: auto）當前層疊上下文的生成盒子層疊水平是0，盒子（除非是根元素）不會建立一個新的層疊上下文。
z-index不爲auto的定位元素會建立層疊上下文，z-index: auto是不會建立層疊上下文的
z-index層疊順序的比較止步於父級層疊上下文

其餘參與層疊上下文的屬性

z-index不爲auto的flex項（父元素爲display: flex/inline-flex, 子元素要設置z-index, 不讓其爲默認值auto）
opacity !=1 的元素參與層疊上下文
transform !=none 的元素參與層疊上下文
position: fixed 的元素參與層疊上下文

必須依賴z-inddex值來建立層疊上下文的狀況

position: relative/absolute/fixed
display: flex/inline-flex容器的子flex項

實踐

對於非浮層元素（彈框類的），避免設置z-index
z-index無需超過2
負z-index與可訪問性隱藏（人肉眼不可見，但輔助設備可見）

relative

相對自身定位（absolute則是去找外面的限制容器）
無侵入，不影響他人
top/left VS bottom/right對立時, relative是鬥爭，top>bottom, left>right（absolute則是拉伸）

限制

top/left/right/bottom限制
限制層級z-index
限制超越overflow(absolute可以越出overflow限制)

tips:

relative層級很高，可覆蓋後面的dom
儘可能減小使用relative, 去施加黑魔法

absolute

獨立的absolute會擺脫overflow的限制，不會受滾動的影響
脫離文檔流
無依賴的absolute會更強大，一些小的icon就可只用absolute來實現，用margin來微調
動畫儘可能做用在absolute上

line-height

內聯元素的盒子高度是由line-height(可繼承的)決定的,撐開div高度的是line-height而不是文字的內容

content area(font-size、font-style決定) + vertical spacing = line-height

line-height: normal | number | length | percent | inherit

normal: 跟着用戶的瀏覽器走，且與元素字體關聯
: number * (font-size)，全部可繼承元素根據font-size重計算各自的line-height
: (1.5em | 1.5rem | 20px | 20pt)
: (150%)相對於設置了該line-height屬性的元素的font-size.即150% * (font-size)
inherit: input框等元素默認行高是normal，使用inherit可讓input框可控性更強

overflow

visible(default) | hidden | scroll | auto | inherit

overflow-x | overflow-y

overflow-x、overflow-y相同時，就等價於overflow
二者不一樣時，如有一個設置爲hidden, 則另一個爲auto,而不是visible

overflow起做用的前提

非display: inline水平
尺寸限制。width/height/max-width/max-height/absolute拉伸
對於td等，須要設置爲table， table-layout: fixed狀態才行

不管是什麼瀏覽器，默認滾動條均來自而不是
滾動條會佔用容器的寬度，會遇到水平居中跳動問題，solution：

html { overflow-y: scroll; }
OR
.container { padding-left: calc(100vw - 100%);
錨點定位於overflow： <div id="one"></div> 1

box-sizing: border-box

此元素的內邊距和邊框再也不會增長它的寬度, 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度

行內元素padding margin

行內元素的padding-top、padding-bottom、margin-top、margin-bottom屬性設置是無效的
行內元素的padding-left、padding-right、margin-left、margin-bottom屬性設置是有效的
行內元素的padding-top、padding-bottom從顯示的效果上是增長的，但其實設置的是無效的。並不會對他周圍的元素產生任何影響。

display: none;與visibility: hidden;的區別

聯繫：它們都能讓元素不可見
區別：

display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

word-break | word-wrap | white-space

white-space: nowrap （文本不會換行，文本會在在同一行上繼續，直到遇到標籤爲止。）
瀏覽器默認的是，若是一個單詞很長，致使一行中剩餘的空間已經放不下時，則瀏覽器會把這個單詞挪到下一行去如下二者的共同點是都能把長單詞強行斷句
word-break: break-all; (不會把單詞放在一個新行裏，當這一行放不下的時候直接強制斷句) word-wrap: break-word;（首先就會起一個新行來放置長單詞，新的行仍是放不下這個單詞則會對長單詞進行強制斷句）

:before :after

對於僞元素 :before 和 :after 而言，屬性 content 爲必選項
css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句話中的第一個字母，或者是列表中的第一個元素.

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。好比說，當用戶懸停在指定的元素時，咱們能夠經過:hover來描述這個元素的狀態。雖然它和普通的css類類似，能夠爲已有的元素添加樣式，可是它只有處於dom樹沒法描述的狀態下才能爲元素添加樣式，因此將其稱爲僞類。
僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。好比說，咱們能夠經過:before來在一個元素前增長一些文本，併爲這些文本添加樣式。雖然用戶能夠看到這些文本，可是這些文本實際上不在文檔樹中。

僞類的操做對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素。所以，僞類與僞元素的區別在於：有沒有建立一個文檔樹以外的元素。

CSS3規範中的要求使用雙冒號(::)表示僞元素，以此來區分僞元素和僞類，好比::before和::after等僞元素使用雙冒號(::)，:hover和:active等僞類使用單冒號(:)。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支持僞元素的雙冒號(::)表示方法。

tabindex

don't want to set the order but just make your element focusable use tabindex="0" on all such elements
if you don't want it to be focused then use tabindex="-1」
positive num: sets the order of "focusable" elements and it makes elements "focusable'