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使用