css 基础

基本格式

1. 语法基本格式

   选择器 {
   属性名: 属性值; /* 注意：冒号分隔，分号结尾 */
   }

2. 核心选择器（怎么找到要加样式的标签）

   • 标签名 {} -> 选中页面所有该标签（如 p {}），用于全局重置，范围最广
   • .类名 {} -> 选中带有 class=“类名” 的标签（最常用！如 .btn {}）
   • #ID名 {} -> 选中带有 id=“ID名” 的唯一标签（如 #header {}）
   • 选择器A 选择器B {} -> 后代选择器，选中 A 内部的 B（如 .nav a {}）

并集选择器（多个目标用逗号 `,` 隔开）

/* 同时让 h1、h2 和 .box 里的字都变红 */
h1, h2, .box {
  color: red;
}

伪类选择器（表示“某种状态”，用冒号 `:` 连接）

/* 鼠标指针移到 .btn 按钮上时改变颜色 */
.btn:hover {
  background-color: blue;
}

注释

使用 /* 开头，以 */ 结尾。不管写单行还是跨多行

/* 这是单行 CSS 注释 */

/* 
  这是多行 CSS 注释
  用于说明比较复杂的布局逻辑或模块划分
*/

属性

• color 属性设置元素的文本以及文本装饰的前景色颜色值

• background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

• text-rendering 向渲染引擎提供信息，说明在渲染文本时应针对哪些方面进行优化。

• text-size-adjust 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。

废弃属性

• -ms-text-size-adjust:100% 禁止 IE Mobile 自动放大文字，强制其保持 CSS 中指定的原始字号大小（比例100%）。

基础

选择器的优先级（权重）

选择器类型	示例	权重积分
元素 / 标签选择器	html, body, div	1 分
类 / 伪类 / 属性选择器	.box, :root, [data-theme]	10 分
ID 选择器	#app, #header	100 分
内联样式	style="..."	1000 分
!important	color: red !important;	终极无敌

权重低了 就算写后面也无法覆盖权重高的

• :root 是一个 CSS 伪类选择器，它的意思是：“选中文档的根元素”。

  1. 在 HTML 网页里，根元素永远是 <html> 标签，所以 :root 选中的就是整个网页的最顶层。

• 自定义变量: 以 – 开头的名字，用 var() 调用

• box-sizing定义 user agent 应该如何计算一个元素的总宽度和总高度。

• @supports 特性查询 类似if

• font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。(按单个字符逐个匹配字体)

• -开头 设置特定内核的属性: -[内核/浏览器厂商简称]-[标准 CSS 属性名]

• 语法 html.borderbox 指 class为 borderbox的html

• 语法 ::before = 在这个元素内部最前面，用 CSS 凭空打一个“补丁/装饰块”。

• 语法 ::after = 在这个元素内部最后面，用 CSS 凭空打一个“补丁/装饰块”。

• 自适应：只写最大宽度 不写高度, width: 100%; max-width: 1200px; height: auto;（或直接不写 height）

• margin 属性为给定元素设置所有四个（上右下左）方向的外边距属性。

• padding 简写属性一次性设置元素所有四条边的内边距区域。

• font-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 <length> 单位，例如 em、ex 等。

• display 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

• font 可设置某元素字体的不同属性，或将元素的字体设置为系统字体。

• font-kerning CSS 属性设置是否使用字体中储存的字距信息。

• font-optical-sizing CSS 属性用于设置文本渲染是否针对不同尺寸的查看进行优化。

• CSS 伪类 :lang() 根据元素所属语言匹配元素。

• ::-moz-focus-inner CSS 伪元素是 Mozilla 的一个扩展，它表示 <button> 元素的内部焦点环，以及 <input> 元素的按钮、提交、重置和颜色类型。（废除）

• border-collapse CSS 属性用于设置 <table> 元素内单元格的边框是共享还是各自独立。

• border-spacing CSS 属性设置 <table> 元素中相邻单元格边框之间的距离。此属性仅在 border-collapse 单独设置时生效。

• border CSS 简写属性用于设置元素的边框。它可以设置 border-width、border-style 和 border-color 的值。

• CSS 属性 position 用于设置元素在文档中的定位方式。物理属性 top、right、bottom 和 left，以及与流向相关的逻辑属性 inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end，可用于确定定位元素的最终位置。

• @media 的作用就是 “按设备条件施加样式”，它是实现响应式布局（RWD）的核心手段。

盒模型

┌────────────────────────────────────────────────────────┐
│  Margin (外边距 - 盒与盒之间的距离/间隔)               │
│  ┌──────────────────────────────────────────────────┐  │
│  │  Border (边框 - 包装盒的纸板厚度)                 │  │
│  │  ┌────────────────────────────────────────────┐  │  │
│  │  │  Padding (内边距 - 填充防震泡沫厚度)          │  │  │
│  │  │  ┌──────────────────────────────────────┐  │  │  │
│  │  │  │  Content (内容区 - 里面真正装的货物) │  │  │  │
│  │  │  └──────────────────────────────────────┘  │  │  │
│  │  └────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────┘

1. Content（内容区）：存放文本、图片或子元素的地方（由 width 和 height 控制）。
2. Padding（内边距）：内容区与边框之间的透明留白（由 padding 控制，背景色会穿透并渲染到这里）。
3. Border（边框）：包裹在内边距和内容外围的实体边框（由 border 控制）。
4. Margin（外边距）：当前盒子与周围其他盒子之间的隔离距离（由 margin 控制，完全透明，不占据元素本身的物理点击区域）。

• 标准盒模型（content-box，浏览器默认）：
  1. 设置的 width = Content（仅内部内容区）
  2. 后果：总物理宽度  = width + padding + border（加 padding/border 会把盒子往外撑大）。
• 边框盒模型（border-box，现代推荐）：
  1. 设置的 width = Content + Padding + Border（整个盒子的物理外框）
  2. 效果：总物理宽度严格等于 width（加 padding/border 只会压缩内部 Content 空间，绝不上挤外框）。

长度单位

html (font-size: 16px)
  └── 父元素 .parent (font-size: 20px)
        └── 子元素 .child (font-size: 1.5em / 1.5rem / 24px)

单位	写法	实际计算结果	它的参照物是谁？
px	24px	24px	无（固定死数值）
em	1.5em	30px (20px × 1.5)	参照父级/当前字号（20px）
rem	1.5rem	24px (16px × 1.5)	参照**根节点 <html>** 字号（16px）