CSS

!\[\](/skins/bj2008/images/fire.gif) \[CSS\](https://www.cnblogs.com/apeishuai/articles/18732027 "发布于 2025-02-24 09:12")

\## 引用

\## 规则集

!\[\](https://img2024.cnblogs.com/blog/3531360/202502/3531360-20250223130333113-889704398.png)

\## 选择器

|                    |                  |                                 |                  |

| ------------------ | ---------------- | ------------------------------- | ---------------- |

| h1{}               | 类型选择器       |                                 |                  |

| .box{}             | 类选择器         |                                 |                  |

| #unique{} id选择器 |                  |                                 |                  |

|                    |                  | div\\\[lang\\|="zh"\\\]              |                  |

|                    |                  | :hover                          | 悬停             |

|                    | 伪元素           | p::first-line                   |                  |

|                    | 后代             | " "空格                         |                  |

\## 布局

\### 盒模型

CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的部分行为；width和height是内容盒子。

为了增加复杂性，有一种标准盒模型和一种替代盒模型。默认情况下，浏览器使用标准盒模型。

\#### block

盒子会产生换行。

width 和 height 属性可以发挥作用。

内边距、外边距和边框会将其他元素从当前盒子周围“推开”。

如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。

某些 HTML 元素，如 &lt;h1&gt; 和 &lt;p&gt;，默认使用 block 作为外部显示类型。

\#### inline

盒子不会产生换行。

width 和 height 属性将不起作用。

垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

某些 HTML 元素，如 &lt;a&gt;、 &lt;span&gt;、 &lt;em&gt; 以及 &lt;strong&gt;，默认使用 inline 作为外部显示类型。

默认情况下，在没有任何其他指令的情况下，方框内的元素也会以标准流的方式布局，并表现为区块或行内盒子。

\#### inline-block

display: inline-block 是 display 的一个特殊值，它提供了介于 inline 和 block 之间的中间位置。如果不希望项目换行，但又希望它使用 width 和 height 值并避免出现上述重叠现象，请使用它。

\### 替代盒模型

\`\`\`rust

.box {

box\-sizing: border\-box;

}

\`\`\`

\### 默认布局

\## 层叠、继承、优先级

一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。

一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

继承属性、非继承属性

\### 控制继承

inherit、initial、revert、revert-layer、unset

CSS 的简写属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset 或 revert）。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

资源顺序

当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

更高的优先级——它范围更小

一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。（Tailwind CSS 的核心思想是通过预定义的类（utility classes）来构建样式规则）

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

ID：选择器中包含 ID 选择器则百位得一分。

类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。

元素：选择器中包含元素、伪元素选择器则个位得一分。

通用选择器（\\\*）、组合符（+、>、~、' '）和调整优先级的选择器（:where()）不会影响优先级。

否定（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。

内联样式

内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其他任何优先级的权重都要高。

!important

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——!important。用于修改特定属性的值，能够覆盖普通规则的层叠。

级联层的顺序

在级联层中声明 CSS 时，优先级的顺序由声明层的顺序来决定。在任何层之外声明的 CSS 样式会被按声明的顺序组合在一起，形成一个未命名的层，它会被当作最后声明的层。对于存在冲突的常规（没有 !important 声明）样式，后面的层比先前定义的层的优先级高。但对于带有 !important 标记的样式，其顺序相反——先前的层中的 important 样式比后面的层以及为在层中声明的 important 样式优先级要高。

当你在不同的层中有多个样式块，且其中提供了对于某一元素的单一属性的相互冲突的值时，声明该冲突样式的层的顺序将决定其优先级。而不是高优先级的层直接覆盖低优先级的层中的所有样式。需要注意的是单独的一个层中的样式的优先级仍旧会起作用。

内联样式比所有作者定义的样式的优先级都要高，不受级联层规则的影响。

覆盖声明的顺序

相互冲突的声明将按以下顺序应用，后一种声明将覆盖前一种声明：

用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）。

用户样式表中的常规声明（由用户设置的自定义样式）。

作者样式表中的常规声明（这些是我们 web 开发人员设置的样式）。

作者样式表中的 !important 声明

用户样式表中的 !important 声明

用户代理样式表中的 !important 声明

备注： 标记为 !important 的样式的优先级顺序是颠倒的

\## 值和单位

\## 约束和大小

空的

没有尺寸

如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。

由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。

果你给予了子盒子一个百分比作为宽度，那么它指的是父容器宽度的百分比。

这是因为百分比是以包含盒子的块为根据解析的。如果我们的

没有被指定百分比的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分比作为宽度，那么这就是它原来情况下可以占据空间的百分比。

使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

如果你设定一个图像的属性为 width: 100%，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。

如果你使用了 max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%。

min-和max-尺寸

\### 视口

即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的 vw 单位，以及意为视口高度的 vh 单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。

1vh 等于视口高度的 1%，1vw 则为视口宽度的 1%。你可以用这些单位约束盒子的大小，还有文字的大小

\## 背景与边框

background-color 属性定义了 CSS 中任何元素的背景颜色，background-color 可以延伸至元素的内容和内边距盒子的下面。

background-image 属性可以在一个元素的背景中显示一个图像。。默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

background-repeat 属性用于控制图像的平铺行为。可用的值是：

no-repeat——阻止背景重复平铺。

repeat-x——仅水平方向上重复平铺。

repeat-y——仅垂直方向上重复平铺。

repeat——默认值，在水平和垂直两个方向重复平铺。

使用 background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。

contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。

\## ref

\[css reset\](https://www.joshwcomeau.com/css/custom-css-reset/)