CSS知识点（一）

1、CSS选择器

• 基本选择器

  • 元素选择器（直接使用HTML元素）

  p {
      color: blue;
  }

  • 类选择器（使用 . 加上类名)

  .container{
      margin: 0 auto;
  }

  • ID选择器（使用 # 加上ID名）

  #header{
      background-color: black;
  }

• 组合选择器

  • 后代选择器（选择某元素内部（不论层级）的另一个元素，嵌套中的也算后代。）

  ul li {
      list-style-type: none;
  }

  • 子元素选择器（仅选择直接子元素，必须是第一顺位的亲儿子）

  div > p {
      font-size: 16px;
  }

  • 通用兄弟选择器（选择某元素后所有同级的兄弟元素，表面兄弟~）

  h1 ~ p {
      color: green;
  }

  • 相邻兄弟选择器（选择紧跟在某元素后的第一好兄弟元素，紧紧并列又相依）

  h1 + p {
      font-size: large;
  }

  • 群组选择器（多个选择器用逗号分隔，可以一次性为多个元素定义样式）

  h1,h2,h3{
      margin: 0;
  }

  • 通配符选择器（使用星号 (*) 选择文档中所有元素)

  *{
      box-sizing: border-box;
  }

• 属性选择器

  • 基础属性选择器（选择所有带有 target 属性的 <a> 元素）

    a[target] {
        color: #000;
    }

  • 精确匹配 （=）

    input[type='text']{
        border: 1px solid #000;
    }

  • 开头匹配 （^=）

    a[href ^= 'http']{
        font-weight: bold;
    }

  • 结尾匹配 （$=）

    img[src$='.jpg']{
        border: none;
    }

  • 包含匹配 （*=）

    a[href*='google']{
        text-decoration: underline;
    }

• 伪类选择器

  伪类选择器用于选择元素的特定状态或位置，而这些状态或位置在文档树中并不通过实际的 HTML 属性来表达。

  • 动态伪类 根据用户的交互或状态来选择元素

  a:hover{
      color: yellowgreen;
  }

  • 结构性伪类 根据元素在文档结构中的位置来选择元素

  li:first-child{
      font-weight: bold;
  } 
  # （选择每个列表中第一个 `<li>` 元素） 

  • 排除伪类（否定伪类）（选择所有不具有 special 类的 <p> 元素）

  p:not(.special) {
    color: black;
  }

  :last-child、:nth-child(n)、:nth-of-type(n)、:focus、:active 等，用于更精细地控制元素状态和位置。

• 伪元素选择器

  伪元素选择器用于创建或选择文档中不存在的“虚拟”元素，这些元素可以用来应用样式或生成内容。

  伪元素是用于选取元素的某一部分并为其添加样式。

  ::before：在元素的内容前插入内容。

  p::before {
  	content: 'NOTE';
  }

  ::after：在元素的内容后插入内容。

  p::after {
  	content: 'END';
  }

  选择每个 <p> 元素的第一行文本：

  p::first-line {
  	color: beige;
  }

  在每个 <div> 元素后生成一个清除浮动的伪元素：

  div::after {
    content: "";
    display: block;
    clear: both;
  }

• css3新增选择器

  • :not() 选择器（用于选择不符合某个条件的元素)

  button:not(.disabeld){
  	cursor: pointer;
  }

  • 结构选择器

  如 :nth-child()、:nth-last-child()、:nth-of-type() 等，用于基于元素在父元素中的位置进行选择。

2、选择器优先级

在 CSS 中，当多个规则应用到同一元素时，浏览器需要一种机制来决定哪个规则最终生效，这就是所谓的 选择器优先级（Specificity）。

• 计算规则

  每个css选择器都可以转换为一个由四部分组成的权重值，通常表示为：（A,B,C,D)

  每出现一个，相应的值加一。

  A：内联样式 1000

  <p style="color:red"></p>

  B：ID选择器个数 0100

  #main {
  	background-color: red;
      }

  C：类选择器、属性选择器、伪类选择器的个数 0010

  .contain {
   	background-color: blue;
      }
  
  input[type="text"]{
    	background-color: red;
      }	
      
  div:hover {
      background-color: aqua;
      }

  D：元素选择器、伪元素选择器的个数 0001

  p{
  	color: red;
  	}
  ul li::first-line{
  	color: #000;
  	}

  注意：

  组合符号（如空格、>、+、~）和通配符（*）不会增加任何权重。

  否定伪类 :not() 内部的选择器不会计入优先级，但 :not() 本身作为伪类会计算到 C 中。

• 优先级比较规则

  当多个规则应用到同一元素时，浏览器会按照以下顺序进行比较：

1. A 值：内联样式最高（A 值为 1 的规则优先级最高）。
2. B 值：ID 数量越多，优先级越高。
3. C 值：类、属性和伪类数量越多，优先级越高。
4. D 值：元素和伪元素数量越多，优先级越高。

• 关于 !important

​ !important 声明可以让某条样式规则具有最高的声明优先级，即使其选择器权重较低也能覆盖其他规则。

​ 但应谨慎使用 !important，因为它会使样式难以维护和调试。

• 其他

  如果优先级相同，则最后出现的样式生效；

  继承得到的样式的优先级最低；

  内部样式和外部样式都属于作者样式（Author Stylesheet），从来源上讲，它们在优先级上是平等的。也就是说，仅仅因为样式是写在 <style> 标签内（内部样式）还是存放在外部 CSS 文件中（外部样式），并不会决定它们的优先级高低。真正影响最终样式生效的因素主要有：

  1、选择器的特异性（Specificity）— 相同来源内，不同选择器的权重不同。

  2、源代码中的出现顺序（Source Order）。

  3、!important 声明。

3、CSS继承与不继承元素

在 CSS 中，属性是否被子元素自动继承主要取决于该属性的设计初衷。大致来说，与文本、字体、颜色等相关的属性默认是可继承的，而大多数与布局、盒模型、背景、定位等相关的属性默认是不继承的。

• 可继承

  文本和字体相关：

  • color：文本颜色
  • font-family：字体系列
  • font-size：字体大小
  • font-style：字体样式（如斜体）
  • font-weight：字体粗细
  • line-height：行高
  • text-align：文本对齐方式
  • text-indent：首行缩进
  • text-transform：文本大小写转换
  • letter-spacing：字母间距
  • word-spacing：单词间距
  • white-space：空白处理方式
  • direction：文本方向（例如从左到右或从右到左）

  列表与引用相关：

  • list-style：列表样式（包括 list-style-type、list-style-position 等）
  • quotes：用于设置引用内容的引号

  其他：

  • visibility：可见性（虽然主要用于控制显示与隐藏，但其值也会被子元素继承）
  • （部分情况下，cursor 也会继承，但不同浏览器的实现可能略有差异）

• 不可继承

  盒模型与布局：

  • margin：外边距
  • padding：内边距
  • border（以及相关的 border-width、border-style、border-color）
  • width、height、min-width、max-width、min-height、max-height
  • box-sizing：盒模型的计算方式

  背景与装饰：

  • background、background-color
  • background-image
  • background-position
  • background-size
  • background-repeat

  定位与显示：

  • display：元素的显示类型（如 block、inline、flex 等）
  • position：定位方式（如 static、relative、absolute、fixed、sticky）
  • 定位偏移属性：top、right、bottom、left
  • float：浮动
  • clear：清除浮动
  • z-index：层叠顺序
  • overflow：溢出处理方式

  视觉效果与动画：

  • opacity：透明度
  • transform：变换效果
  • transition：过渡效果
  • animation：动画效果
  • box-shadow：盒子阴影
  • border-radius：圆角

• 强制继承：inherit 关键字

即使属性默认不可继承，也可以通过 inherit 强制继承父元素的值：

.child {
  width: inherit; /* 强制继承父元素的 width */
}

4、display的属性值及其作用

基本显示类型：

display: block; # 元素作为块级元素显示，独占一行

display: inline; #  元素作为行内元素显示，不会独占一行，宽度根据内容自适应，无法设置宽高

display: inline-block; # 结合了 inline 和 block 的特性：元素本身在一行内显示，但又可以设置宽高，行为上类似块级盒子。

display: none; # 元素不生成任何盒子，也不占据空间，相当于完全从页面中移除（但仍存在于 DOM 中）。

布局上下文相关类型：

display: flex; # 将元素定义为弹性容器（flex container），其子元素（flex items）会按照弹性布局排列。该元素呈块级显示。 

display: inline-flex; # 与 flex 类似，但容器本身作为行内元素显示。

display: grid; # 将元素定义为网格容器（grid container），子元素以二维网格方式排列。该元素呈块级显示。
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;

display: inline-grid; # 类似 grid，但容器本身呈行内显示。

display: flow-root; # 父容器自动包裹浮动子元素，解决浮动元素导致的父容器高度塌陷问题，不破坏文档流

表格相关显示类型：

display: table; # table-row、table-cell、table-caption、table-row-group（模拟 <tbody>）
table-header-group（模拟 <thead>）、table-footer-group（模拟 <tfoot>）、table-column、table-column-group（用于列的布局）

5、行内和块级元素的区别

行内：在一行内排列，宽度由内容决定，不能设置宽高。只能在水平方向设置margin和padding。

块级：独占一行，默认宽度是父容器的100%。可以设置宽高、垂直和水平方向的margin和padding。

6、 隐藏元素的方法

1、display: none; （不占用布局）

2、visibility: hidden;

3、opacity: 0;（可交互)

4、元素添加 hidden 属性 （不占用布局，类似 display: none;）

5、移出视口 （JS可操作、屏幕阅读器可阅读）

position: absolute;
left: -9999px;

6、裁剪

position: absolute;
clip: rect(0,0,0,0); # 过时

或者

clip-path: inset(100%);

7、 z-index: 负值 （使其被其他元素覆盖）

z-index: -1;

8、在水平方向和垂直方向都缩放为原来的 0 倍。

transform: scale(0, 0);

7、link和@import的区别

HTML标签，通常在head内，直接链接外部CSS文件

<link rel="stylesheet" href="styles.css">

CSS的一种at-rule，通常在CSS文件顶部使用，导入其他样式表

@import url('style.css')

• 区别

  <link> 标签：

  • 加载快、并行加载、兼容性好、适合全局引用。在解析 HTML 时就会发现 <link> 标签，并立即发起请求加载样式文件。

  @import 语句：

  • 语法上更灵活，适用于模块化和条件加载，但可能带来额外延迟和性能问题，且兼容性在老版本浏览器上较差。当浏览器加载主样式表后，才会解析 @import 语句再加载其它样式表。

8、display:none与visibility:hidden的区别

• 布局和空间

  display:none 元素会从文档流中完全移除，既不显示也不占据任何空间。

  visibility:hidden 仍保留在文档流中，占据原有的布局空间。

• 交互性

  display:none 不可交互，因为它们完全不参与页面渲染。

  visibility:hidden 通常不可交互

• DOM 结构

  无论使用哪种方式，元素依然保留在 DOM 结构中，可以通过 JavaScript 进行访问和操作（例如在需要时显示该元素）。

• 继承属性

  display:none 非继承 父元素整个都不生成盒子，而其下所有内容也因此不会出现在页面上。

  visibility:hidden 继承属性，子孙节点消失是由于继承了hidden

• 重排重绘

  display:none 造成文档的重排

  visibility:hidden 造成元素的重绘

• 屏幕阅读器

  display:none 不会被读取

  visibility:hidden 不会被读取

9、伪元素和伪类的区别和作用

1、伪元素: 选取元素中的某个部分或生成虚拟的内容

常见伪元素：

• ::before：在元素内容前插入内容。
• ::after：在元素内容后插入内容。
• ::first-letter：选择元素中第一个字母，用于设置首字母的特殊样式。
• ::first-line：选择元素中第一行文本。

2、伪类：描述元素在特定状态或条件下的样式

常见伪类：

• :hover：当鼠标悬停在元素上时应用的样式。
• :active：当元素处于激活状态（例如点击时）应用的样式。
• :focus：当元素获得焦点时应用的样式。
• :visited：用于已访问过的链接。
• :nth-child(n)、:first-child、:last-child 等，用于选择特定位置的子元素。

10、对requestAnimationframe的理解

由浏览器提供的API，用于高效执行动画和视觉更新。requestAnimationFrame 会自动调整调用频率，而且当页面处于后台（比如切换到了其他标签页）时，浏览器会暂停这些回调，节省资源。传统的 setTimeout 或 setInterval 固定时间调用函数，可能与浏览器的刷新时机不同步，从而导致动画卡顿或者多余的计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="box">1111</div>
 <script>
    const box = document.getElementById('box');
    let pos = 0;
    
    function animate(timestamp) {
      pos += 1;  // 每帧增加一点位置
      box.style.left = pos + 'px';  // 更新盒子的位置
      requestAnimationFrame(animate);  // 请求下一帧
    }
    
    requestAnimationFrame(animate);  // 启动动画
 </script>   
</body>
</html>

• 优点

  与浏览器刷新率同步

  降低 CPU 使用

  平滑动画（由于回调执行时机与浏览器重绘周期一致，可以避免不必要的重排（reflow）和重绘（repaint），提升动画流畅度。）