CSS总结

Posted 2020-12-08 jlfw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS总结相关的知识，希望对你有一定的参考价值。

display

inline/inline-block/block -->> 牛奶/果冻/坚果
- 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的。

最适用场景

列表个数不固定，但是无论列表几个，都平分容器空间

父级设置display:table，同时宽度为容器宽度，或是直接width:100%, 此时display:table-cell子元素就会自动等分。

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与边框的间隔大一倍); }

align-items定义了item在交叉轴（侧轴）上的对齐方式

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

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-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. 剩余空间＝父容器空间－(子容器1.flex-basis/width) - (子容器2.flex-basis/width) - …
2. 如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；
3. 如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；
4. 如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。
5. 如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
6. 如果父级的空间足够：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
1. 普通元素的百分比margin都是相对于父级容器的宽度来计算的
2. 绝对定位圆度的百分比margin是相对于第一个定位祖先元素（relative|absolute|fixed）的宽度计算的
margin重叠计算规则：
- 正正取大值
- 正负值相加
- 负负最负值
margin无效的情况：
1. inline水平元素(非替换元素，button标签；正常书写)垂直margin无效
2. margin重叠了
3. display:table-cell/table-row等声明的margin无效，但是替换元素们例外（firefox: table-cell类型是inline-block渲染；IE：table-call类型是table-cell渲染）
4. 绝对定位的margin值其实是一直有效的，只是不像普通元素那样，能让兄弟元素移动（因为绝对元素是脱离文档流的）
5. 相对float元素设置margin，它不是相对于该浮动元素，而是外部容器
6. 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)水平的元素起作用
1. vertical-align: -2px 元素相对于baseline向下偏移2像素
2. vertical-align: -10% 这里的百分比是相对于该元素继承的行高来计算的
3. bottom/text-bottm : 与line box底端对齐/与父元素内容区域的底端对齐
4. -> vertical-align: super 提高盒子的基线到父级合适的上标基线
5. -> 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：
1. 层叠上下文即指z轴上下文，页面根元素天生具有层叠上下文，称为“根层叠上下文”，z-index: 的定位元素也具有层叠上下文。
2. 层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中的元素在z舟上的显示顺序。
3. 层叠水平并不是z-index, 普通元素就有层叠水平，但是只有定位元素才有z-index。
4. 层叠顺序：
- 层叠上下文background/border
- 负z-index
- block块状水平盒子
- float浮动盒子
- inline/inline-block水平盒子
- z-index:auto,定位元素的默认值，从层叠顺序上来讲，等价于z-index: 0
- 正z-index
1. z-index嵌套并且z-index都为Number时，遵循祖先优先原则，但是对于z-index: auto，祖先遵循原则不work，原因是（z-index: auto）当前层叠上下文的生成盒子层叠水平是0，盒子（除非是根元素）不会创建一个新的层叠上下文。
2. z-index不为auto的定位元素会创建层叠上下文，z-index: auto是不会创建层叠上下文的
3. z-index层叠顺序的比较止步于父级层叠上下文
其他参与层叠上下文的属性
1. z-index不为auto的flex项（父元素为display: flex/inline-flex, 子元素要设置z-index, 不让其为默认值auto）
2. opacity !=1 的元素参与层叠上下文
3. transform !=none 的元素参与层叠上下文
4. position: fixed 的元素参与层叠上下文
必须依赖z-inddex值来创建层叠上下文的情况
1. position: relative/absolute/fixed
2. display: flex/inline-flex容器的子flex项
实践
1. 对于非浮层元素（弹框类的），避免设置z-index
2. z-index无需超过2
3. 负z-index与可访问性隐藏（人肉眼不可见，但辅助设备可见）
relative
- 相对自身定位（absolute则是去找外面的限制容器）
- 无侵入，不影响他人
- top/left VS bottom/right对立时, relative是斗争，top>bottom, left>right（absolute则是拉伸）
限制
1. top/left/right/bottom限制
2. 限制层级z-index
3. 限制超越overflow(absolute能够越出overflow限制)
tips:
1. relative层级很高，可覆盖后面的dom
2. 尽量减少使用relative, 去施加黑魔法
absolute
1. 独立的absolute会摆脱overflow的限制，不会受滚动的影响
2. 脱离文档流
3. 无依赖的absolute会更强大，一些小的icon就可只用absolute来实现，用margin来微调
4. 动画尽量作用在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
1. normal: 跟着用户的浏览器走，且与元素字体关联
2. : number * (font-size)，所有可继承元素根据font-size重计算各自的line-height
3. : (1.5em | 1.5rem | 20px | 20pt)
4. : (150%)相对于设置了该line-height属性的元素的font-size.即150% * (font-size)
5. inherit: input框等元素默认行高是normal，使用inherit可以让input框可控性更强
overflow

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

overflow-x | overflow-y
1. overflow-x、overflow-y相同时，就等价于overflow
2. 两者不同时，若有一个设置为hidden, 则另外一个为auto,而不是visible
overflow起作用的前提
1. 非display: inline水平
2. 尺寸限制。width/height/max-width/max-height/absolute拉伸
3. 对于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;的区别

联系：它们都能让元素不可见
区别：
1. display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
4. 读屏器不会读取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引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素.
1. 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
2. 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

tabindex
1. don‘t want to set the order but just make your element focusable use tabindex="0" on all such elements
2. if you don‘t want it to be focused then use tabindex="-1”
3. positive num: sets the order of "focusable" elements and it makes elements "focusable‘
<img alt=“” title=“" />
- alt属性是当图片加载不出来时，显示的文字
- title属性是用来显示图片的文字内容的
- src属性是content: url(“")
list-style（设置ul li样式）
- list-style-type
- list-style-position
- list-style/image
position

好文：https://css-tricks.com/almana...

Static（default）

该元素固定于该文档六中. 设置left/right/top/bottom/z-index 对该元素不生效

relative

该元素存在于文档流中, 就像static.
left/right/top/bottom/z-index会生效的. 设置这些属性将会移动该元素的位置

absolute

该元素脱离文档流，相当于不存在
设置top/left/right/bottom默认是相对于document的，但是如果该元素的父元素是relative，就是相对于该父元素

fixed

该元素脱离文档流，相当于不存在
fixed元素总是相对于document的，并不是特定的父元素，不被scrolling影响

sticky (experimental)

就像relative，直到达到视口的特定阈值，就像fixed了

inherit

并不cascade, 继承父元素的position属性
以上是关于CSS总结的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

Emmet语法总结

CSS总结

display

table

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

最适用场景

flex

flex-direciton | flex-wrap (flex container)

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

justify-content定义了item在主轴上的对齐方式

align-items定义了item在交叉轴（侧轴）上的对齐方式

align-content定义了多根轴线的对齐方式。如果item只有一根轴线(当只有一行，无换行时)，该属性不起作用

order定义了item的排列顺序，数值越小，数列越靠前，default: 0 (flex items)

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

flex(default: 0 1 auto)

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

flex-shrink(default: 1)定义一个子容器的压缩比例。

align-self允许单个item有与其他item不一样的对齐方式，可覆盖align-items属性 (flex-items)

css units

padding

background-clip

margin

margin重叠计算规则：

margin无效的情况：

margin-start | margin-collapse

vertical-align

z-index

tips：

其他参与层叠上下文的属性

必须依赖z-inddex值来创建层叠上下文的情况

实践

relative

限制

tips:

absolute

line-height

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

overflow

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

overflow-x | overflow-y

overflow起作用的前提

box-sizing: border-box

行内元素padding margin

display: none;与visibility: hidden;的区别

word-break | word-wrap | white-space

:before :after

tabindex

<img alt=“” title=“" />

list-style（设置ul li样式）

position

Static（default）

relative

absolute

fixed

sticky (experimental)

inherit