CSS 基础概念

选择器 · 继承 · 盒子模型 · display · 单位

1. 选择器优先级

选择器	格式	权重
id	`#id`	100
类/属性/伪类	`.class`、`[attr]`、`:hover`	10
标签/伪元素	`div`、`::before`	1
通配符/关系	`*`、`>`、`+`	0
内联样式	`style="..."`	1000

!important 优先级最高
权重相同则最后出现的生效
继承得到的样式优先级最低

2. 可继承与不可继承

可继承：font-*、color、text-align、line-height、list-style、visibility、cursor

不可继承：display、width/height、margin/border/padding、background、position、z-index

3. 盒子模型

标准（W3C）：width = content（padding + border 额外计算）
IE：width = content + padding + border
box-sizing: border-box 切换为 IE 模式

4. display 属性值

值	作用
`none`	不显示，从文档流移除
`block`	块级，独占一行，可设宽高
`inline`	行内，不独占，宽高无效
`inline-block`	行内块，同行显示，可设宽高
`flex`	弹性布局容器

5. display / float / position 关系

display: none → position 和 float 不影响表现
position: absolute/fixed → float 失效，display 调整为 block/inline-block
float 非 none → display 按规则转换
float: none 且非根元素 → 保持 display 原值

6. 单位

单位	类型	参照对象
`px`	绝对	屏幕像素
`em`	相对	当前元素 font-size
`rem`	相对	根元素 html font-size
`vw/vh`	相对	视口宽/高
`%`	相对	父元素（fixed 时为视口）

技巧：html { font-size: 62.5% } → 1rem = 10px

7. line-height

一行文本高度 = 基线到基线距离
line-height = height 实现单行文字垂直居中
赋值推荐纯数字（如 1.5），比例传递给后代

8. 替换元素

通过属性值替换内容的元素：<img>、<video>、<input>
特点：有默认尺寸（300×150）、默认内联水平
尺寸优先级：CSS 尺寸 > HTML 尺寸 > 固有尺寸