CSS笔记

笔记

1. 首先我们需要理解浏览器如何解析样式规则。每条规则单独来看很简单，但是当两条规则提供了冲突的样式时会发生什么呢？如果你发现有一条规则没有按照预期生效，可能是因为另一条规则跟它冲突了。要想预测规则最终的效果，就需要理解CSS里的层叠。
   下面来分析层叠的规则。当声明冲突时，层叠会依据三种条件解决冲突。
   (1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
   (2) 选择器优先级：哪些选择器比另一些选择器更重要。
   (3) 源码顺序：样式在样式表里的声明顺序。
   优先级的准确规则如下。
   ❑ 如果选择器的ID数量更多，则它会胜出（即它更明确）​。
   ❑ 如果ID数量一致，那么拥有最多类的选择器胜出。
   ❑ 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。
   你可能知道，处理层叠时有两条通用的经验法则。因为它们很有用，所以提一下。
   (1) 在选择器中不要使用ID。就算只用一个ID，也会大幅提升优先级。当需要覆盖这个选择器时，通常找不到另一个有意义的ID，于是就会复制原来的选择器，然后加上另一个类，让它区别于想要覆盖的选择器。
   (2) 不要使用！important。它比ID更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个！important，而且依然要处理优先级的问题。
   关于重要性的一个重要提醒当创建一个用于分发的JavaScript模块（比如NPM包）时，强烈建议尽量不要在JavaScript里使用行内样式。如果这样做了，就是在强迫使用该包的开发人员要么全盘接受包里的样式，要么给每个想修改的属性加上！important。
   正确的做法是在包里包含一个样式表。如果组件需要频繁修改样式，通常最好用JavaScript给元素添加或者移除类。这样用户就可以在使用这份样式表的同时，在不引入优先级竞赛的前提下，按照自己的喜好选择编辑其中的样式。
2. 样式检查器：可以观看对应DOM元素的样式覆盖和继承情况
   
   样式检查器显示了所检查元素的每个选择器，它们根据优先级排列。在选择器下方是继承属性。元素所有的层叠和继承一目了然。有很多细节可以帮助开发人员弄清楚一个元素的样式是怎么产生的。靠近顶部的样式会覆盖下面的样式。被覆盖的样式上划了删除线。右侧显示了每个规则集的样式表和行号，你可以在源代码中找到它们。这样就能准确判断哪个元素继承了哪些样式以及这些样式的来源。还可以在顶部的筛选框中选择特定的声明，同时隐藏其他声明。
3. inherit和initial
   我们想用继承代替一个层叠值。这时候可以用inherit关键字。
   你需要撤销作用于某个元素的样式。这可以用initial关键字来实现。
4. 常用的CSS属性有哪些
   文本与字体
   • color：文本颜色（如 color: #333; 或 color: red;）
   • font-family：字体（如 font-family: “Microsoft YaHei”, sans-serif;）
   • font-size：字号（如 font-size: 16px; 或 font-size: 1rem;）
   • font-weight：字重（如 font-weight: bold; 或 font-weight: 600;）
   • text-align：文本对齐（left/center/right/justify）
   • line-height：行高（如 line-height: 1.5; 或 line-height: 24px;）
   • text-decoration：文本装饰（none/underline/line-through，常用于去除链接下划线）

盒模型（布局基础）
- width/height：元素宽高（如 width: 300px; 或 height: 100%;）
- padding：内边距（如 padding: 10px; 或 padding: 5px 10px; 上右下左）
- margin：外边距（同上，margin: 0 auto; 可水平居中块级元素）
- border：边框（如 border: 1px solid #ccc;，可拆分为 border-width/style/color）
- box-sizing：盒模型计算方式（content-box 默认，border-box 包含边框和内边距）

• 背景
  • background-color：背景色（如 background-color: #f5f5f5;）
  • background-image：背景图（如 background-image: url(“bg.jpg”);）
  • background-position：背景图位置（如 background-position: center;）
  • background-size：背景图尺寸（如 background-size: cover; 覆盖容器）
  • background-repeat：背景图重复方式（no-repeat/repeat-x/repeat-y）
• 布局与定位
  • display：元素显示模式（block/inline/inline-block/flex/grid/none）
  • position：定位方式（static 默认 /relative 相对 /absolute 绝对 /fixed 固定 /sticky 粘性）
  • top/right/bottom/left：定位偏移（配合 position 使用）
  • float：浮动（left/right，早期布局方式，需清除浮动）
  • flex 相关（弹性布局）：display: flex;、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-direction（排列方向）
  • grid 相关（网格布局）：display: grid;、grid-template-columns（列定义）、grid-gap（间距）
• 边框与圆角
  • border-radius：圆角（如 border-radius: 5px; 或 border-radius: 50%; 圆形）
  • box-shadow：阴影（如 box-shadow: 0 2px 5px rgba(0,0,0,0.1);）
• 其他常用
  • opacity：透明度（0~1，如 opacity: 0.8;）
  • cursor：鼠标指针样式（pointer 手型 /default 默认等）
  • overflow：内容溢出处理（hidden 隐藏 /scroll 滚动 /auto 自动）
  • z-index：层级优先级（数值越大越靠上，需配合定位使用）
  • transition：过渡动画（如 transition: all 0.3s ease; 平滑变化）

5. display：元素显示模式（block/inline/inline-block/flex/grid/none）
   display: block（块级元素）
   • 特点
     • 独占一行（前后自动换行），宽度默认占满父容器（width: 100%）。
     • 可以直接设置 width、height、padding、margin 等盒模型属性（所有方向的边距都会生效）。
     • 常见默认块级元素：div、p、h1-h6、ul、li、header、footer 等。
   • 用途：用于构建页面的大结构（如区块、容器），适合垂直排列的元素。

display: inline（行内元素）
- 特点
- 独占一行（前后自动换行），宽度默认占满父容器（width: 100%）。
- 可以直接设置 width、height、padding、margin 等盒模型属性（所有方向的边距都会生效）。
- 常见默认块级元素：div、p、h1-h6、ul、li、header、footer 等。
- 用途：用于构建页面的大结构（如区块、容器），适合垂直排列的元素。

display: inline-block（行内块元素）

• 特点：
  • 兼具 inline 和 block 的特性：
  • 不独占一行（像 inline 一样并排显示）。
  • 可以设置 width、height、padding、margin（所有方向都生效，像 block 一样）。
• 用途：需要在一行内排列，且需要自定义尺寸的元素（如按钮、图标、小卡片）。
• 注意：多个 inline-block 元素之间会有默认的间隙（由 HTML 中的换行 / 空格导致，可通过父容器设置 font-size: 0 解决）。

display: flex（弹性布局容器）

• 特点：
  • 给父元素设置 display: flex 后，该元素成为「弹性容器」，其直接子元素自动成为「弹性项」。
  • 弹性项默认在一行内排列（主轴方向），可通过 flex-direction 改变排列方向（水平 / 垂直）。
  • 弹性容器可以通过 justify-content（主轴对齐）、align-items（交叉轴对齐）等属性灵活控制子元素的布局。
  • 弹性项的尺寸可以通过 flex 属性动态分配容器空间（适应不同屏幕尺寸）。
• 用途：现代布局的首选方式，适合实现均匀分布、居中对齐、响应式排列等复杂布局（如导航栏、卡片列表、表单对齐）

display: grid（网格布局容器）

• 特点：
  • 给父元素设置 display: grid 后，该元素成为「网格容器」，其直接子元素成为「网格项」。
  • 网格布局以「二维网格」（行 + 列）的形式排列元素，可精确控制元素在网格中的位置和大小。
  • 通过 grid-template-columns/grid-template-rows 定义列 / 行的尺寸，grid-gap 定义网格间距。
• 用途：适合需要二维布局的场景（如不规则卡片排列、仪表盘、多列布局），比 flex 更擅长处理行列同时存在的结构。

display: none（隐藏元素）

• 特点：
  • 元素完全隐藏，且不占据页面空间（从文档流中移除），相当于该元素不存在。
  • 与 visibility: hidden 不同（visibility 隐藏后仍占空间）。
• 用途：动态控制元素的显示 / 隐藏（如点击按钮显示弹窗、条件渲染内容）