1. CSS 基础语法
核心知识点
- 选择器 + 声明块结构
- 三种引入方式：行内/内部/外部
- 常用选择器类型：标签/类/ID/通配符
<!-- 行内样式 -->
<p style="color: red;">红色文字</p><!-- 内部样式 -->
<style>/* 标签选择器 */p { line-height: 1.5; }/* 类选择器 */.ac { color: blue; }/* ID选择器 */#main-title { font-size: 24px; }
</style><!-- 外部样式 -->
<link rel="stylesheet" href="ac.css">
2. 盒子模型
盒子结构
- Content → Padding → Border → Margin
- 总宽度 = width + padding2 + border2
.box {width: 200px;padding: 20px;border: 5px solid #333;margin: 30px;background-color: #f0f0f0;
}/* 怪异盒子模型 */
.box-border-box {box-sizing: border-box; /* width包含padding和border */
}
3. 浮动与定位
浮动布局
.left-col {float: left;width: 30%;
}.right-col {float: right;width: 65%;
}/* 清除浮动 */
.clearfix::after {content: '';display: block;clear: both;
}
定位方式
.relative-box {position: relative;top: 20px;left: 50px;
}.absolute-box {position: absolute;right: 0;bottom: 0;
}.fixed-header {position: fixed;top: 0;width: 100%;
}
4. CSS3 新特性
常用新特性
/* 圆角与阴影 */
.rounded-box {border-radius: 15px;box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
/*box-shadow: h-shadow v-shadow blur spread color inset; *//* 渐变背景 */
<div class="gradient-bg"> 我会偏移但保留原位置</div>
.gradient-bg {background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}/* 过渡动画 */<button class="btn">Hover Me</button>
.btn {padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;transition: all 0.3s ease;}
.btn:hover {transform: scale(1.1);
}
/*
all:表示所有属性（如颜色、大小、位置等）都会应用过渡效果。
0.3s:表示过渡的持续时间为 0.3 秒。
ease:表示过渡的时间曲线（缓入缓出效果）。
这段代码的意思是：当 .btn 元素的任何属性发生变化时，变化会在 0.3 秒内以平滑的方式完成。
linear（匀速变化，从头到尾速度一致。）
ease-in（慢速开始，逐渐加速）
ease-out（快速开始，逐渐减速）
ease-in-out（慢速开始和结束，中间加速）:hover :表示当鼠标悬停在按钮上时，应用以下样式。
transform: scale(1.1)：将元素缩放到原始大小的 1.1 倍。
scale(1.1)：表示在 X 和 Y 轴上都放大 10%。
这段代码的意思是：当鼠标悬停在按钮上时，按钮会放大 1.1 倍。
*/
| 可选值 | 含义 |
|---|---|
| h-shadow | 水平阴影的位置，必须填写，可以为负值 |
| v-shadow | 垂直阴影的位置，必须填写，可以为负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的外延值 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Slide-in 示例</title><style>@keyframes slide {/*@keyframes slide:这是定义动画的关键帧规则，名为slide。*/from {transform: translateX(-100%);}/**//* from { transform: translateX(-100%); }：表示动画开始时，元素位于其原始位置的左侧100%处（即完全不可见）。*/to {transform: translateX(0);}}
/*to { transform: translateX(0); }：表示动画结束时，元素移动到其原始位置（即完全可见）。*/.slide-in {animation: slide 0.5s forwards;}
/*.slide-in:这是一个类选择器，表示应用该类的元素将执行slide动画。*/.box {width: 100px;height: 100px;background-color: lightblue;margin: 20px;}
/*
animation: slide 0.5s forwards;：
slide：指定要使用的动画名称。
0.5s：动画持续时间为0.5秒。
forwards：动画结束后，元素将保持在动画的最终状态（即transform: translateX(0)）。*/</style>
</head>
<body><div class="box slide-in"></div>
</body>
</html>
5. 弹性盒子布局
Flex 容器设置
.container {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;
}.item {flex: 1;min-width: 200px;margin: 10px;
}/* 垂直居中 */
.vertical-center {display: flex;align-items: center;height: 300px;
}
6. 媒体查询
响应式断点设置
/* 手机端 */
@media (max-width: 576px) {.container {flex-direction: column;}
}
/*
@media (max-width: 576px)：表示当屏幕宽度小于或等于 576px 时，应用以下样式。
flex-direction: column;：将 .container 的布局方向改为垂直排列（默认是水平排列）。
*/
/* 平板端 */
@media (min-width: 577px) and (max-width: 992px) {.item {flex: 0 0 48%;}
}
/*
@media (min-width: 577px) and (max-width: 992px)：表示当屏幕宽度在 577px 到 992px 之间时，应用以下样式。
flex: 0 0 48%;：将 .item 元素的宽度设置为 48%（即每行显示两个元素，留出 4% 的间隙）。
适用场景：在中等屏幕设备（如平板）上，调整布局以更好地利用屏幕空间。
*/
/* 打印样式 */
@media print {.no-print {display: none;}
}
/*
@media print：表示当页面被打印时，应用以下样式。
display: none;：隐藏所有带有 .no-print 类的元素。
适用场景：在打印页面时，隐藏不需要打印的内容（如导航栏、按钮等）。
*/
蓝桥杯真题技巧
- 布局题优先考虑Flex方案
- 动画题注意性能优化（使用transform）
- 响应式题目注意断点设置
- 注意浏览器兼容性前缀问题
- 复杂布局结合Grid+Flex使用
rint {
display: none;
}
}
/*
@media print：表示当页面被打印时，应用以下样式。
display: none;：隐藏所有带有 .no-print 类的元素。
适用场景：在打印页面时，隐藏不需要打印的内容（如导航栏、按钮等）。
*/
## 蓝桥杯真题技巧
1. 布局题优先考虑Flex方案
2. 动画题注意性能优化（使用transform）
3. 响应式题目注意断点设置
4. 注意浏览器兼容性前缀问题
5. 复杂布局结合Grid+Flex使用
![[学习笔记] 部署Docker搭建靶场](https://i-blog.csdnimg.cn/direct/48c139becc3243b68c5b42892e045939.png)
