✨博客主页： https://blog.csdn.net/m0_63815035?type=blog
💗《博客内容》：大数据、Java、测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识
📢博客专栏： https://blog.csdn.net/m0_63815035/category_11954877.html
📢欢迎点赞 👍 收藏 ⭐留言 📝
📢本文为学习笔记资料，如有侵权，请联系我删除，疏漏之处还请指正🙉
📢大厦之成，非一木之材也；大海之阔，非一流之归也✨
🎨 CSS
CSS（层叠样式表）用于控制网页的样式与布局，实现内容与表现分离。
一、HTML 与 CSS 的关系
- HTML 负责网页的结构（骨架）
- CSS 负责网页的表现（外观）
- 原则：结构与样式分离，便于维护和复用
二、CSS 语法基础
1. 基本结构
选择器 {
属性: 值;
属性: 值;
}
- 每条声明以分号
; 结束
- 属性和值之间用冒号
:
- 注释：
/* 注释内容 */
2. CSS 的三种使用方式
| 方式 |
写法 |
适用场景 |
缺点 |
| 行内式 |
<div style="color:red;"> |
单个元素临时调试 |
耦合度高，难维护 |
| 嵌入式 |
<style> 标签内写CSS |
单个页面独有样式 |
无法跨页面复用 |
| 外联式 |
<link rel="stylesheet" href="style.css"> |
多页面共用样式 |
需额外HTTP请求（可缓存） |
✅ 实际开发推荐使用外联式。
三、CSS 选择器（核心）
1. 基本选择器
| 选择器 |
格式 |
示例 |
说明 |
| 通用选择器 |
* |
* { margin:0; } |
匹配所有元素 |
| 元素选择器 |
标签名 |
div { } |
匹配指定标签 |
| 类选择器 |
.类名 |
.box { } |
匹配 class="box" 的元素 |
| ID选择器 |
#id名 |
#header { } |
匹配 id="header"（唯一） |
| 分组选择器 |
A, B |
h1, h2 { } |
同时选中多个选择器 |
2. 组合选择器（层次关系）
| 选择器 |
符号 |
示例 |
说明 |
| 后代选择器 |
空格 |
ul li { } |
所有后代（不限层级） |
| 子选择器 |
> |
ul > li { } |
仅直接子元素 |
| 相邻兄弟选择器 |
+ |
h1 + p { } |
紧邻的下一个兄弟 |
| 通用兄弟选择器 |
~ |
h1 ~ p { } |
之后的所有兄弟 |
3. 伪类与伪元素（进阶）
/* 伪类：元素状态 */
a:hover { color: red; } /* 鼠标悬停 */
input:focus { border: blue; } /* 获得焦点 */
li:first-child { } /* 第一个子元素 */
li:nth-child(2) { } /* 第二个子元素 */
/* 伪元素：插入虚拟内容 */
p::first-line { } /* 首行 */
p::before { content: "★"; } /* 内容前插入 */
p::after { content: "★"; } /* 内容后插入 */
四、常用 CSS 属性详解
1. 背景（background）
| 属性 |
说明 |
示例 |
background-color |
背景色 |
#fff、rgb(0,0,0) |
background-image |
背景图 |
url(photo.jpg) |
background-repeat |
平铺方式 |
no-repeat、repeat-x、repeat-y |
background-position |
位置 |
center、10px 20px |
background-size |
尺寸（CSS3） |
cover、contain、100px |
| 简写 |
background: color image repeat position/size |
background: #eee url(bg.png) no-repeat center/cover; |
2. 文本（text）
| 属性 |
说明 |
color |
文字颜色 |
text-align |
水平对齐：left、center、right、justify |
text-decoration |
装饰：underline、overline、line-through、none |
text-indent |
首行缩进（常用 2em） |
line-height |
行高（可实现垂直居中） |
letter-spacing |
字间距 |
word-spacing |
单词间距 |
3. 字体（font）
| 属性 |
说明 |
示例 |
font-family |
字体族（回退机制） |
"微软雅黑", Arial, sans-serif |
font-size |
字体大小 |
16px、1.2rem、80% |
font-weight |
粗细 |
normal(400)、bold(700)、100~900 |
font-style |
样式 |
normal、italic |
| 简写 |
font: style weight size family |
font: italic bold 16px/1.5 "宋体"; |
4. 列表（list）
ul {
list-style-type: none; /* 去掉项目符号 */
list-style-image: url(arrow.png); /* 自定义图标 */
}
/* 常用值：disc, circle, square, decimal, lower-roman 等 */
5. 盒子模型（Box Model）------ 重中之重
- 内容区（content）
- 内边距（padding）：内容与边框的距离
- 边框（border）
- 外边距（margin）：元素之间的距离
相关属性
div {
width: 200px;
height: 100px;
padding: 10px 20px; /* 上右下左：10px 20px 10px 20px */
border: 1px solid #000;
margin: 0 auto; /* 上下0，左右自动 → 水平居中 */
}
- 单独设置：
padding-top、margin-left 等
- 注意 ：默认情况下，
width/height 只作用于内容区，加上 padding 和 border 会撑大元素。
✅ 使用 box-sizing: border-box; 让宽高包含 padding 和 border（强烈推荐）
* {
box-sizing: border-box;
}
6. 显示类型（display）
| 值 |
效果 |
block |
块级元素（独占一行，可设宽高） |
inline |
行内元素（不换行，宽高由内容决定） |
inline-block |
行内块（不换行但可设宽高） |
none |
隐藏元素（不占位） |
flex |
弹性盒布局（CSS3，推荐） |
五、定位（Position）与浮动（Float）
1. 定位（position）
| 值 |
说明 |
参考系 |
static |
默认值，普通流 |
无 |
relative |
相对定位 |
元素原本位置 |
absolute |
绝对定位 |
最近的非 static 父元素 |
fixed |
固定定位 |
浏览器视口 |
sticky |
粘性定位（CSS3） |
滚动到阈值时固定 |
.relative {
position: relative;
top: 20px; /* 相对原位置向下移动20px */
}
.absolute {
position: absolute;
left: 0;
top: 0;
}
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
2. 浮动（float）
float: left / right → 元素脱离文档流，向左或向右排列。- 常用于实现多列布局（现逐渐被 Flex/Grid 替代）。
- 清除浮动：防止父元素高度塌陷。
.clearfix::after {
content: "";
display: block;
clear: both;
}
3. 弹性盒布局（Flex）------ 现代主流
.container {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
flex-wrap: wrap; /* 换行 */
}
.item {
flex: 1; /* 等分剩余空间 */
}
建议放弃浮动布局，改用 Flex 或 Grid。
六、进阶：CSS3 新特性（补充）
| 特性 |
示例 |
| 圆角 |
border-radius: 10px;（可做圆形） |
| 阴影 |
box-shadow: 5px 5px 10px rgba(0,0,0,0.3); |
| 渐变 |
background: linear-gradient(red, blue); |
| 过渡 |
transition: all 0.3s ease; |
| 动画 |
@keyframes + animation |
| 转换 |
transform: rotate(45deg) scale(1.2); |
| 媒体查询 |
@media (max-width: 768px) { ... }（响应式） |
| 网格布局 |
display: grid; |
七、案例实战：百度注册页面（完整分析）
案例来源于 以上末尾，综合运用了：
- 外联 CSS
- 盒子模型（margin/padding/border）
- 浮动（float）实现左右布局
- 背景图片精灵（CSS Sprites）
- 表单样式
布局结构简图
body
├── #head (头部)
│ ├── #head_logo (logo + 背景图)
│ └── #head_login (登录按钮)
├── #nav (导航分隔线)
├── #register (注册区域)
│ ├── #reg_form (左侧表单，float:left)
│ │ ├── 用户名、手机号、密码等输入框
│ │ ├── 验证码 + 获取短信按钮
│ │ ├── 复选框 + 协议链接
│ │ └── 注册按钮
│ └── #reg_qrcode (右侧二维码，float:left)
└── #copyright (版权信息)
关键 CSS 技巧
- 容器水平居中：
margin: 0 auto; + 固定宽度
- 背景精灵图：
background: url(reg_icons.png) no-repeat 0 -48px; 减少请求
- 输入框统一样式：
height, border, text-indent
- 按钮悬停效果：
:hover 改变背景色
八、常见问题与最佳实践
1. 选择器优先级（由高到低）
- 行内样式（1000）
- ID 选择器（100）
- 类/伪类/属性选择器（10）
- 元素选择器（1）
- 通配符（0）
计算法则 ：叠加数值，数值大的生效。
✨ 尽量使用低优先级选择器，避免 !important。
2. 常用重置样式（Reset CSS）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
3. 移动端适配
- 使用
viewport 元标签
- 单位推荐
rem / vw / %
- 媒体查询断点
4. 性能小提示
- 合并多个背景图（精灵图）
- 避免过深的嵌套选择器
- 使用
will-change 提示即将变化的属性
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文
