层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

选择器

选择器用来指定网页上我们想要样式化的 HTML 元素。

通配符： * { }

标签、类和 ID 选择器：h1{ },  .class-name{ } ,  #id { }，

属性选择器：button[disable] { }  , a[href="https://roadup.cc"] { }

伪类与伪元素: a:hover { }， p::first-line{ }

子代选择器：div > p { }

后代选择器：div p {}

相邻兄弟选择器：h1 + p { }

通用兄弟选择器：h1 ～ p { }

值和单位

css 中的值有 4 中

• integer：整数，如 14。

• number：表示一个小数，可能带有小数点也可能没有。

• dimension：带有附加单位的数字，如 45deg, 5s, 10px 等。

• percentage：百分数， 如 50%。

长度单位

单位

名称

换算

绝对长度单位

cm

厘米

1cm = 96px / 2.54

mm

毫米

1mm = 1cm / 10 

Q

四分之一毫米

1Q = 1mm / 4

in

英寸

1in = 2.54cm = 96px

pc

十二点

1pc = 12pt

pt

点

1pt = 1in / 72

px

像素

1px = 1in / 96

相对长度单位

em

在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于其自身的字体大小。

ex

字符 “x” 的高度

ch

数字 “0” 的高度

rem

根元素的字体大小

lh

元素的 line-height

vw

视窗宽度的 1%

vh

视窗高度的 1%

vmin

min(vh, vw)

vmax

max(vh, vw)

百分比在许多情况下和长度的处理方法是一样的，不同的是百分比总是相对于其他值设置的。不同的属性计算时的基准值也是不一样的。当百分比值用于可继承属性时，继承的是计算后得倒的绝对值，而不是百分比本身。

常见的可以设置百分比的属性及其基准值

• font-size： 基准值是父元素的 font-size。

• line-height: 基准值是自身的 font-size。

• vertical-align: 基准值是自身的 line-height（没想到吧🤪）。

• width & height: 基准值是其父元素的宽或者高，当高度使用百分比值的时候，如果其包含块没有设置明确的高度，且这个元素不是绝对定位，则其百分比值相当于 auto（默认值）。

• margin & padding: 这两个属性设置百分比值，其基准值都是其包含块的宽度，可以利用此特性实现图片的等比缩放（低版本浏览器中）。

• bottom，top, left, right:  基准值是自身相同方向上的尺寸。

• translate：基准值是相同方向上的边界框的尺寸，Z 轴方向上不能使用百分比。

• border-radius: 给圆角设置百分比值是其基准是是元素自身的尺寸，也就是对应轴方向上的 border 的长度，你可能好奇这里的带有 “/” 的语法， 主要是为了区分两个半轴， 因为元素的四个角是可以分别定义的 / 前是横轴，/ 后是纵轴。

• background-position：其基准值是放置背景图区域的尺寸减去背景图自身的尺寸。

颜色值

• 十六进制 RGB 值：通过 红绿蓝通道来设置颜色 #02798b, #02798b10。

• RGB 和 RGBA：通过 红绿蓝通道来设置颜色和 16 进制的 rgb 一样 rgb(2,121,139) , rgba(2, 121, 139, 0.5)

• HSL 和 HSLA: 通过色相 饱和度 亮度来设置颜色 hsl(188, 97%, 28%), hsla(188, 97%, 28%, 0.5)

颜色的透明度只影响颜色本身，而 opacity 属性会影响元素内的所有内容， 包括文本，子元素等。

媒体查询 [MDN]

css 的媒体查询提供了查询浏览器环境的方法， 仅当环境与你指定的规则相匹配时，所设置的样式才会被应用。它是响应式设计的关键部分，允许你按照不同的视口尺寸创建不一样的布局，也可以为触摸屏和非触摸屏设置不同样式， 还可以按屏幕的方向来决定显示样式。

层叠与继承

优先级：浏览器根据优先级来决定当多条规则由不同选择器对应相同元素的时候需要使用哪条规则。越是具体的选择器所申明的规则优先级越高。

优先级由四部分组成：

千位：内联样式

百位：ID 选择器

十位：类选择器，属性选择器，伪类选择器

个位：元素选择器，伪元素选择器

!important 可以覆盖上述优先级的计算。强烈建议除了非常情况不要使用它。

层叠（cascade）：当两条同级别的规则应用到统一元素时，写在后面的规则优先级更高。

继承：部分设置在父元素上的规则（如： font-size, color, font-family）可以被子元素继承。有些是不鞥继承的（如： width）

盒模型

盒模型是使用 css 实现准确布局、处理元素排版的关键概念。

css 的盒子包含 4 个部分

• content box: 这个区域用来显示内容，可以通过 width 和 height 来定义。

• padding box: 这个区域是指包围在内容区外部的空白，可以通过 padding 来设置

• border box：这部分视为盒子的边界， 通过 border 来设置

• margin box: 这是盒子外的边距，是盒子与其他元素之间的空白区。 通过 margin 来设置。

image.png

标准盒模型中的 width 和 height 设置的 content box 的尺寸。

但这个盒模型不符合人类认知，因此 css 还有一个替代（IE）盒模型， 它的 width 和 height 设置的是 content box + padding box + border box 的尺寸，可以使用 box-sizing： border-box;

外边距折叠，如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，并取他们中的最大值。

块级盒子（block）：如 h1, div , 等

• 盒子会在内联的方向上扩展并占据父容器在该方向的所有可用空间，在绝大多数情况下意味着盒子和父容器一样宽。

• 每个盒子都会换行

• 可以使用 width 和 height 定义尺寸

• 内边距、外编剧和边框会将其它元素从当前盒子周围挤开。

内联盒子（inline）：如 span, em，a 等

• 盒子不会换行

• 不能如用 width 和 height 定义尺寸

• 垂直方向的内外边距和边框会被应用但不会把其他处于 inline 状态的盒子挤开

• 水平方向上的内外边距和边框会被应用也会把其他处于 inline 状态的盒子挤开

可以通过 display 属性设置盒子的类型。

display 还有一个特殊的值，inline-block 它介于内联和块之间的一个状态

• 可以设置 width 和 height

• padding margin 和 border 会推开其他元素

• 不会换行

内部和外部显示类型：

css 盒子都有一个外部显示类型，来决定盒子是块级还是内联。

同样盒子还有一个内部显示类型，用来决定盒子内部的显示类型，它决定盒子内的元素是如何布局的。默认情况下按照 正常文档流 布局， 如 flex,  grid, inline-flex 。

排版与布局

css 页面布局技术允许我们获取页面中的元素，并控制他们的相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

控制页面布局主要通过设定 display 属性的值。它允许我们更改默认的显示方式。

正常流布局：是指指不对页面进行布局控制时，浏览器的默认布局方式

弹性布局：被设计用来创建横向或者纵向的一维页面布局。当我们把 display： flex；添加到一个元素时，它的直接子元素就会变成 flex-item，会按照弹性布局来定位和显示。我们可以统一一组 flex-*的属性来精细地控制弹性布局的方式， 如：布局方向，对其方式等。也可以通过在 flex-item 上设置相关的属性来控制元素在布局中占用宽高的方式，允许他们通过伸缩来适应剩余空间。

网格布局：网格布局像是二维版的弹性布局，他会同时在行和列两个唯独是那个排列元素。可以通过 display：grid; 来开启网格布局。可以通过 grid-template-rows 和 grid-template-columns 来定义行列轨道。在网格布局中你可以显示的指定元素摆放的顺序，而不是依赖浏览器的排列。grid-column 和 grid-row 用来指定一个元素摆放的起止位置。

image.png

浮动布局：浮动布局最初用来实现图片文字的环绕排列效果。把一个元素浮动起来， 会改变该元素本身和在正常流中跟随它的其他元素的行为。这一元素会浮动到左侧或者右侧， 并从正常布局流中移除，这时候它周围的内容就环绕在它周围形成环绕效果。当我们不再需要这种环绕效果时，我们可能需要清除浮动。

image.png

定位布局：定位能够让我们把一个元素从它原本的布局方式中所在的位置一道另一个位置。通过设置 position 属性，我们可以控制元素的定位方式

• 静态定位（static），是元素的默认定位方式，就是按照文档流的位置定位

• 相对定位（relative），允许我们相对于文档流中的位置移动它， 包括将两个元素叠放在一起。

• 绝对定位（absolute），将元素从正常文档流中移除，然后根据设定的参照元素（最近的被定位祖先元素）来设置位置。

• 固定定位（fixed），与绝对定位相似，但它以浏览器的视口为参照物。固定定位的元素不会随着页面滚动。

• 粘性定位（sticky），一种新的定位方式，当它出现在显示区内时，和静态定位一致， 当它将要被滚动到我们给他设定的相对于容器的位置时，它和固定定位一样（但参照元素和绝对定位一样）。

表格布局：在浏览器还不支持基本的 css 之前，通常使用表格来完成页面的布局， 通过表格的行和列来完成元素位置的控制。已经不推荐使用了。

多列布局：多列布局为在网页中实现像报纸那样的排列方式提供可能。可以通过 column-count 来告诉浏览器把一个容器分割成多少列。也可以使用 column-width 来告诉浏览器以至少某个宽度来尽可能多的填充容器。

image.png

瀑布流布局：

响应式布局： 响应式布局不是指特定的某种布局方式，而是综合了上述布局方式、媒体查询、响应式设计、灵活网格、响应式排版等技术 使得页面能够适应不同的浏览区环境。[MDN]

装饰

装饰是指在完成布局的基础上对元素的样式进行美化处理的过程，包括背景，边框，阴影，文本样式等。

背景样式：可以对元素设置背景色（渐变色，线性渐变，环形渐变），背景图，可以控制背景图的摆放、大小、位置， 也可以设置多个背景。可以控制背景随页面滚动。

边框：可以给边框设置圆角，边线样式（花纹），颜色，可以单独控指每一条边，每一个角。

阴影：可以设置元素阴影的便宜，虚化，颜色等。

文本：可以设置文本的字体（字体族）、颜色、字号、字重、字样、转换、装饰（下划线，删除线，上划线等）。

可以给文本单独添加阴影。可以设定文班的对齐方式、行高，字母或单词的间距。还有一些不太常用的，如：处理溢出内容（text-overflow），定义控制单词的内部换行（word-break），处理元素内部的空白和换行（white-space），定义文本方向（direction），开启连字符（hyphens），定义行内文本方向（text-direction），书写方向或后继文本流方向（writing-mode）等。[MDN]

滤镜：可以给元素应用滤镜来显示一些特殊的效果， 通常用于调整图片，背景和边框的渲染。

css 中内置的滤镜由一下几种

• blur(): 给图像应用高斯模糊

• brightness(): 提高/减弱图片的亮度

• constrast(): 调整图片的对比度

• drop-shadow(): 给图片设置一个阴影效果，接受和 box-shadow 相似的参数（除了 inset），对于带有透明区域的图像滤镜的阴影将会透穿透明区域， 滤镜可以使用硬件加速来提高性能。

• grayscale(): 将图片转换为灰度图像。

• hue-rotate(): 反转图片的色相。

• invert(): 反转图像

• opactiy(): 给图像添加透明度，和 opacity 属性相似，但滤镜可以通过硬件加速。

• saturate(): 转换图像的饱和度。

• sepia(): 将图像转为深褐色， 有种发黄变旧的感觉。

滤镜可以同时应用多个，还可以使用一个 svg 格式的文件路径来使用 svg 中的 filter 的滤镜效果。

网络安全字体：并不是所有的字体都会安装在用户的电脑上，只有某几个字体通常可以应用到所有系统，这些字体可以毫无顾忌的使用，这些字体称为安全字体。

通常如下字体被称为安全字体：Arial (sans-serif， 一般用 Helvetica 代替) , Courier New(monospace) , Georgia(serif) , Times New Roman (serif), Trebuchet MS(sans-serif), Verdana(sans-serif);  Trebuchet MS 在移动设备上并不广泛使用。

css 定义了 5 个常用的字体名称，serif（有衬线字体）, sans-serif（无衬线字体）, monospace（等宽字体） , cursive（手写体） 和 fantasy（装饰体）, 这些是一类字体统称，具体应用时和浏览器的环境有关， 一般作为字体栈的最后几项。

线性变换和动画

css 允许对元素进行旋转、缩放、斜切或平移以实现对元素的线性变形处理。这是通过修改 css 的视觉化模型的空间坐标来实现的。它仅影响元素的形状，不影响元素的布局。

转换函数：

• rotate, rotateX, rotateY, rotateZ: 对元素进行旋转。

• scale, scaleX, scaleY, scaleZ: 对元素进行缩放。

• skew, skewX, skewY, skewZ: 对元素斜切。

• translate, translateX, translateY, translateZ: 对元素平移。

• matrix, matrix3d: 上面几种都是这个函数的语法糖， 这个函数用来对一个元素施展一个矩阵变换。

可以对同一个元素施加多个变换，但施加的顺序会影响最终的效果，变换函数按从左到右的顺序相乘，这意味复合变换按从右到左的顺序被应用。所有的变换都是可动画的，因此可以用于 css 动画。

线性变换背后的原理

css 实现动画效果有两种方式，过渡动画和关键帧动画。

可动画属性

过渡动画：

通过设置 transition 属性来配置过渡动画，它描述了一个或多个可动画的 css 属性，动画时长，运动函数和延迟时间。当所配置的属性发生变化时，会以设定的过渡函数渐变到目标状态，而不是突变。

过渡动画主要用于元素属性状态的转化，状态转换是有明确的初始转态和目标状态， 因此它不能用于设置循环动画， 也不能用于新插入的元素（会被直接设置为目标状态， 如果需要可以先以初始状态插入，然后少量延时之后再修改为目标状态）。

可以通过 cubic-bezier 函数来定义更多样化的运动函数， 预览。

image.png

可以同时配置多个动画属性，或者使用关键字 all 设置所有的可动画属性，也可以为每个属性单独配置动画时长函数等。

通过 transition 设置动画通常比 JavaScript 来计算位置状态要更快，因为 transition 的状态计算是在线程中，不会收到 JS 引擎其他任务的干扰，可以更平滑的实现过渡效果， 因此在实际开发过程中更推荐使用。

我们可以在 JavaScript 中设置相应的过渡监听器来捕获动画的各个阶段。

关键帧动画

关键帧动画是 css 中很强大的工具，可以制作非常绚丽的动画效果。

animations 属性用来指定一组或多组动画，和过渡动画的类似，不过可以设置动画的播放次数（或这设置为无限循环动画），可以自定义动画的关键帧序列，也可以配置动画的方向（如：正序，倒序， 往返等），我们还可以控制动画的暂停和恢复。

我们使用 @keyframes 来定义动画序列， 它使用百分比来设置动画发生的时间点，0%表示动画发生的第一时刻，100%表示动画发生的最终时刻， 由于这两个时间比较特殊，因此可以直接使用别名 from 和 to， 不过这两个都是可选的，如果为指定， 则浏览器使用计算值作为他们的状态。

和过渡动画一样，我们也可以设置相应的动画监听器来捕获动画的各种状态。

https://www.yuque.com/roadup/frontend/css