Appearance
什么是 CSS 以及核心知识详解
什么是 CSS
CSS (Cascading Style Sheets) 是一种用于描述 HTML 或 XML 文档样式的语言，它定义了如何显示网页的元素，包括布局、颜色、字体、间距等。
CSS 的作用
- 美化页面：通过设置颜色、字体、间距等属性，使页面更加美观
- 布局控制：通过盒模型、浮动、定位等属性，控制页面元素的布局
- 响应式设计：通过媒体查询等技术，使页面在不同设备上都能良好显示
- 维护性：将样式与结构分离，提高代码的可维护性
CSS 的发展历程
- CSS1：1996 年发布，基本的样式控制
- CSS2：1998 年发布，增加了定位、浮动、媒体查询等功能
- CSS3：2011 年开始逐步发布，增加了圆角、阴影、动画、弹性布局等功能
- CSS4：正在发展中，增加了更多高级特性
CSS 样式计算
样式计算的过程
CSS 样式计算是浏览器将 CSS 规则应用到元素上的过程，主要包括以下步骤：
- 收集规则：浏览器收集所有适用于该元素的 CSS 规则
- 优先级计算：根据选择器的优先级确定最终应用的规则
- 层叠：处理多个规则之间的冲突，遵循层叠规则
- 继承：处理继承的样式属性
- 默认值：为未指定的属性应用默认值
优先级计算
选择器的优先级由以下因素决定（从高到低）：
- 内联样式：
style属性中的样式 - ID 选择器：
#id - 类选择器、属性选择器、伪类：
.class、[attr]、:hover - 元素选择器、伪元素：
div、::before
计算方式：
- 内联样式：1000
- ID 选择器：100
- 类选择器/属性选择器/伪类：10
- 元素选择器/伪元素：1
层叠规则
当多个规则应用到同一个元素时，遵循以下规则：
- 重要性：
!important声明的规则优先级最高 - 来源：用户代理样式 < 用户样式 < 作者样式 < 作者
!important< 用户!important - 优先级：优先级高的规则覆盖优先级低的规则
- 顺序：同一优先级的规则，后面的覆盖前面的
视觉格式化模式
视觉格式化模型
视觉格式化模型是 CSS 中用于确定元素如何在页面上布局的一套规则，主要包括：
- 盒模型：每个元素都被视为一个矩形盒子
- 定位方案：确定元素的位置和大小
- 格式化上下文：控制元素的布局环境
盒模型
盒模型由以下部分组成：
- 内容区域：元素的实际内容
- 内边距：内容与边框之间的空间
- 边框：围绕内容和内边距的边界
- 外边距：元素与其他元素之间的空间
定位方案
CSS 中有三种主要的定位方案：
- 普通流：元素按照其在 HTML 中的顺序排列
- 浮动：元素脱离普通流，向左或向右移动
- 绝对定位：元素相对于其包含块定位，脱离普通流
格式化上下文
常见的格式化上下文：
- 块级格式化上下文 (BFC)：控制块级元素的布局
- 行内格式化上下文 (IFC)：控制行内元素的布局
- 弹性格式化上下文 (FFC)：由
display: flex创建 - 网格格式化上下文 (GFC)：由
display: grid创建
包含块
什么是包含块
包含块是元素定位和尺寸计算的参考框，元素的位置和大小通常相对于其包含块计算。
包含块的确定规则
不同定位方式的元素，其包含块的确定规则不同：
- 静态定位 (static) 和 相对定位 (relative)：包含块是其最近的块级祖先元素的内容盒
- 绝对定位 (absolute)：包含块是其最近的已定位祖先元素的内边距盒
- 固定定位 (fixed)：包含块是视口
- 粘性定位 (sticky)：包含块是其最近的块级祖先元素
包含块的影响
包含块会影响以下属性的计算：
- top, right, bottom, left：定位元素的偏移量
- width, height：元素的尺寸
- margin, padding：元素的内边距和外边距
- 百分比值：宽度、高度、内边距、外边距等使用百分比时，参考包含块的对应属性
示例
html
<div class="container">
<div class="box"></div>
</div>css
.container {
position: relative;
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid #ccc;
}
.box {
position: absolute;
top: 10%; /* 相对于包含块的高度（200px），即 20px */
left: 10%; /* 相对于包含块的宽度（300px），即 30px */
width: 50%; /* 相对于包含块的宽度，即 150px */
height: 50%; /* 相对于包含块的高度，即 100px */
background-color: red;
}其他核心知识
选择器
CSS 选择器用于选择要应用样式的元素，常见的选择器包括：
- 元素选择器：
div,p,span - ID 选择器：
#id - 类选择器：
.class - 属性选择器：
[attr],[attr=value] - 伪类选择器：
:hover,:active,:first-child - 伪元素选择器：
::before,::after - 组合选择器：
div p,div > p,div + p
单位
CSS 中常用的单位包括：
- 绝对单位：px, pt, pc, cm, mm, in
- 相对单位：em, rem, %, vw, vh, vmin, vmax
颜色
CSS 中表示颜色的方式包括：
- 十六进制：
#FF0000 - RGB：
rgb(255, 0, 0) - RGBA：
rgba(255, 0, 0, 0.5) - HSL：
hsl(0, 100%, 50%) - HSLA：
hsla(0, 100%, 50%, 0.5) - 颜色名称：
red,blue,green
动画和过渡
- 过渡：
transition属性用于定义元素从一种状态到另一种状态的过渡效果 - 动画：
animation属性用于定义元素的动画效果
响应式设计
- 媒体查询：
@media规则用于根据设备的特性应用不同的样式 - 弹性布局：
flexbox用于创建灵活的布局 - 网格布局：
grid用于创建二维布局
预处理器
常用的 CSS 预处理器包括：
- Sass：增加了变量、嵌套、混合等功能
- Less：类似 Sass，增加了变量、嵌套等功能
- Stylus：语法更加灵活，支持多种语法形式
总结
- CSS 是什么：CSS 是一种用于描述 HTML 或 XML 文档样式的语言
- 样式计算：浏览器通过收集规则、计算优先级、层叠、继承和应用默认值来确定元素的最终样式
- 视觉格式化模式：定义了元素如何在页面上布局，包括盒模型、定位方案和格式化上下文
- 包含块：是元素定位和尺寸计算的参考框，不同定位方式的元素有不同的包含块确定规则
- 其他核心知识：包括选择器、单位、颜色、动画和过渡、响应式设计、预处理器等
理解这些核心概念对于掌握 CSS 布局和解决布局问题非常重要。