CSS基础知识（特性）

层叠规则

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。
个人理解，不规范的讲法就是正如其名，CSS意为层叠样式表，标签的效果是多个样式叠加的结果（假如你写了多个的话）。因此这些效果得遵循一定的规则，不然会有冲突，比如说同时写了两个相同结构的样式，后面写的会覆盖前面写的。

</head>
<style>
        p{
            color: red;
            color: green;
        }
    </style>
</head>
<body>
    <p>1234</p>
</body>

效果是1234将会是绿色的
但是实际的代码结构不会那么简单，因此层叠规则有以下优先级

层叠三大规则

三大.jpg 这便是层叠的三大规则，显示的优先级依次往下递增，同时，在每个大规则下面，还有很多小规则有优先级排布

样式来源

样式表.jpg 一般来说，只需要关注作者样式表，是自己写的，就会覆盖掉默认样式，除了有！important情况下才有例外，也就是上图最下面的三点。

比如说这个button标签的writing-mode属性，有！important关键字，因此无法自己写一个属性去覆盖这个属性

选择器优先级

所以一般来说，我们只用看自己写代码，不用考虑默认样式的影响，为了实现效果，我们要了解选择器优先级

常见选择器

元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。
类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。
ID选择器：根据元素的ID属性选择特定元素。例如，#my-element选择ID为my-element的元素。
属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。
伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。
伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。
组合选择器：通过组合多个选择器来选择符合所有条件的元素。
- 后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。
- 子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。
- 相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。
- 一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。
多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。

作者：2002XiaoYu
链接：juejin.cn/post/722563…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
这位大哥说得很好，直接引用他的了，若侵权请联系我

选择器优先级

内联样式>id选择器>类选择器=属性选择器=伪类选择器>元素选择器=伪元素选择器

优先级.jpg 我们给上图的四条按1，2，3，4排序，如果这些选择器作用于同一个元素，那么优先级为4>2>1>3。
如果两个选择器的优先级相同，那么要看源码位置进行判断。

源码位置

谁最后声明，谁生效（不是以引用顺序！！）
- 对于@import的样式，根据@import的顺序
- 对于link和style标签的样式，根据在document中的顺序决定 这个例子中，link标签在style标签后，link标签后声明，在link标签中，.green最后声明，因此最后生效的是颜色是green，A Tittle的颜色为绿色

注意

选择器尽量少用id(不好复用，优先级又高)
尽量不要用！important(级别最高，扩展的灵活性会被压缩)
自己的样式加载在引用库样式的后面(保证我们自己的样式优先生效)

继承

CSS继承是指子元素可以从父元素继承样式的机制。当在一个元素上应用样式时，如果该元素有子元素，那么子元素也会受到该样式的影响。
CSS继承的作用主要有以下几个方面：

简化代码：CSS继承允许父元素的样式传递给子元素，从而避免了在子元素上重复设置相同的样式，简化了代码。
提高效率：通过使用CSS继承，可以更快地创建和修改样式表，因为只需要在父元素上定义样式一次，就可以同时应用于所有子元素。
更改全局样式：如果您要更改全局样式，如字体大小或颜色，只需更改一处就能够在整个页面中应用该变更。
控制网站风格：通过在网站的父元素上设置样式，可以统一整个网站的外观和风格，使之更加统一和协调。

具有继承特性的属性

大部分具有继承特性的属性跟文本相关
color、font、font-family、font-size、font-weight、font-variant、 font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
还有少部分列表、表格的属性
可以使用inherit关键字显式指定一个属性值从其父元素继承 I am a inside Tiltle的字体大小为24，因为它的h1标签继承了类选择器card的24

CSS的值和单位

css值.jpg 这个图概括得很好，详细的如下，参考了他人的文章：

单位

长度单位
- 绝对长度：
  - px（像素）：最常见的单位，通常用于屏幕显示。一个像素对应于屏幕上的一个点。
  - cm（厘米）、mm（毫米）、in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位主要用于打印媒体，它们基于物理尺寸。
- 相对长度：
  - em：相对于当前元素的字体大小。例如，如果当前字体大小是 16px，那么 2em 等于 32px。
  - rem：相对于根元素（通常是 <html>）的字体大小。与 em 类似，但始终基于根元素的字体大小。
  - vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
  - vmin、vmax：分别等于视口宽度和高度中的较小值和较大值。
角度单位
- deg（度）：角度单位，一圈有 360 度。
- rad（弧度）：角度单位，一圈有 2π 弧度。
- grad（梯度）：角度单位，一圈有 400 梯度。
- turn：角度单位，一圈等于 1 turn。
时间单位
- s（秒）：时间单位，用于表示秒。
- ms（毫秒）：时间单位，用于表示毫秒，1ms 等于 0.001s。
分辨率单位
- dpi（每英寸点数）：表示每英寸内有多少个点（像素）。
- dpcm（每厘米点数）：表示每厘米内有多少个点（像素）。
- dppx（每像素点数）：表示每像素内有多少个点（像素），1dppx 等于 96dpi。

值

文本类：
- 字符串：用于表示文本值，通常用双引号或单引号括起来。例如：content: "Hello, World!";
- 关键字：用于表示特定属性的预定义值。例如：display: block;
数值类：
- 整数：表示一个没有小数部分的数字值。例如：z-index: 3;
- 小数：表示一个有小数部分的数字值。例如：opacity: 0.5;
- 百分比：表示一个基于另一个值的百分比。例如：width: 50%;
- 长度：表示一个具有单位的长度值。例如：width: 100px; 或 padding: 1em;
- 角度：表示一个具有角度单位的值。例如：rotate(45deg);
颜色：
- 预定义颜色：使用 CSS 中预定义的颜色名称。例如：color: red;
- 十六进制颜色：使用 3 或 6 个十六进制数字表示颜色。例如：color: #ff0000; 或 color: #f00;
- RGB 颜色：使用三个介于 0 和 255 之间的整数表示颜色。例如：color: rgb(255, 0, 0);
- RGBA 颜色：与 RGB 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: rgba(255, 0, 0, 0.5);
- HSL 颜色：使用色相（0 到 360 之间的整数）、饱和度（百分比）和亮度（百分比）表示颜色。例如：color: hsl(0, 100%, 50%);
- HSLA 颜色：与 HSL 类似，但还包括一个表示透明度的值（0 到 1 之间的小数）。例如：color: hsla(0, 100%, 50%, 0.5);
函数生成：
- URL：使用 url() 函数表示一个资源的 URL。例如：background-image: url("image.jpg");
- calc()：使用 calc() 函数进行数学计算。例如：width: calc(100% - 20px);
- linear-gradient()：使用 linear-gradient() 函数创建线性渐变。例如：background-image: linear-gradient(to right, red, blue);
- radial-gradient()：使用 radial-gradient() 函数创建径向渐变。例如：background-image: radial-gradient(circle, red, blue);
- transform 函数：例如：rotate()、scale()、translate() 和 skew() 等，用于在不同轴上

作者：parksen
链接：juejin.cn/post/723151…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

盒模型

基本特性

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

盒模型.jpg 以下是四个例子：分别主要控制border、padding、magin、border和padding实现三角形、固定比例矩形、水平居中和渐变框

盒模型3.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;border-left的作用
            border-left: 50px solid black;//这里用黑色方便看border-left的作用
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;
            /* margin: auto; */
        }
        .ratio{
            width: 50%;
            height: 37.5%;
            padding: 0;
            padding-bottom: 37.5%;
            background-color: cadetblue;
            /* margin: auto; */
        }
        .wrap{
            width: 100%;
            height: 80px;
            border: 1px dashed grey;

        }
        .h-center{
            width: 100px;
            height: 50px;
            background-color: navajowhite;
            margin: 10px auto;
        }
        .awesome-border {
            width: 150px;
            height: 100px;
            border: 8px solid transparent;
            border-radius: 12px;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            background-image:
            linear-gradient(to right, #fff, #fff),
            linear-gradient(135deg, #e941ab, #a557ef);
            /* margin:10px auto; */
}

    </style>
</head>
<body>
    <div class="triangle"></div>
    <div class="ratio"></div>
    <div class="wrap">
        <div class="h-center"></div>
    </div>
    <div class="awesome-border"></div>
</body>
</html>

负外边距

padding、border、margin中只有margin能设置负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 100px;
            margin: 0;
            background: teal;
        }
        .box2{
            width: 180px;
            height: 100px;
            margin-top: -50px;
            background: goldenrod;
        }
        .box2_2{
            width: 180px;
            height: 100px;
            margin-bottom: -50px;
            background: goldenrod;
        }
        .box3{
            width: 200px;
            height: 100px;
            margin-top: 0;
            background: burlywood;
        }
        .box4{
            width: 200px;
            height: 100px;
            margin-top: 0;
            background: transparent;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box1"></div>
    <div class="box2_2"></div>
    <div class="box3"></div>
</body>
</html>

布局

布局.jpg

常规流布局

常规流布局是指由浏览器自动计算页面上每个元素的位置，并根据其在 HTML 中出现的顺序和大小对它们进行排列的布局方式。在这种布局模式中，元素会按照自然文档流从上到下依次排列，如果元素没有设置宽度，则会自适应父容器宽度。

块级元素
特点：独占一行，宽度是父级的100%，添加宽高都生效
代表标签：div,p,h,ul,li,dl,dt,dd,form,header,nav,footer
行内元素
特点：一行显示多个，尺寸与内容一样大，添加宽高不生效
代表标签：a,span,b,u,i,s,strong,ins,em,del
行内块元素
特点：一行显示多个，添加宽高生效
代表标签：input，textarea,button,select,img

块级格式化上下文

块级2.jpg 以外边距塌陷为例

塌陷.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 100px;
            margin: 30px auto;
            background: teal;
        }
        .box2{
            width: 200px;
            height: 100px;
            margin: 30px auto;
            background: goldenrod;
        }
        .parent1{
            width: 400px;
            height: 300px;
            margin: 20px auto;
            background: burlywood;
        }
        .parent2{
            width: 400px;
            height: 300px;
            margin: 20px auto;
            display:flow-root;
            background: burlywood;
        }
    </style>
</head>
<body>
    <div class="parent1 " >
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="parent2 " >
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>