CSS 基础

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）

一个单独的规则。如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

人类可读的标识符，指示您想要更改的样式特征(例如font-size, width, background-color) 。

属性的值（Property value）

每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性（例如，要将字体、宽度或背景色）。

大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。如calc()、rotate()函数等。

有些属性可以接受1~4个可选参数，每个参数取值如下：
如margin div { width:50%; margin:0 auto; } 会把这个div容器水平居中。
• 只有一个值时，这个值会被指定给全部的四个边.
• 两个值时，第一个值被匹配给上和下, 第二个值被匹配给左和右.
• 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右, 第三个值被匹配给下.
• 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序).

@规则

这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。例如，要将额外的样式表导入主CSS样式表，可以使用@import如 @import 'styles2.css'; 最常见的 @rules 之一是 @media

选择器

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors

类型、类和ID选择器

这个选择器组包含的选择器，指向了例如一个<h1>的HTML元素

1
2
3

h1 { }
.box { }
#unique { }

标签属性选择器

这组选择器给了你根据一个元素上的某个标签属性的存否以选择元素的不同方式：

1 2	a[title] { } a[href="https://example.com"] { }

伪类与伪元素

1 2	a:hover { } p::first-line { }

运算符

最后一组选择器将其他选择器组合起来，以图指向我们的文档里的选择器。下面的示例用子元素运算符（>）

1 2	// 选择了`<article>`元素的初代子元素。 article > p { }

层叠和继承

cascade 层叠

当两条同级别的规则应用到一个元素的时候，写在后面的会覆盖之前的规则。

优先级

优先级决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。

一个选择器的优先级是由四个部分相加 (分量)，可以认为是四位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

!important。用于修改特定属性的值，能够覆盖普通规则的层叠。

继承

一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。 color 和 font-family 可以被继承，width 不会继承。

控制继承

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

inherit “开启继承”。设置该属性会使子元素属性和父元素相同。
initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。

重设所有属性值

属性 all 设置为(inherit, initial, unset, or revert)。

盒模型

页面里大部分 HTML 元素都可以被看作若干层叠的盒子。CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

我们有两个段落。顶部段落的页 margin-bottom为50px。第二段的margin-top 为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。

内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。

block

一个被定义成块级的（block）盒子会表现出以下行为:

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

inline

如果一个盒子对外显示为 inline，那么他的行为如下:

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

内部和外部显示类型

如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样(如上所述).

但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为flex元素，会根据弹性盒子（Flexbox ）规则进行布局。

display: inline-block

display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。

溢出

CSS中万物皆盒，我们通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。在盒子无法容纳下太多内容的时候就发生了溢出。

属性是控制一个元素溢出的方式，它告诉浏览器怎样处理溢出。

overflow的默认值为visible

overflow: scroll，浏览器总会显示滚动条，即使没有足够多引起溢出的内容。

overflow-y: scroll来仅在y轴方向滚动。

overflow-x，以在x轴方向上滚动

overflow: auto。此时由浏览器决定是否显示滚动条。

CSS值

数值类型	描述
`<integer>`	`<integer>`是一个整数，比如1024或-55。
`<number>`	`<number>`表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。
`<dimension>`	`<dimension>`是一个`<number>`，它有一个附加的单位，例如45deg、5s或10px。`<dimension>`是一个伞形类别，包括`<length>`、`<angle>`、`<time>`和`<resolution>`类型。
`<percentage>`	`<percentage>`表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。

长度

绝对长度

单位	名称	等价换算
`cm`	厘米	1cm = 96px/2.54
`mm`	毫米	1mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	十二点活字	1pc = 1/16th of 1in
`pt`	点	1pt = 1/72th of 1in
`px`	像素	1px = 1/96th of 1in
`fr`	`grid`布局中相对单位
`vw`	视口宽度	`1vw`等同于视口宽度的百分之一