Python 零基础100天—Day68 CSS 基础
- 2026-08-18 23:11:11
Python 零基础100天—Day68 CSS 基础
轻松时刻：
CSS 基础 — 网页的衣服
🕐 预计用时：2-3 小时 ｜ 🎯 目标：掌握选择器、盒模型、Flexbox/Grid 布局和响应式设计
📖 今日目录
CSS 是什么？ 引入方式 选择器 常用属性 盒模型 Flexbox 布局 Grid 布局 响应式设计 今日练习 今日小结
1. CSS 是什么？
CSS（Cascading Style Sheets） 控制网页的外观——颜色、字体、间距、布局。
# CSS = 给 HTML 穿衣服
# 没有 CSS 的 HTML → 素颜（丑但能用）
# 加了 CSS 的 HTML → 化了妆（好看！）
# 三种引入方式：
# 1. 内联样式（写在标签上）→ 不推荐
# 2. 内部样式（写在 <style> 标签里）→ 小项目可以
# 3. 外部样式（写在 .css 文件里）→ 推荐2. 引入方式
<!-- 方式1：内联样式（不推荐） -->
<p style="color: red; font-size: 18px;">红色文字</p>
<!-- 方式2：内部样式 -->
<head>
<style>
p { color: red; font-size: 18px; }
</style>
</head>
<!-- 方式3：外部样式（推荐） -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* style.css */
p {
color: red;
font-size: 18px;
}3. 选择器
/* 元素选择器 */
p { color: blue; }
h1 { font-size: 24px; }
/* 类选择器（最常用） */
.highlight { background: yellow; }
.btn-primary { background: #07c160; color: white; }
/* ID 选择器 */
#header { background: #333; }
#main-content { max-width: 800px; }
/* 后代选择器 */
.nav a { color: white; } /* .nav 下所有的 a */
.card .title { font-size: 18px; } /* .card 下的 .title */
/* 子元素选择器 */
.nav > li { display: inline; } /* 只选直接子元素 */
/* 相邻兄弟 */
h2 + p { font-size: 16px; } /* 紧跟 h2 后面的 p */
/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }
a[target="_blank"] { color: red; }
/* 伪类 */
a:hover { color: red; } /* 鼠标悬停 */
a:visited { color: purple; } /* 已访问 */
input:focus { border-color: blue; } /* 获得焦点 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f9f9f9; } /* 奇数行 */
/* 伪元素 */
p::first-line { font-weight: bold; }
p::before { content: "📌 "; }
p::after { content: " ✅"; }📋 选择器优先级
p | ||
.active:hover | ||
#main | ||
style="..." | ||
color: red !important |
4. 常用属性
/* 文字 */
color: #333; /* 文字颜色 */
font-size: 16px; /* 字号 */
font-weight: bold; /* 粗体（normal/bold/100-900） */
font-family: Arial, sans-serif; /* 字体 */
text-align: center; /* 对齐（left/center/right） */
text-decoration: none; /* 去掉下划线 */
line-height: 1.8; /* 行高 */
/* 背景 */
background: #f5f5f5; /* 背景色 */
background: url(bg.jpg); /* 背景图 */
background-size: cover; /* 图片铺满 */
background-position: center; /* 图片居中 */
/* 边框 */
border: 1px solid #ccc; /* 实线边框 */
border: 2px dashed #999; /* 虚线边框 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
/* 阴影 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文字阴影 */
/* 透明度 */
opacity: 0.8; /* 0=完全透明，1=不透明 */
/* 过渡动画 */
transition: all 0.3s ease; /* 平滑过渡 */
/* 溢出处理 */
overflow: hidden; /* 隐藏溢出 */
overflow: auto; /* 需要时显示滚动条 */
text-overflow: ellipsis; /* 文字溢出显示省略号 */5. 盒模型
每个 HTML 元素都是一个"盒子"，由四层组成：
/*
┌─────────────────────────────────┐
│ margin（外边距） │
│ ┌───────────────────────────┐ │
│ │ border（边框） │ │
│ │ ┌───────────────────┐ │ │
│ │ │ padding（内边距） │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ （内容） │ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └───────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
*/
.box {
width: 300px; /* 内容宽度 */
height: 200px; /* 内容高度 */
padding: 20px; /* 内边距（内容到边框的距离） */
border: 5px solid #333; /* 边框 */
margin: 10px; /* 外边距（元素之间的距离） */
/* 关键：box-sizing 让 width 包含 padding 和 border */
box-sizing: border-box; /* 推荐！ */
}
/* margin 简写 */
margin: 10px; /* 四个方向都是 10px */
margin: 10px 20px; /* 上下 10px，左右 20px */
margin: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */
/* padding 同理 */
padding: 16px;
padding: 16px 24px;💡 box-sizing: border-box 是必须的！
默认情况下，width: 300px 只是内容宽度，加上 padding 和 border 后实际宽度会更大。box-sizing: border-box 让 width 包含 padding 和 border——300px 就是 300px，不会溢出。
几乎所有项目都会在全局设置：* { box-sizing: border-box; }
6. Flexbox 布局
Flexbox 是 CSS 最强大的布局工具——轻松实现水平居中、垂直居中、等分布局。
/* 容器设置 */
.container {
display: flex; /* 开启 Flex 布局 */
/* 主轴方向 */
flex-direction: row; /* 水平排列（默认） */
/* flex-direction: column; 垂直排列 */
/* 主轴对齐 */
justify-content: center; /* 居中 */
/* flex-start / flex-end / space-between / space-around / space-evenly */
/* 交叉轴对齐 */
align-items: center; /* 垂直居中 */
/* flex-start / flex-end / stretch */
/* 换行 */
flex-wrap: wrap; /* 自动换行 */
/* 间距 */
gap: 16px; /* 子元素间距 */
}
/* 子元素 */
.item {
flex: 1; /* 等分剩余空间 */
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}
.item-fixed {
flex: 0 0 200px; /* 固定 200px，不伸缩 */
}
.item-grow {
flex-grow: 2; /* 占 2 份（其他占 1 份） */
}/* 经典场景1：水平垂直居中 */
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 经典场景2：两端对齐 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 经典场景3：等宽三列 */
.three-col {
display: flex;
gap: 20px;
}
.three-col > * {
flex: 1;
}
/* 经典场景4：侧边栏固定 + 主内容自适应 */
.layout {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* 固定 250px */
}
.main {
flex: 1; /* 剩余空间全部给主内容 */
}7. Grid 布局
Grid 是二维布局——同时控制行和列。适合复杂的页面布局。
.grid-container {
display: grid;
/* 定义列 */
grid-template-columns: 200px 1fr 200px; /* 三列：左右固定，中间自适应 */
/* grid-template-columns: repeat(3, 1fr); 等宽三列 */
/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 自适应列数 */
/* 定义行 */
grid-template-rows: 60px 1fr 40px; /* 三行：头尾固定，中间自适应 */
/* 间距 */
gap: 16px;
}
/* 子元素可以跨行跨列 */
.item {
grid-column: 1 / 3; /* 从第1列到第3列（跨2列） */
grid-row: 1 / 2; /* 从第1行到第2行 */
}
/* 经典布局：头-侧-主-尾 */
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 40px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }8. 响应式设计
/* 媒体查询：根据屏幕宽度应用不同样式 */
/* 手机（< 768px） */
@media (max-width: 768px) {
.sidebar { display: none; }
.main { padding: 10px; }
.grid-container { grid-template-columns: 1fr; }
}
/* 平板（768px - 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
.sidebar { flex: 0 0 200px; }
.grid-container { grid-template-columns: 200px 1fr; }
}
/* 桌面（> 1024px） */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}/* 移动端优先（推荐） */
/* 默认写移动端样式，大屏覆盖 */
.container {
padding: 10px;
}
@media (min-width: 768px) {
.container { padding: 20px; }
}
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}💡 响应式设计的核心公式：viewport meta + 媒体查询 + Flexbox/Grid + 百分比/rem 单位
一定要加：<meta name="viewport" content="width=device-width, initial-scale=1.0">
9. 今日练习
🏋️ 练习 1：导航栏
# 用 Flexbox 实现：
# - 左侧 Logo
# - 右侧导航链接（水平排列）
# - 垂直居中对齐
# - 手机端变为汉堡菜单（用媒体查询隐藏链接）🏋️ 练习 2：卡片布局
# 用 Grid 实现自适应卡片布局：
# - 大屏：4 列
# - 中屏：2 列
# - 小屏：1 列
# 每张卡片有图片、标题、描述、价格🏋️ 练习 3：圣杯布局
# 用 Flexbox 或 Grid 实现经典布局：
# - Header：固定在顶部
# - Sidebar：左侧 250px
# - Main：中间自适应
# - Footer：固定在底部10. 今日小结
🚀 明日预告：Day 69 — JavaScript 基础
HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉——让网页动起来！明天学 JS 基础：变量、函数、DOM 操作、事件处理、AJAX 请求。这是前端三件套的最后一块拼图！
请在微信客户端打开
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
