后端转全栈学习-Day2-CSS 基础

第2天CSS 基础学习时间约 2 小时目录CSS 是什么三种写 CSS 的方式选择器颜色与文字盒模型重中之重背景与边框Flexbox 布局入门DevTools 调试 CSS常见陷阱1. CSS 是什么CSSCascading Style Sheets就是给 HTML “化妆”。HTML 决定了页面上有什么标题、图片、按钮CSS 决定这些东西长什么样什么颜色、多大、放在哪。!-- HTML 说这是一个商品标题 --h2iPhone 16 Pro Max/h2!-- 加上 CSS 后 --styleh2{color:#333;font-size:20px;margin-bottom:8px;}/style核心概念层叠CSS 的 C 代表 Cascading层叠意思是多个样式规则可以叠加到同一个元素上。如果有冲突后面的覆盖前面的更具体的覆盖更通用的。优先级内联样式 ID 选择器 class 选择器 标签选择器2. 三种写 CSS 的方式方式一内联样式写在标签的 style 属性里不推荐大量使用但改一两个地方很方便buttonstylebackground-color:#ff4400;color:white;border:none;padding:10px 20px;border-radius:4px;立即购买/button方式二内部样式写在 HTML 的style标签里适合单个页面的样式headstyle.product-title{font-size:18px;font-weight:bold;color:#333;}.product-price{color:#ff4400;font-size:24px;}/style/headbodyh2classproduct-titleiPhone 16 Pro Max/h2pclassproduct-price¥9,999/p/body/html方式三外部样式表写在单独的 .css 文件里正式项目的做法和 HTML 分离headlinkrelstylesheethrefcss/style.css//head project/ ├── index.html └── css/ └── style.css3. 选择器选择器就是选中 HTML 元素来施加样式的规则。3.1 基础选择器选择器写法选中什么标签选择器div { }所有divclass 选择器.card { }所有classcard的元素ID 选择器#header { }idheader的那个元素通配选择器* { }所有元素/* 所有 div 加红色边框 */div{border:1px solid red;}/* 所有 classproduct-card 的元素 */.product-card{border-radius:8px;box-shadow:0 2px 8pxrgba(0,0,0,0.1);}/* idmain-nav 的那个元素唯一 */#main-nav{background-color:#222;}3.2 组合选择器选择器写法选中什么后代div span { }div里面所有的span不管嵌套多深子代div p { }div的直接子元素p只限一层相邻h2 p { }h2后面紧挨着的p交集div.card { }同时是div且classcard并集h1, h2, h3 { }所有h1、h2、h3/* 商品列表里的所有价格 */.product-list .price{color:#ff4400;font-weight:bold;}/* 导航栏的直接子链接——不选中下拉菜单里的 */.nav a{color:white;}/* 多个元素共享样式 */.product-name, .product-price, .product-desc{margin-bottom:4px;}3.3 伪类选择器伪类描述元素的特殊状态比如鼠标悬停、第一个子元素等。伪类用途示例:hover鼠标悬停时.btn:hover { background: blue; }:first-child第一个子元素li:first-child { }:last-child最后一个子元素li:last-child { border: none; }:nth-child(n)第 n 个子元素li:nth-child(2) { }:disabled禁用状态的输入框input:disabled { background: gray; }/* 鼠标放上按钮时变暗 */.buy-btn:hover{opacity:0.8;}/* 购物车最后一项没有下边框 */.cart-item:last-child{border-bottom:none;}/* 表格偶数行灰色背景 */tr:nth-child(even){background-color:#f8f8f8;}3.4 优先级速记当一个元素被多个选择器命中时到底听谁的!important 内联样式 ID 选择器 class 选择器 标签选择器/* 标签选择器——权重最低 */div{color:black;}/* class 选择器——覆盖上面的 */.text{color:blue;}/* ID 选择器——覆盖上面的 */#title{color:red;}/* 内联样式——覆盖上面的 *//* div stylecolor: green; *//* !important——核武器尽量别用 */div{color:purple!important;}4. 颜色与文字4.1 颜色写法写法示例说明颜色名red、white、black、blue直观但选择少十六进制#ff4400、#333、#fff最常用rgbrgb(255, 68, 0)红绿蓝数值rgbargba(255, 68, 0, 0.5)带透明度a0~1.product-price{color:#ff4400;}.discount-tag{background:rgba(255,68,0,0.1);}4.2 文字样式.product-card{font-size:14px;/* 字号 —— 最常用 */font-weight:bold;/* 字重normal(400) / bold(700) / 也可以直接写数字 */font-family:PingFang SC,Microsoft YaHei,sans-serif;/* 字体 */line-height:1.6;/* 行高 —— 控制文字行间距 */text-align:center;/* 对齐left / center / right */color:#333;/* 文字颜色 */text-decoration:none;/* 下划线none去下划线 / underline */}/* 电商常用文字样式 */.product-name{font-size:14px;color:#333;line-height:1.4;}.product-price{font-size:20px;font-weight:bold;color:#ff4400;}.original-price{font-size:12px;color:#999;text-decoration:line-through;/* 删除线 */}.shop-name{font-size:12px;color:#666;}5. 盒模型重中之重盒模型是 CSS 里最重要的概念没有之一。不理解盒模型写出来的页面布局就是乱的。5.1 每个 HTML 元素都是一个盒子盒模型从内到外 ┌─────────────────────────────────────┐ │ margin外边距 │ │ ┌───────────────────────────────┐ │ │ │ border边框 │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ padding内边距 │ │ │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ 内容区域 │ │ │ │ │ │ │ │(width / height)│ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────┘ │ │ │ │ │ │ │ └───────────────────────────────┘ │ │ │ └─────────────────────────────────────┘5.2 四个组成部分.product-card{/* 内容区域 —— 放文字、图片 */width:280px;height:360px;/* padding —— 内容 与 边框 之间的距离≈ 手机屏幕的黑边 */padding:16px;/* 简写上 右 下 左 */padding:12px 16px 12px 16px;/* 简写上下 左右 */padding:12px 16px;/* border —— 边框 */border:1px solid #eee;/* 细看border: 粗细 样式 颜色 */border:2px dashed #ddd;/* 虚线边框 */border-radius:8px;/* 圆角 ★★★ 非常常用 *//* margin —— 盒子 与 其他盒子 之间的距离 */margin-bottom:16px;margin:0 auto;/* 水平居中 */}5.3 电商示例/* 商品卡片 */.product-card{width:240px;padding:12px;border:1px solid #eee;border-radius:8px;margin-bottom:16px;}/* 购物车商品项 */.cart-item{display:flex;padding:16px 0;border-bottom:1px solid #f0f0f0;margin-bottom:0;}/* 订单卡片 */.order-card{padding:20px;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px;background:#fff;}5.4 魔鬼细节盒子大小计算关键问题width: 200px是指内容区域 200px还是整个盒子含 padding border200px默认box-sizing: content-box整个盒子宽度 width padding-left padding-right border-left border-right这意味着如果设置了width: 200px; padding: 20px; border: 1px整个盒子实际宽度是 242px。实践中几乎永远用 border-box/* ★★★ 几乎所有项目都会在第一行写这个 */*{box-sizing:border-box;}border-box的意思是width: 200px表示整个盒子含 padding border一共 200px内容区域自动压缩。符合直觉。/* 用 border-box 后 */.card{width:200px;padding:20px;border:1px solid #eee;/* 整个盒子 200px内容自动缩成 158px */}6. 背景与边框6.1 背景.banner{background-color:#f5f5f5;/* 背景颜色 */background-image:url(images/banner.jpg);/* 背景图片 */background-size:cover;/* 覆盖整个区域 */background-position:center;/* 居中 */background-repeat:no-repeat;/* 不重复 *//* 简写 */background:#f5f5f5url(banner.jpg)no-repeat center/cover;}6.2 边框/* 基础边框 */.product-card{border:1px solid #eee;}/* 只加底部边框电商列表项常用 */.cart-item{border-bottom:1px solid #f0f0f0;}/* 圆角 ★★★ */.avatar{border-radius:50%;}/* 圆形 */.button{border-radius:4px;}/* 小圆角 */.card{border-radius:12px;}/* 大圆角 *//* 阴影 ★★★ —— 让元素浮起来 */.card{box-shadow:0 2px 8pxrgba(0,0,0,0.1);/* 顺序水平偏移 垂直偏移 模糊半径 颜色 */}7. Flexbox 布局入门Flexbox 是目前最主流的 CSS 布局方式你的项目里大量使用了el-row/el-col底层就是 Flexbox。7.1 核心概念/* 容器上写 display: flex子元素自动变成弹性项沿水平排列 */.container{display:flex;/* 开启 Flexbox */}开启前块级元素默认上下排列 ┌──────┐ │ A │ ├──────┤ │ B │ ├──────┤ │ C │ └──────┘ 开启后变成左右排列 ┌──────┐┌──────┐┌──────┐ │ A ││ B ││ C │ └──────┘└──────┘└──────┘7.2 容器属性.nav-bar{display:flex;/* 主轴方向row默认水平| column垂直 */flex-direction:row;/* 水平对齐 ★★★ */justify-content:center;/* 居中 */justify-content:space-between;/* 两端对齐导航栏最常用 */justify-content:flex-start;/* 左对齐默认 */justify-content:flex-end;/* 右对齐 *//* 垂直对齐 ★★★ */align-items:center;/* 垂直居中 */align-items:stretch;/* 拉伸到一样高默认 */align-items:flex-start;/* 顶部对齐 *//* 换行 */flex-wrap:wrap;/* 放不下了自动换行 */}7.3 电商布局示例/* 导航栏Logo 在左菜单在右 */.nav-bar{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:60px;background:#fff;box-shadow:0 1px 4pxrgba(0,0,0,0.08);}/* 商品列表一行四个自动换行 */.product-grid{display:flex;flex-wrap:wrap;gap:16px;/* ★★★ 子元素间距不用 margin */}.product-grid .product-card{width:calc(25% - 12px);/* 一行四个 */}/* 购物车项图片在左信息在右删除按钮在右 */.cart-item{display:flex;align-items:center;padding:16px 0;}.cart-item .item-info{flex:1;/* ★★★ 占据剩余所有空间 */margin-left:12px;}.cart-item .item-price{width:100px;text-align:right;}/* 商品详情标签垂直居中排列 */.product-tags{display:flex;align-items:center;gap:8px;}.product-tags .tag{padding:2px 8px;background:#fff0e6;color:#ff4400;border-radius:4px;font-size:12px;}7.4 子元素属性/* ★ flex: 1 —— 占据剩余空间极其常用 */.sidebar{width:200px;}.main-content{flex:1;}/* 填满右侧所有剩余空间 *//* 其他 */.item{flex-shrink:0;}/* 不让它缩小 */.item{order:-1;}/* 排到最前面 */8. DevTools 调试 CSS8.1 查看样式打开 DevToolsF12→ Elements 面板右侧 Styles 子面板显示这个元素的所有样式从哪来的被谁覆盖了打勾/取消勾选样式前面的复选框 → 即时看到效果双击属性值 → 修改 → 实时生效8.2 查看盒模型在 Elements 面板右下角找到Box Model区域┌─────────────────────────────────────┐ │ margin: 16px │ │ ┌───────────────────────────────┐ │ │ │ border: 1px │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ padding: 12px │ │ │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ 240 x 320 │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ └─────────────────────────┘ │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘你可以直接在这个图上点击数字修改 margin / padding / border。8.3 实用技巧1. 选中元素 → 看右侧 Styles 面板 → 看是哪个属性导致的问题 2. 勾选/取消样式复选框 → 快速排查哪个样式生效了 3. 点击元素 → 看 Computed 面板 → 看最终计算值 4. 盒模型图 → 直接点数字改 padding/margin9. 常见陷阱陷阱 1忘了写box-sizing: border-box/* ❌ 默认 content-boxwidth 不算 padding */.card{width:200px;padding:20px;}/* 实际宽 240px *//* ✅ 几乎所有项目都会在第一行加这个 */*, *::before, *::after{box-sizing:border-box;}陷阱 2margin 重叠两个盒子上下排列上面的margin-bottom: 20px下面的margin-top: 30px它们之间的间距是30px取较大值不是 50px。/* 解决只用 margin-bottom 不用 margin-top */.card{margin-bottom:16px;}陷阱 3不理解块级 vs 行内/* span 是行内元素width 和 height 不生效 */span{width:200px;height:100px;}/* ❌ 没用 *//* 改成行内块级或块级 */span{display:inline-block;width:200px;}/* ✅ */span{display:block;width:200px;}/* ✅ */陷阱 4选择器写得太长/* ❌ 又长又脆弱 */div.container ul li a.link{color:blue;}/* ✅ 直接用 class */.nav-link{color:blue;}陷阱 5用 px 写死一切/* ❌ 固定宽度 */.sidebar{width:200px;}/* ✅ 灵活方案 */.sidebar{width:25%;}/* 或 */.container{display:flex;}.sidebar{flex:0 0 200px;}.content{flex:1;}附CSS 属性速查/* 文字 */font-size:14px;font-weight:bold / 700;font-family:PingFang SC,sans-serif;color:#333;text-align:center / left / right;text-decoration:none / underline / line-through;line-height:1.6;/* 盒模型 */width /height:200px / 50% / auto;padding:12px 16px;/* 上下 左右 */margin:16px 0;/* 上下 左右 */border:1px solid #eee;border-radius:8px;/* 圆角 */box-shadow:0 2px 8pxrgba(0,0,0,0.1);/* 背景 */background-color:#fff;background:#f5f5f5url(bg.jpg)center/cover no-repeat;/* 布局 */display:flex / block / inline / inline-block / none;/* Flexbox ★★★ */display:flex;justify-content:center / space-between / flex-start / flex-end;align-items:center / stretch / flex-start / flex-end;flex-wrap:wrap;gap:16px;flex:1;/* 占满剩余空间 */