css复习

1.css语法

• 1.1声明

color: red;

• 1.2声明块

用 {} 包裹起来后，那就组成了一个声明块

{
color：red
}

2.规则

声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集，常简称为 CSS 规则。

@namespace 告诉 CSS 引擎必须考虑XML命名空间。

@media, 如果满足媒体查询的条件则条件规则组里的规则生效。

@page 描述打印文档时布局的变化.

@font-face, 描述将下载的外部的字体。

@keyframes, 描述 CSS 动画的关键帧。

@document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)

@charset用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的 `` 元素内使用， 值必须是双引号包裹, CSS 文件头里定义的 @charset 规则里指定的字符编码

@charset "UTF-8";

@import 用于告诉 CSS 引擎引入一个外部样式表,定义动画。

@supports用于查询特定的 CSS 是否生效，可以结合 not、and 和 or 操作符进行后续的操作

@supports (--foo: green) {
    body {
        color: var(--varName);
    }
}

3.注释

/* 单行 */
   /* 
   多行
   .abb {
            height: 200px;
            width: 200px;
            background-color: #ccc;
            border: 1px solid green;
        }
        */

4.选择器

• 4.1基础选择器

标签选择器、类选择器、ID 选择器、通配选择器：*

• 4.2属性选择器

[attr]：指定属性的元素；

[attr=val]：属性等于指定值的元素；

[attr*=val]：属性包含指定值的元素；

[attr^=val] ：属性以指定值开头的元素；

[attr$=val]：属性以指定值结尾的元素；

[attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；

[attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；

使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。

li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。

li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

li[class] {
    font-size: 200%;
}

li[class="a"] {
    background-color: yellow;
}

li[class~="a"] {
    color: red;
}

<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>
    

• 4.3组合选择器

相邻兄弟选择器：A + B

普通兄弟选择器：A ~ B

子选择器：A > B

后代选择器：A B

5.伪类

• 5.1条件伪类

:lang()：基于元素语言来匹配页面元素；

:dir()：匹配特定文字书写方向的元素；

:has()：匹配包含指定元素的元素；

:is()：匹配指定选择器列表里的元素；

:not()：用来匹配不符合一组选择器的元素；

• 5.2行为伪类

:active：鼠标激活的元素；

:hover： 鼠标悬浮的元素；

::selection：鼠标选中的元素；

• 5.3状态伪类

:target：当前锚点的元素；

:link：未访问的链接元素；

:visited：已访问的链接元素；

:focus：输入聚焦的表单元素；

:required：输入必填的表单元素；

:valid：输入合法的表单元素；

:invalid：输入非法的表单元素；

:in-range：输入范围以内的表单元素；

:out-of-range：输入范围以外的表单元素；

:checked：选项选中的表单元素；

:optional：选项可选的表单元素；

:enabled：事件启用的表单元素；

:disabled：事件禁用的表单元素；

:read-only：只读的表单元素；

:read-write：可读可写的表单元素；

:blank：输入为空的表单元素；

:current()：浏览中的元素；

:past()：已浏览的元素；

:future()：未浏览的元素；

• 5.5结构为类

:root：文档的根元素；

:empty：无子元素的元素；

:first-letter：元素的首字母；

:first-line：元素的首行；

:nth-child(n)：元素中指定顺序索引的元素；

:nth-last-child(n)：元素中指定逆序索引的元素；；

:first-child：元素中为首的元素；

:last-child ：元素中为尾的元素；

:only-child：父元素仅有该元素的元素；

:nth-of-type(n)：标签中指定顺序索引的标签；

:nth-last-of-type(n)：标签中指定逆序索引的标签；

:first-of-type ：标签中为首的标签；

:last-of-type：标签中为尾标签；

:only-of-type：父元素仅有该标签的标签；

• 5.6伪元素

::before：在元素前插入内容；

::after：在元素后插入内容；

6.优先级

10000：!important；

01000：内联样式；

00100：ID 选择器；

00010：类选择器、伪类选择器、属性选择器；

00001：元素选择器、伪元素选择器；

00000：通配选择器、后代选择器、兄弟选择器；

7.继承

在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。

默认继承的行为可以分为如下几类：

字体相关：font-family、font-style、font-size、font-weight 等；

文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；

列表相关：list-style、list-style-image、list-style-type、list-style-position 等；

其他属性：visibility、cursor 等；

对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：

inherit：继承父元素对应属性的计算值；

initial：应用该属性的默认值，比如 color 的默认值是 #000；

unset：如果属性是默认可以继承的，则取 inherit 的效果，否则同 initial；

revert：效果等同于 unset，兼容性差。

8.文档流

在 CSS 的世界中，会把内容按照从左到右、从上到下的顺序进行排列显示。正常情况下会把页面分割成一行一行的显示，而每行又可能由多列组成，所以从视觉上看起来就是从上到下从左到右，而这就是 CSS 中的流式布局，又叫文档流 。

特征：

​ 块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的；

​ 内联元素默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布；

脱离

脱流文档流指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。文档一旦脱流，计算其父节点高度时不会将其高度纳入，脱流节点不占据空间 。

方法：

​ 1.使用浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠；

​ 2.使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补。

9.盒模型

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

标准盒模型宽： width + padding-left + padding-right + border-left-width + border-right-width

ie盒模型宽： width - padding-left - padding-right - border-left-width - border-right-width

在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：

`content-box`：标准盒模型；
`border-box`：IE 盒模型

10.视觉格式化模型

视觉格式化模型（Visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。CSS 中一切皆盒子，而视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去，这个模型在计算的时候会依赖到很多的因素，比如：盒子尺寸、盒子类型、定位方案（是浮动还是定位）、兄弟元素或者子元素以及一些别的因素。

display决定盒子类型：

outer display type（对外显示）：决定了该元素本身是如何布局的，即参与何种格式化上下文；

inner display type（对内显示）：其实就相当于把该元素当成了容器，规定了其内部子元素是如何布局的，参与何种格式化上下文；

• 10.1 outer display type

对外显示方面，盒子类型可以分成 2 类：block-level box（块级盒子） 和 inline-level box（行内级盒子）。

所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列

• 10.2 block

占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列；

设置 width/height 将会生效；

设置 padding 和 margin 将会生效；

• 10.3 inline-block

是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素；

设置 width/height 将会生效；

设置 padding 和 margin 将会生效；

• 10.4 inner display type

container box 的类型依据 display 的值不同，分为 4 种：

block container：建立 BFC 或者 IFC；

flex container：建立 FFC；

grid container：建立 GFC;

ruby container：接触不多，不做介绍。

11.格式化上下文

4 类：

BFC (Block Formatting Context) 块级格式化上下文；

IFC (Inline Formatting Context) 行内格式化上下文；

FFC (Flex Formatting Context) 弹性格式化上下文；

GFC (Grid Formatting Context) 格栅格式化上下文

BFC 和 IFC 在 CSS 中扮演着非常重要的角色，因为它们直接影响了网页布局

• 11.1 BFC

块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

• 11.1.1 BFC规则

内部的盒子会在垂直方向，一个接一个地放置；

盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；

每个元素的 margin 的左边，与包含块 border 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此；

BFC 的区域不会与 float 盒子重叠；

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算 BFC 的高度时，浮动元素也参与计算。

• 11.1.2 创建

根元素：html

非溢出的可见元素：overflow 不为 visible

设置浮动：float 属性不为 none

设置定位：position 为 absolute 或 fixed

定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

• 11.1.3应用

1、 自适应两栏布局

应用原理：BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

2、清除内部浮动

浮动造成的问题就是父元素高度坍塌，所以清除浮动需要解决的问题就是让父元素的高度恢复正常。而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可。

3、 防止垂直 margin 合并

BFC 渲染原理之一：同一个 BFC 下的垂直 margin 会发生合并。所以如果让 2 个元素不在同一个 BFC 中即可阻止垂直 margin 合并。那如何让 2 个相邻的兄弟元素不在同一个 BFC 中呢？可以给其中一个元素外面包裹一层，然后触发其包裹层的 BFC，这样一来 2 个元素就不会在同一个 BFC 中了。

• 11.2 IFC

IFC 的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。

• 11.2.1 规则

子元素在水平方向上一个接一个排列，在垂直方向上将以容器顶部开始向下排列；

节点无法声明宽高，其中 margin 和 padding 在水平方向有效在垂直方向无效；

节点在垂直方向上以不同形式对齐；

能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的线盒（line box）。线盒的宽度是由包含块（containing box）和与其中的浮动来决定；

IFC 中的 line box 一般左右边贴紧其包含块，但 float 元素会优先排列。

IFC 中的 line box 高度由 line-height 计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同；

当内联级盒子的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定；

当一个内联盒子超过父元素的宽度时，它会被分割成多盒子，这些盒子分布在多个 line box 中。如果子元素未设置强制换行的情况下，inline box 将不可被分割，将会溢出父元素

• 11.2.2 应用

水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。

垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中

12.层叠上下文

z-index 能够在层叠上下文中对元素的堆叠顺序其作用是必须配合定位才可以；

除了 z-index 之外，一个元素在 Z 轴上的显示顺序还受层叠等级和层叠顺序影响；

符合以下任一条件的元素都会产生层叠上下文：

html 文档根元素

声明 position: absolute/relative 且 z-index 值不为 auto 的元素；

声明 position: fixed/sticky 的元素；

flex 容器的子元素，且 z-index 值不为 auto；

grid 容器的子元素，且 z-index 值不为 auto；

opacity 属性值小于 1 的元素；

mix-blend-mode 属性值不为 normal 的元素；

以下任意属性值不为 none 的元素：

transform

filter

perspective

clip-path

mask / mask-image / mask-border

isolation 属性值为 isolate 的元素；

-webkit-overflow-scrolling 属性值为 touch 的元素；

will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素；

contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

• 12.1等级

层叠等级指节点在三维空间 Z 轴上的上下顺序。它分两种情况：

在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在 Z 轴上的上下顺序；

在其他普通元素中，它描述定义的是这些普通元素在 Z 轴上的上下顺序；

• 12.2顺序

以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）：

层叠上下文的 border 和 background

z-index < 0 的子节点

标准流内块级非定位的子节点

浮动非定位的子节点

标准流内行内非定位的子节点

z-index: auto/0 的子节点

z-index > 0的子节点

• 12.3等级比较

在同一个层叠上下文中，比较两个元素就是按照上图的介绍的层叠顺序进行比较。

如果不在同一个层叠上下文中的时候，那就需要比较两个元素分别所处的层叠上下文的等级。

如果两个元素都在同一个层叠上下文，且层叠顺序相同，则在 HTML 中定义越后面的层叠等级越高。

13.值单位

数值：长度值 ，用于指定例如元素 width、border-width、font-size 等属性的值；

百分比：可以用于指定尺寸或长度，例如取决于父容器的 width、height 或默认的 font-size；

颜色：用于指定 background-color、color 等；

坐标位置：以屏幕的左上角为坐标原点定位元素的位置，比如常见的 background-position、top、right、bottom 和 left 等属性；

函数：用于指定资源路径或背景图片的渐变，比如 url()、linear-gradient()

长度： px、em、rem、vw/vh

• 13.1px

而 px 表示的是 CSS 中的像素，在 CSS 中它是绝对的长度单位，也是最基础的单位，其他长度单位会自动被浏览器换算成 px。但是对于设备而言，它其实又是相对的长度单位，比如宽高都为 2px，在正常的屏幕下，其实就是 4 个像素点，而在设备像素比(devicePixelRatio) 为 2 的 Retina 屏幕下，它就有 16 个像素点。所以屏幕尺寸一致的情况下，屏幕分辨率越高，显示效果就越细腻。

• 13.1.1设备像素（Device pixels）

设备屏幕的物理像素，表示的是屏幕的横纵有多少像素点；和屏幕分辨率是差不多的意思。

• 13.1.2设备像素比（DPR

设备像素比表示 1 个 CSS 像素等于几个物理像素。

计算公式：DPR = 物理像素数 / 逻辑像素数；

在浏览器中可以通过 window.devicePixelRatio 来获取当前屏幕的 DPR。

• 13.1.3像素密度（DPI/PPI）

像素密度也叫显示密度或者屏幕密度，缩写为 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。从技术角度说，PPI 只存在于计算机显示领域，而 DPI 只出现于打印或印刷领域。

计算公式：像素密度 = 屏幕对角线的像素尺寸 / 物理尺寸

比如，对于分辨率为 750 * 1334 的 iPhone 6 来说，它的像素密度为：

Math.sqrt(750 * 750 + 1334 * 1334) / 4.7 = 326ppi
复制代码

• 13.1.4设备独立像素（DIP）

DIP 是特别针对 Android设备而衍生出来的，原因是安卓屏幕的尺寸繁多，因此为了显示能尽量和设备无关，而提出的这个概念。它是基于屏幕密度而计算的，认为当屏幕密度是 160 的时候，px = DIP。

计算公式：dip = px * 160 / dpi

• 13.2em

em 是 CSS 中的相对长度单位中的一个。是相对的，它有 2 层意思：

在 font-size 中使用是相对于父元素的 font-size 大小，比如父元素 font-size: 16px，当给子元素指定 font-size: 2em 的时候，经过计算后它的字体大小会是 32px；

在其他属性中使用是相对于自身的字体大小，如 width/height/padding/margin 等；

• 13.3rem

rem(root em) 和 em 一样，也是一个相对长度单位，不过 rem 相对的是 HTML 的根元素 html。

rem 由于是基于 html 的 font-size 来计算，所以通常用于自适应网站或者 H5 中。

• 13.4 vw/vh

vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位：

1vw = 视口宽度均分成 100 份中 1 份的长度；

1vh = 视口高度均分成 100 份中 1 份的长度；

相对视口的单位，除了 vw/vh 外，还有 vmin 和 vmax：

vmin：取 vw 和 vh 中值较小的；

vmax：取 vw 和 vh 中值较大的；

14.颜色体系

• 14.1颜色关键字

颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，比如 white（白），黑（black）等；

可接受的关键字列表在CSS的演变过程中发生了改变：

CSS 标准 1 只接受 16 个基本颜色，称为 VGA 颜色，因为它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors （视频图形阵列色彩）。

CSS 标准 2 增加了 orange 关键字。

从一开始，浏览器接受其它的颜色，由于一些早期浏览器是 X11 应用程序，这些颜色大多数是 X11 命名的颜色列表，虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准；CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩展的颜色关键字， X11 颜色或 SVG 颜色 。

CSS 颜色标准 4 添加可 rebeccapurple 关键字来纪念 web 先锋 Eric Meyer

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WalvIIt-1616378299408)(C:\Users\Dell\Desktop\面试\css\图片\颜色.png)]

• 14.2transparent 关键字

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有 alpha 通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。

14.颜色体系

• 14.1颜色关键字

颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，比如 white（白），黑（black）等；

可接受的关键字列表在CSS的演变过程中发生了改变：

CSS 标准 1 只接受 16 个基本颜色，称为 VGA 颜色，因为它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors （视频图形阵列色彩）。

CSS 标准 2 增加了 orange 关键字。

从一开始，浏览器接受其它的颜色，由于一些早期浏览器是 X11 应用程序，这些颜色大多数是 X11 命名的颜色列表，虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准；CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩展的颜色关键字， X11 颜色或 SVG 颜色 。

CSS 颜色标准 4 添加可 rebeccapurple 关键字来纪念 web 先锋 Eric Meyer

• 14.2transparent 关键字

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有 alpha 通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。