✨博客主页： 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 提示即将变化的属性

---

今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文