引入
“菜鸟警告！你的网页即将上演《变形计》大型真香现场”
"还在为网页长得像Excel表格而流泪？
以为调个颜色要改八百遍参数？
分分钟手滑把导航栏发射到外太空？🚀"
恭喜！您已获得CSS整形医院VIP挂号券💳：
👇接下来你将掌握——
-
用margin/padding给元素做丰胸瘦腰手术的财富密码 💃
-
让兄弟手拉手跳广场舞的Flex结界布置术 🕺
-
给按钮偷偷塞激素一秒拥有腹肌阴影的渐变黑科技 💪
-
如何用伪类把文字变成薛定谔的猫（悬停变色の量子力学） 🐱
抛弃枯燥理论池，这里是 “改残为美大型真人秀”实操台🎬
准备好从被div啪啪打脸到让浏览器喊爸爸的奇妙旅程了吗？
（温馨提示：接下来的代码可能在显示器上产生极度舒适反应✨）
1. 美颜语法の基本法则✨
使命宣言：
"我们不生产网页，我们是HTMLの私人造型师！"
语法：
CSS规则由两个主要部分构成：选择器，以及一条或者多条声明（样式）。
选择器 { 美容项目: 微调参数; /* 如隆鼻→加鼻影 */
黑科技: 整容方案; /* 如瘦脸→百分比缩放 */
}
🛎️ 菜鸟口诀：
✔️发型师（选择器）揪着标签耳朵操作
✔️每个美容项目用冒号: 订套餐
✔️做完一整套动作要用 分号; 打板
例如：
p{ /*选择了p标签*/
color:red; /* 修改了颜色属性，*/
font-size:30px; /* 修改了字体 */
}
2. CSS美颜三大邪术💥
① 纹身术（内联样式）（Inline Style）
<p style="给这个字纹个血红色；再打30px的瘦脸针">
甲方爸爸快夸我！ </p>
🚨风险提示：全身纹满代码的页面≈杀马特现场，所以我们最好不这么干哈。
② 面膜大法（内部样式）（Internal Style）
<head>
<style>
p { 磨皮: level max; /* color: white; */
换头: 韩式空气刘海; /* font-family: 'Courier New', Courier, monospace; */ }
</style>
</head>
color是给 p 标签中的文字选择颜色
font-family是字体，不需要记住有什么字体，打出来就有各种字体妃子任你选择
💡适用场景：小规模美容院（页面少时用）
③ 外挂技能包（外部样式表）（External CSS）
<link rel="请外援" href="明星造型师团队.css">
🌟优势：全站统一整容模板，省时省力不脱发！
在 HTML 的 <link> 标签中，rel 和 href 是两个关键属性，它们的作用和关系如下：
rel 属性 (Relationship)
-
作用：定义当前文档与被链接资源之间的关系。
-
核心意义：告诉浏览器这个资源是什么类型、用途是什么。
-
常见值：
stylesheet：链接的是 CSS 样式表。icon：链接的是网站图标（如 favicon.ico）。preload：指示浏览器预加载资源（如字体、脚本）。manifest：链接 Web App 描述文件（PWA 场景）。alternate：表示替代版本（如 RSS 订阅链接）。
-
必填性：必须存在，否则浏览器可能无法正确处理链接资源。
href 属性 (Hypertext Reference)
-
作用：指定被链接资源的路径（URL） 。
-
核心意义：告诉浏览器资源的具体位置。
-
特点：
- 可以是相对路径（如
css/styles.css）或绝对路径（如https://example.com/styles.css）。 - 必须指向一个真实存在的资源文件。
- 可以是相对路径（如
例如：
<link rel="stylesheet" href="test.css">
这一句就说明了引入文件与本文件的关系是：它是样式表stylesheet，地址是同文件下的test.css😜
3. 抓人指南：灵魂选择器大赏🔍
通缉令模式（全局选择器）
可以与任何元素匹配，优先级最低，一般做样式初始化
用法： *{ 内容 }
没错的孩子，就是一个 * 号 后面接着写就好了
* { margin: 0; /* 拒绝贴面舞 */
padding: 0; /* 脱掉默认秋衣 */ }
人脸识别模式（元素选择器）
可以选择HTML中的元素如p,b,div,a,img,body等。
用法：TagName{ 内容 }
img { 美颜: 柔光max; /* filter: blur(5px); */
体型: 九头身比例; /* aspect-ratio: 9/1; */ }
二次元角色扮演（Class选择器）
用法：.ClassName{内容}
<head>
<style>
.甜妹风 { 腮红浓度: 粉橘色系; /* background: #ffb3ba; */
萝莉音: 14px; /* font-size: 14px; */ }
</style>
</head>
<body>
<div class="甜妹风 腹黑属性">可盐可甜！</ div>
</body>
VIP身份证验证（ID选择器）
用法： #IdName{内容}
#全村的希望 { 镶金边: 3px solid gold;
发光特效: 赛博霓虹; }
社团招新海报（合并选择器）
语法： 选择器1，选择器2{
内容
}
两个选择器可以不同，选择器中间加个逗号就行了宝宝~
.header, .footer {
统一制服: 应援色应援棒； /* background: #应援色; */
应援口号格式: 荧光棒字体; }
4. 权力的游戏：样式霸权争霸战⚔️
江湖规矩：
1️⃣ 行内样式 ≈ 皇上手谕（权重1000）
2️⃣ ID圣剑 ≈ 尚方宝剑（权重100）
3️⃣ Class门派 ≈ 武林盟主令（权重10）
4️⃣ 元素标签 ≈ 村长口谕（权重1）
🔥 血泪教训实录：
/* 皇谕 vs 圣剑的对决 */
<div id="太子" style="color:red">最终显示血色文字！</div>
<style>
#太子 { color: blue } /* 虽贵为太子，难敌御批 */
</style>
这里是方便看所以这么写，
实际写的时候应该把< style >标签放入< head >标签中再在里面写样式，
< div >标签要在< body >标签中，
别被我这种写法带坏了哈，主播还不想吃紫蛋/(ㄒoㄒ)/~~
正确写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#太子 { color: blue }
</style>
</head>
<body>
<div id="太子" style="color:red">最终显示血色文字！</div>
</body>
</html>
关于使用汉字的问题🤓
我相信大家看到这里肯定有小伙伴儿要问了：”驻波主播！编程都用英语你怎么能用汉语呢！你这样用不会导致错误吗？！“
嘿！这问题就比那东直门老北京豆汁儿还地道~，在HTML中还真能这么写，是符合规则的，但是吧，我们一般不用，通用的还是英语，建议大家以后都用英语哈~么么么么😗
🎯 新手防坑锦囊：
⚠️ 不要给全村人都发VIP卡（滥用ID），会天下大乱
💡 Class就像微信昵称，随时可以换皮肤
✨ 用选择器玩"大家来找茬"，逐渐进阶整容主任！
（彩蛋：打开浏览器F12进入手术室直播，边操刀边学解剖学🩺）
5. 背景属性
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
<div class='box'>
</div>
.box{
width:300px;
height:300px;
background-color:palevioletred;
}
background-repeat属性
| 值 | 说明 |
|---|---|
| repeat | 默认平铺 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只想竖直方向平铺 |
| no-repeat | 不平铺 |
<div class='box'>
</div>
.box{
width:300px;
height:300px;
background-image:url("xx/xx/xx.jpg");
background-repeat:no-repeat;
}
background-size属性
| 值 | 说明 |
|---|---|
| length | 设置背景图片的宽度和高度，第一个是宽度，第二个是高度，如果只设置一个值，第二个值为auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个为高度，如果只设置一个，第二个值为auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 |
background-position属性
| 值 | 说明 |
|---|---|
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%，如果只指定了一个值，其他值默认是50%。默认是0% 0%。 |
| xpos ypos | 单位是像素 |
6. 文本属性
text-align
指定文本的对齐方式
| 值 | 描述 |
|---|---|
| left | 把文本居左排列，默认值 |
| center | 把文本排列到中间 |
| right | 把文本排列到右边 |
text-decoration
规定文本的修饰，上划线、下划线、删除线等
| 值 | 描述 |
|---|---|
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
text-transform
控制文本大小写
| 值 | 描述 |
|---|---|
| capitalize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
text-indent
用来规定文本块中首行文本的缩进
.p{
text-indent:50px;
}
温馨提示 负值是允许的，如果值是负数，将第一行左缩进
7. 表格属性
表格边框
table,td{
border: 1px solid black;
}
折叠边框
table{
border-collapse:collapse;
}
table,td{
border:1px solid red;
}
折叠后：
折叠前：
表格宽度和高度
width和height属性定义表格的宽度和高度
table{
width:100%;
}
td{
height:50px;
}
表格文字对齐
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式，向左，右，或中心
td{
text-align:right;
}
垂直对齐属性设置垂直对齐
td{
height:50px;
vertical-align:bottom;
}
表格填充
如果要控制表中的内容与边框的距离，应该用td和th元素的填充属性
td{
padding:15px;
}
表格颜色
下面的例子指定边框的颜色，th元素的文本和背景颜色
table,td,th{
border:1px solid green;
}
td{
background-color:green;color:white;
}
8. 选择器
8.1 关系选择器
后代选择器
选择所有被E元素包含的F元素，中间用空格隔开。
<style>
ul li{
color:red; /* 列表3也生效,只要li是ul的后代，就会生效*/
}
</style>
<ul>
<li>列表1</li>
<li>列表2</li>
<div>
<ol>
<li>列表3</li>
</ol>
</div>
</ul>
子代选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
<style>
div>p{
color:red; /*只有“你好”生效 */
}
</style>
<div>
<p>
你好
</p>
<ul>
<li>
<p>
我很好
</p>
</li>
</ul>
</div>
相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
<style>
h1+p{
color:red; /* First Element 变色 */
}
</style>
<h1>
h1元素
</h1>
<p>
First Element
</p>
<p>
Second Element
</p>
通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
<style>
h1~p{
color:red; /*h1后的所有p元素生效*/
}
</style>
<h1>
NONONO
</h1>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
🌟【第9话】盒子模型：你的网页“俄罗斯套娃”养成记🧸💰
9.1 拆快递の量子力学（盒子结构解密）
CSS的盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）
- Margin(外边距)-清除边框外的区域，外边距是透明的
- Border(边框)-围绕在内边距和内容外的边框
- Padding(内边距)-清除内容周围的区域，内边距是透明的(第一个值是上下，第二个值是左右)
- Content(内容)-盒子的内容，显示文本和图像
🎁 套娃四层觉醒：
1️⃣ 内容层（Content）
<!-- 本体：你买的迷你皮卡丘手办（必须露脸） -->
<div>皮卡皮卡！</div>
2️⃣ 少女防撞层（Padding）
padding: 20px; /* 用棉花糖裹住皮卡丘防碎 */
3️⃣ 钛合金外壳（Border）
border: 3px solid #电击黄; /* 假装是雷之石打造的笼子 */
4️⃣ 社交恐惧隔离带（Margin）
margin: 30px; /* 警告隔壁套娃：别贴太近我会漏电⚡ */
<style>
div{
height:100px;
width:100px;
padding:100px 50px;
margin:50px;
}
</style>
<div>
皮卡皮卡！！
</div>
Padding & Margin:设置的时候如果设置两个值，则第一个是上下，第二个是左右，如果只设置一个，则自动成为四个方向的值，也可以写：xx-left、xx-right、xx-top、xx-bottom分别设置
补充：
1.对于行级元素，margin-top和margin-bottom无效
2.对于行级元素，padding-top和padding-bottom显示上有效果但对周围元素没有影响，你也可以理解为无效
3.外边距合并：
当上下两个相邻的块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom+margin-top，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
4.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
学习内容来源：尚学堂&耕耕技术宅：
🚨 血泪教训区：套娃引发的宇宙BUG
案例一：
/* 危险操作！套娃膨胀引发星系坍塌 */
.boom-box { width: 100px; padding: 50px; /* 实际宽度=100+50*2=200px！ */}
破解咒语：
加上box-sizing: border-box;
（让padding和border变成内鬼，不再额外增加体积）
⚠拓展 box-sizing: border-box 的核心作用
1. 控制元素尺寸的计算方式
-
默认模式（content-box）
width和height仅表示内容区域的大小。 最终的元素总宽/高 =width/height+padding+border例：div { width: 100px; padding: 20px; border: 5px solid;}实际总宽度 = 100 + 20*2 + 5*2 = 150px
-
使用
border-box后width和height直接表示内容+padding+border的总和，内容区域自动收缩。div { box-sizing: border-box; width: 100px; padding: 20px; border: 5px solid;}实际总宽度始终固定为 100px 内容区宽度 = 100 - (20*2 +5*2) = 50px
注意：这一切和margin没有任何关系，仅仅和border及之内的各种属性有关系
2. 核心意义
避免意外撑大元素布局，尤其在以下场景：
- 当设置了固定
width/height，又需要添加padding或border时 - 响应式布局中按百分比分配宽度时（如多栏布局）
- 像素级精确还原设计稿，无需手动计算内容区尺寸
嘿嘿嘿，傻眼了吧老弟，这么多东西怎么记啊？别记了呗老弟，这些东西你了解一下就好，需要用的时候翻翻笔记就可以了，人生在世就活个自由自在，人生本来就是来体验一遭，如梦一场，来的时候带不来什么东西，走的时候带不走什么东西，别让自己身上的担子太重啦！
📦 结语：掌握盒子模型，解锁布局之力
本次「盒子模型」的探索，我们揭开了元素尺寸计算的底层逻辑。通过box-sizing: border-box，你已获得精确控制元素总宽高的能力，这是所有CSS布局的基石：
- 实战价值: 从此告别布局撑爆的玄学问题
- 开发效率: 少算10px=多摸1分钟鱼🐟（老板：？）
- 进阶预兆: 理解盒模型，才能征服
flex、grid等现代布局
🌟 下期预告
当传统布局陷入float地狱时…
《弹性盒子：解放布局生产力的终极奥义》即将揭晓！内容包括：
- 如何用
display: flex秒杀多栏布局 - 垂直居中从10行代码→1行黑魔法✨
- 清除浮动的 3种流派对决 → 告别
clearfix奇技淫巧
