CSS

约 950 字大约 3 分钟

2025-08-23

层叠样式表 (Cascading Style Sheets)、表现（Presentation）

CSS - 文档
 菜鸟教程 - CSS - 文档
 w3cschool - CSS - 文档
 在线工具 | 菜鸟工具

CSS 引入方式

行内样式(内联/嵌入式/内嵌)
语法 / 步骤：
1. <标签 style="CSS代码"></标签>
内部样式
语法 / 步骤：
1. 再在head里面创建一个<style type="text/css"></style>
2. 选择器(选择符){属性:属性值;}
外部样式
语法 / 步骤：
1. 创建一个 .css 文件书写相关的修饰样式
2. 选择器(选择符){属性:属性值;}
3. 最终通过link或者import把html文件和css文件进行关联

<link rel="stylesheet" href="" type="text/css">
<style>@import url(); </style>
区别：
本质语法：link 是 html 的语法环境书写；import 是 CSS 的语法环境
兼容性：link 没有；import 是 CSS2.1 提出的,在 IE5 以下不兼容
加载顺序：link 是同时加载；import 是先加载 html 结构，结束后在加载 css 样式；网速慢的情况下，可能会出现闪屏

警告

最终展示的样式跟权重有关系

CSS 权重

选择器/关键字	权重	例子
!important 关键字	+∞	background-color: red !important;
行内(内联)样式	1000	style="background-color: red;"
ID 选择器	100	#root{}
类选择器、伪类选择器、属性选择器	10	.red{}、:active{}、`[title='name']{}`
标签选择器、伪元素选择器	1	div{}、::first-line{}
通配符、子选择器符、相邻选择器符器	0	*{}、>、+
标签自带的样式
继承的样式

盒子模型

标准盒子模型

标准盒子模型照片正在整理中

IE 盒子模型(怪异盒子模型)

IE盒子模型照片正在整理中

CSS 浮动

CSS 浮动属性

属性	描述	属性值
float	指定一个盒子（元素）是否可以浮动。	none(默认值。元素不浮动，并会显示在其在文本中出现的位置。) left(元素向左浮动。) right(元素向右浮动。) inherit(规定应该从父元素继承 float 属性的值。)
clear	指定不允许元素周围有浮动元素。	none(默认值。允许浮动元素出现在两侧。) left(在左侧不允许浮动元素。) right(在右侧不允许浮动元素。) both(在左右两侧均不允许浮动元素。) inherit(规定应该从父元素继承 clear 属性的值。)

CSS浮动 - 文档

CSS BFC

BFC，为 Block Formatting Context 的缩写，中文翻译为: 块格式上下文

如何触发BFC

触发BFC 条件

1. 根元素(<html>)
 
2. 设置float浮动，不包含none
 
3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)
 
4. display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
 
5. 设置overflow，不为visible
 
6. contain 值为 layout、content 或 paint 的元素
 
7. 多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）

参考文章参考文章

CSS3模块

CSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
一些最重要 CSS3 模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

伪元素

参考文章

伪元素	例子	例子描述
::after	p::after	在每个 `<p>` 元素之后插入内容
::before	p::before	在每个 `<p>` 元素之前插入内容
::first-letter	p::first-letter	匹配每个 `<p>` 元素中内容的首字母
::first-line	p::first-line	匹配每个 `<p>` 元素中内容的首行
::selection	p::selection	匹配用户选择的元素部分
::placeholder	input::placeholder	匹配每个表单输入框（例如 `<input>`）的 placeholder 属性