CSS(Cascading Style Sheets,层叠样式表)是一种用于给 HTML 页面添加样式的语言,作用是让网页更美观、结构更清晰、布局更灵活。
核心作用:
一个网页结构由 HTML 提供骨架,CSS 负责美化“皮肤”,JS 控制交互行为。
直接写在标签的 style
属性里,优先级高,但不推荐大量使用。
<p style="color: red; font-size: 16px;">这是一段红色文字p>
写在 标签中,放在 HTML
中,适合小型页面或测试样式。
<head>
<style>
p {
color: blue;
}
style>
head>
将 CSS 单独放在 .css
文件中,用 标签引入,最推荐方式,利于复用和维护。
<link rel="stylesheet" href="styles.css" />
/* styles.css 文件 */
p {
color: green;
}
CSS 使用 选择器 + 声明块 的结构来描述样式:
selector {
property: value;
}
例如:
h1 {
font-size: 24px;
color: #333;
}
selector
:选择器,如 h1
、.class
、#id
property
:样式属性,如 font-size
、color
value
:属性的取值,如 24px
、#333
;
结尾,声明块使用 {}
包裹/* 这是一个注释 */
!important
.btn-primary
, .card-header
更具可读性推荐使用 Prettier、Stylelint 等工具统一风格,提高代码质量。
CSS 选择器用于“选中”网页中的 HTML 元素,给它们添加样式。掌握选择器能让你精确控制样式的作用范围。
选择 HTML 中的某一类标签,如 h1
、p
、div
等。
p {
color: blue;
}
.class
选择具有特定类名的元素,最常用!
.box {
border: 1px solid black;
}
#id
选择具有唯一 ID 的元素,一个页面中一个 ID 只能用一次。
#header {
background-color: #f0f0f0;
}
⚠️ 尽量少用 ID 选择器,因为它权重高、可复用性差。
选择某元素内部的所有子孙元素。
ul li {
list-style: none;
}
只选择直接子元素。
div > p {
color: red;
}
选择某元素后面紧挨着的兄弟元素。
h1 + p {
margin-top: 0;
}
选择某元素后面所有的兄弟元素。
h1 ~ p {
color: gray;
}
根据 HTML 属性值来选中元素。
/* 有 type 属性的元素 */
input[type] {
border: 1px solid gray;
}
/* 属性值是 text */
input[type="text"] {
background-color: #fafafa;
}
/* 属性值以 "btn" 开头 */
button[class^="btn"] {
padding: 10px;
}
伪类表示元素在某些状态下的样式。
a:hover {
color: red; /* 鼠标悬停时 */
}
input:focus {
outline: 2px solid blue; /* 获得焦点时 */
}
li:nth-child(2) {
color: green; /* 选中第二个 li */
}
常用伪类:
:hover
:鼠标悬停:focus
:获得焦点:active
:被点击:first-child
/ :last-child
:第一个 / 最后一个子元素:nth-child(n)
:第 n 个子元素(从 1 开始)伪元素用于“虚拟”地选中 HTML 中某个部分,常用于添加装饰性内容。
p::before {
content: " ";
}
p::after {
content: " ✅";
}
常见伪元素:
::before
:在元素前插入内容::after
:在元素后插入内容::first-line
:选中文本的第一行::first-letter
:选中文本的首字母✅ 使用伪元素时必须配合
content
属性。
当多个选择器选中同一个元素时,优先级决定哪条样式生效。
类型 | 示例 | 权重值 |
---|---|---|
行内样式 |
|
1000 |
ID 选择器 | #id |
100 |
类 / 属性 / 伪类 | .class , [type] , :hover |
10 |
标签 / 伪元素 | p , ::before |
1 |
示例:
p {
color: blue; /* 权重 1 */
}
.content p {
color: green; /* 权重 11(10 + 1) */
}
#main .content p {
color: red; /* 权重 111(100 + 10 + 1) */
}
最终颜色是红色,因为权重高。
CSS 盒模型是网页布局的基础概念,而文档流决定了元素在页面上的自然排列方式。
width = 内容宽度(content)
总宽度 = content + padding + border
box-sizing: content-box; /* 默认值 */
width = 内容宽度 + 内边距 + 边框
box-sizing: border-box;
CSS 盒模型由以下几个部分组成(从内到外):
示例:
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
box-sizing
的使用控制盒子尺寸计算方式的关键属性:
/* 推荐设置 */
* {
box-sizing: border-box;
}
content-box
(默认):宽度 = 内容宽度border-box
:宽度包含内容、内边距和边框 → 更好控制整体布局宽度外边距合并(或称“塌陷”)是 CSS 中一个常见但容易被忽视的行为。主要发生在 垂直方向上的块级元素之间,可能导致布局意外缩小或不生效。
垂直方向上,当两个块级元素相邻或嵌套时,它们的 margin-top
和 margin-bottom
可能会发生合并,最终呈现一个单一的边距,而不是两者之和。
<div class="a">div>
<div class="b">div>
.a {
margin-bottom: 30px;
}
.b {
margin-top: 20px;
}
✅ 最终间距为 30px,即两者
margin
中的最大值。
<div class="parent">
<div class="child">div>
div>
.parent {
border: 1px solid #ccc;
}
.child {
margin-top: 40px;
}
✅ 如果
.parent
没有padding/border/overflow
,那么.child
的margin-top
会与.parent
合并,整体元素像是“外推”了 40px。
.parent {
margin-top: 50px;
}
.child {
margin-top: 30px;
}
✅ 结果不是两者之和,而是取最大值 50px。
若你不希望发生合并,可以采用以下几种方式:
方法 | 原理 | 示例 |
---|---|---|
1. 添加内边距(padding ) |
打断合并通道 | .parent { padding-top: 1px; } |
2. 设置边框 | 同样打断合并 | .parent { border-top: 1px solid transparent; } |
3. 设置 overflow |
创建新的格式化上下文 | .parent { overflow: hidden; } |
4. 使用 display: flow-root ✅ 推荐 |
生成块格式化上下文(BFC) | .parent { display: flow-root; } |
display: flow-root
,简单易控。.gap
类)。总结:
外边距合并是 CSS 的“潜规则”之一,虽然是规范行为,但不易察觉,且容易造成布局混乱。理解其触发条件并掌握解决方案,有助于写出更健壮的 CSS 布局。是否需要一个示意图来更直观理解?
display
与文档流CSS 中元素的布局取决于其 display
属性,以及它在文档流中的位置。
width
、height
、margin
、padding
常见块级元素:div
、p
、h1-h6
、ul
、ol
、li
padding
生效)常见行内元素:span
、a
、strong
、em
.btn {
display: inline-block;
width: 100px;
height: 40px;
}
理解盒模型和文档流是后续掌握布局(Flex、Grid、Position)和响应式设计的基础。
布局是网页开发中控制元素位置和排布的核心。掌握不同布局方案,能够应对各种页面结构需求。
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
值 | 说明 |
---|---|
static | 默认值,按照文档流排列 |
relative | 相对自身原位置移动 |
absolute | 相对最近的定位祖先元素偏移 |
fixed | 相对于视口定位,不随滚动条移动 |
sticky | 混合行为:滚动到指定位置时固定 |
.box {
position: absolute;
top: 20px;
left: 50px;
}
absolute
会脱离文档流sticky
兼具 relative
和 fixed
的特性,适合粘性头部Flex布局是CSS中的一种布局模式,非常适合处理一维排列的布局(无论是横向或纵向)。它提供了非常灵活的方式来控制子元素的排列方式和对齐方式,简化了许多传统布局的代码。
这些属性控制整个容器如何排列子元素。
display: flex;
启用Flex布局,让容器的子项自动变成flex元素。
flex-direction: row | column;
规定项目的排列方向。
row
(默认值):水平方向排列(从左到右)。column
:垂直方向排列(从上到下)。justify-content: flex-start | center | space-between | space-around | space-evenly;
控制主轴(flex-direction
的方向)上的对齐方式。
flex-start
:项目从容器的起始位置开始排列(默认)。center
:项目居中排列。space-between
:项目之间有均匀的间隔,第一个和最后一个项目紧贴容器边缘。space-around
:项目之间有均匀的间隔,且两端有半个间隔。space-evenly
:项目之间的间隔完全相等。align-items: stretch | center | flex-start | flex-end | baseline;
控制交叉轴(垂直于主轴)上的对齐方式。
stretch
(默认值):项目拉伸以适应容器的高度。center
:项目垂直居中对齐。flex-start
:项目与容器的顶部对齐。flex-end
:项目与容器的底部对齐。baseline
:项目的基线对齐。flex-wrap: nowrap | wrap | wrap-reverse;
控制项目是否换行。
nowrap
(默认值):不换行,所有项目在一行内显示。wrap
:如果项目空间不足,自动换行。wrap-reverse
:与wrap
相似,但换行方向相反(从底部到顶部)。子项属性控制了Flex容器内各个子元素如何在容器中进行排列和对齐。每个子项都可以使用这些属性来自定义其布局表现。
flex
flex
是 flex-grow
、flex-shrink
和 flex