主题
CSS 常用属性（Day6 2/4）
本页对应 Day06_CSS，共 6 段视频，约 1 小时 14 分。
学习目标
- 能使用关键字设置
background-position，并解释单值设置时另一方向默认取center的规则。 - 能使用带单位的长度坐标设置背景图位置，说明坐标原点在元素左上角、Y 轴向下为正，并能预测负值和单值设置的效果。
- 能使用百分比设置背景图位置，并按“元素与图像分别建立坐标系、对应百分比点重合”的规则预测和验证
50% 50%、100% 100%等效果。 - 能区分
background-position与background-position-x、background-position-y在单值设置时的差异，并正确使用子属性控制水平或垂直位置。 - 能设置
background-attachment: fixed，说明其定位原点变为视口左上角，并实现“页面滚动、背景图不动”的效果。 - 能使用
background复合属性按任意顺序合并颜色、图像、重复、位置等子属性，并判断重复声明时仅最后一条生效。
知识点
回顾清单与代码
本节是基础回顾，目标不是背名词，而是把“单位/颜色—选择器—显示模式—字体文本属性”串成可检查的清单。转写稿中反复用“两个对比盒子—设宽高/内边距/边框—刷新看差异”来验证效果，这种调试方法同样适合复习基础点。另注意转写稿口误：box 常被转成 book、border 被转成“包der”、视口被转成“适口”，整理时应按标准写法记。
原笔记清单保留如下：
1. 长度单位和颜色设置方式
长度单位： px、em、%
颜色设置方式：颜色名、rgb()、HEX
2. CSS基本选择器
ID选择器
类名选择器
标签名选择器
全局选择器
3. 显示模式
inline、block、inline-block
display
4. 属性总结
4.1 字体样式
font-size、font-weight、font-style、font-family、font
4.2 文字颜色
color
4.3 文本样式
letter-spacing、word-spacing、text-indent、text-decoration、text-align
vertical-align一、长度单位和颜色设置方式
为什么需要： 页面里所有尺寸和颜色都要落到具体值上，单位选错、颜色写法不统一，后面的布局和主题维护都会乱。
怎么想： 先分清“绝对长度”和“相对长度”：px 直观稳定，em 受父级字号影响，% 受参照尺寸影响；颜色先记三种常用写法，再按可读性选择。
怎么做： 固定边框、间距可用 px；需要随字号缩放可用 em；宽度、容器占比可用 %。颜色名适合调试，rgb() 适合调透明度前的三通道，HEX 适合设计稿取色。
易错点： 不要把 % 当成“万能长度”，它依赖参照物；em 会继承父级字号，嵌套后容易算错；颜色值不要漏 #，rgb 三个值不要超范围。转写稿里“包der”应写 border，这类口误要按标准属性名纠正。
二、CSS基本选择器
为什么需要： 选择器决定“样式写给谁”，选错范围就会出现该变的没变、不该变的被污染。
怎么想： 先看结构：唯一标识用 ID，可复用的一组用类名，同类标签统一设置用标签名，清除默认样式用全局选择器；再考虑优先级和复用性。
怎么做： ID 选择器写 #id，类名写 .类名，标签名直接写标签，全局用 *。实际开发优先用类名，便于复用；ID 多用于锚点或唯一结构。
易错点： ID 不要大量复用；类名拼写、大小写要一致；全局选择器不要随意写重属性，容易影响所有元素。调试时可像转写稿那样先加边框、刷新对比，确认选择器是否命中。
三、显示模式
为什么需要： 元素是占一整行、跟文字同行，还是可设宽高，直接决定布局效果。
怎么想： 先判断元素在页面中的角色：标题/段落/容器通常 block，文字内元素通常 inline，需要同行又要宽高时用 inline-block；最后用 display 改。
怎么做： display:block 可设宽高、默认换行；inline 不换行但宽高常不生效；inline-block 不换行且可设宽高。用两个对比盒子设不同 display，刷新观察最直观。
易错点： inline 元素设宽高无效；inline-block 之间可能产生空白间隙；不要只改 display 而忽略原有 margin/padding。
四、属性总结
为什么需要： 字体、文字颜色和文本样式是页面可读性的基础，属性多但可按“字体—颜色—文本”分组记。
怎么想： 先定字体大小、粗细、风格、字族，再定颜色，最后调字间距、词间距、首行缩进、装饰线、对齐和垂直对齐。
怎么做： 字体样式用 font-size、font-weight、font-style、font-family，简写用 font；文字颜色用 color；文本样式用 letter-spacing、word-spacing、text-indent、text-decoration、text-align、vertical-align。
易错点： font 简写会重置未写子属性；text-align 管行内内容对齐，不是块级元素自身居中；vertical-align 主要作用于行内/表格单元格场景，别乱用在普通块布局上。复习时建议按转写稿的对比法：写两组元素、设边框、刷新看差异，再逐项注释验证。
先搭一个可对比的调试环境
本节笔记未附图片文件，下面用可复现代码保留转写中的“大图/小图”对比过程。
为什么需要：讲 background-position 时，如果只有一个盒子，很难判断“背景图比元素小”和“背景图比元素大”的差异。
怎么想：做两个同尺寸盒子，一个放小图，一个放大图；加背景色、边框、内边距，并先关闭重复。小图不重复时能看见空白区域，大图不重复时只能看见元素范围内的局部。
怎么做：
css
.box{
width:500px;
height:300px;
padding:20px;
border:2px solid #333;
display:inline-block;
vertical-align:top;
background-color:#ccc;
background-repeat:no-repeat;
}
.box1{ background-image:url("bg5.jpg"); } /* 小图 */
.box2{ background-image:url("bg4.jpg"); } /* 大图 */易错点：背景图默认会重复，若不写 no-repeat，小图会铺满，容易误判位置；位置属性调整的是“背景图在元素上的位置”，不是移动元素本身。
关键字设置 background-position
为什么需要：九宫格定位最直观，适合快速把背景图放到左上、右下、居中。
怎么想：横向关键字是 left/center/right，纵向是 top/center/bottom；两个值时先 X 后 Y；只写一个值时，另一个方向默认 center。关键字表示图像整体与元素对应边或中心对齐。
怎么做：
css
.k1{ background-position:right bottom; }
.k2{ background-position:center; }
.k3{ background-position:left; } /* 等价 left center */易错点：纵向中间是 center，不是 middle；只写 left 时 Y 不是 top，而是 center；大图超出元素的部分会被裁掉，只显示对应区域。
坐标设置 background-position
为什么需要：关键字只有九种组合，无法精确控制任意位置。
怎么想：以元素左上角为原点，X 向右为正，Y 向下为正；两个长度分别表示图像左上角的 X、Y 坐标。只写一个长度时，X 取该值，Y 默认 center，且这里的居中是把图像整体居中。
怎么做：
css
.c1{ background-position:100px 20px; }
.c2{ background-position:-100px 100px; }
.c3{ background-position:100px; } /* Y 为 center */易错点：坐标可以是负值；超出元素范围不可见；百分比不属于“长度坐标”，规则不同，不能混为一谈。
百分比设置 background-position
为什么需要：需要按比例定位，例如 50% 50% 让图像中心对准元素中心。
怎么想：元素和图像各自建立坐标系，百分比在各自坐标系中找到点，再让两个点重合。50% 50% 不是“图像左上角到元素中心”，而是“图像中心对元素中心”；100% 100% 是右下对右下。
怎么做：
css
.p1{ background-position:50% 50%; }
.p2{ background-position:20% 10%; }
.p3{ background-position:100% 100%; }易错点：最容易把百分比当成坐标长度；混搭时只对对应轴生效，实际开发中不必强行混搭。
background-position-x / background-position-y
为什么需要：有时只想单独调水平或垂直方向。
怎么想：x 子属性管水平，y 子属性管垂直；但只写一个子属性时，另一个方向保持默认状态，不等同于复合属性单值规则。
怎么做：
css
.s1{ background-position-x:100px; } /* Y 保持默认顶部 */
.s2{ background-position:100px; } /* Y 为 center */易错点：background-position:100px 与 background-position-x:100px 效果可能不同，调试时要看清另一个轴是否被默认值影响。
background-attachment: fixed
为什么需要：实现“页面滚动，背景图感觉不动”的效果。
怎么想：默认 scroll 随元素滚动；设为 fixed 后，背景定位坐标系原点从元素左上角变成视口左上角。但背景图仍属于元素，只有元素与背景图重合的区域才显示。
怎么做：
css
.section-bg{
height:300px;
background-image:url("bg5.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}易错点：不是背景图脱离元素；center 会变成视口中心，而不是元素中心；大图小图都只在元素范围内可见，滚动时元素经过背景图位置才显示。
background 复合属性
为什么需要：一次写颜色、图片、重复、位置，减少代码。
怎么想：background 可写任意子属性值，空格分隔，顺序不严格；但同一属性重复声明时，后一条会覆盖前一条，简写未写的子属性会被重置。
怎么做：
css
.book{
background:#ccc url("bg5.jpg") no-repeat right bottom;
}易错点：不要先写 background:#ccc，再写 background:url(...) no-repeat 还期望灰色保留；后一条简写会把未写出的颜色重置。调试时以最终生效的那条声明为准。
课堂画面
代码示例
示例一：使用关键字设置背景图像位置
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图像位置——关键字</title>
<style>
.book {
width: 500px;
height: 200px;
padding: 10px;
border: 2px solid #333;
display: inline-block; /* 两个盒子放到一行，方便对比 */
background-color: #ccc; /* 不重复的区域露出背景色 */
background-repeat: no-repeat;
}
.book01 {
background-image: url("./images/bg5.jpg"); /* 小图：192 × 80 */
}
.book02 {
background-image: url("./images/bg4.jpg"); /* 大图：1920 × 800 */
background-position: right bottom; /* 先水平后垂直 */
}
</style>
</head>
<body>
<div class="book book01">book01：小图</div>
<div class="book book02">book02：大图</div>
</body>
</html>关键行
background-position: right bottom;—— 两个关键字，第一个管 X 轴（left / center / right），第二个管 Y 轴（top / center / bottom）。background-repeat: no-repeat;—— 关掉重复，位置变化才看得清楚；开着重复时，调整位置后左侧、上方也会出现重复的图像。
易错点
- 只写一个关键字时，另一个方向默认是
center，不是top。写left等价于left center，写bottom等价于center bottom，写center等价于center center。 - 纵向居中关键字是
center，不是middle；这里和长度单位里的命名不统一，要死记。 - 关键字只有 3×3 = 9 种组合（四角 + 四边中点 + 正中心），想调更细的位置必须用坐标或百分比。
- 大图比元素大时，只能看到图像的一部分；超出元素的部分直接不可见，不用管它。
- 宽高 + padding + border 默认是 content-box，元素实际占位是 500+20+4 = 524px 宽。
示例二：使用坐标（长度）与百分比设置背景图像位置
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图像位置——坐标与百分比</title>
<style>
.item {
width: 500px;
height: 300px;
padding: 10px;
border: 2px solid #333;
display: inline-block;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url("./images/bg5.jpg");
}
/* 1. 两个长度：设置的是"图像左上角"在元素坐标系中的位置 */
.item1 { background-position: 100px 20px; }
/* 2. 只写一个长度：X = 100px，Y 默认 center */
.item2 { background-position: 100px; }
/* 3. 百分比：元素上的点 与 图像上的点 重合 */
.item3 { background-position: 50% 50%; }
/* 4. 子属性只设置 X：Y 不设置就保持默认 0（top），不是 center */
.item4 { background-position-x: 100px; }
</style>
</head>
<body>
<div class="item item1">长度坐标 100px 20px</div>
<div class="item item2">只写一个长度 100px</div>
<div class="item item3">百分比 50% 50%</div>
<div class="item item4">子属性 background-position-x: 100px</div>
</body>
</html>关键行
background-position: 100px 20px;—— 元素左上角是原点，X 轴向右为正，Y 轴向下为正，长度写的是图像左上角落在哪个坐标点。background-position: 50% 50%;—— 百分比走的是另一套规则：元素上建一个坐标系、图像上建一个坐标系，各自找到 50% 50% 那个点，然后点对点重合，效果等同于center center。background-position-x: 100px;—— 子属性只管一个方向，另一个方向不写就是默认值 0。
易错点
- 长度和百分比是两套完全不同的规则：长度定的是图像左上角的位置，百分比定的是点与点重合。百分比千万不要当长度来理解。
- 只写一个长度：X 是它，Y 默认
center；但只写background-position-x时，Y 是默认的 0（顶部）。这两者结果不一样，是本节最典型的坑。 - 坐标可以是负值，例如
-100px 100px表示图像左上角在元素左上角的左上方；超出元素区域的部分不可见。 - 百分比不要加
px之类的单位，写成50% 50%，两个值用空格分隔。 - 坐标和关键字可以混搭（如
right -50px、100px bottom），但实际开发中没必要，选一种写法保持统一即可。
示例三：背景图像固定与 background 复合属性
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图像固定 + 背景复合属性</title>
<style>
body { margin: 0; }
.section {
height: 400px;
background-color: #999;
}
.section-bg {
height: 300px;
background-color: #eee;
}
/* 写法一：拆开写，重点看 background-attachment */
.section-bg01 {
background-image: url("./images/bg5.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; /* 定位坐标系原点变成视口左上角 */
}
/* 写法二：复合属性，值可以任意顺序、任意数量，空格分隔 */
.section-bg02 {
background: #eee url("./images/bg4.jpg") no-repeat center fixed;
}
</style>
</head>
<body>
<div class="section"></div>
<div class="section-bg section-bg01"></div>
<div class="section"></div>
<div class="section-bg section-bg02"></div>
<div class="section"></div>
</body>
</html>关键行
background-attachment: fixed;—— 默认值是scroll（随元素滚动），设为fixed后，背景图定位的坐标原点从"元素左上角"变成"浏览器视口左上角"。background: #eee url("./images/bg4.jpg") no-repeat center fixed;—— 复合属性，颜色、图片、重复方式、位置、固定方式全部写在一起。
易错点
- 设成
fixed后背景图可能一开始"看不见"：图像固定在视口上，但背景图仍然只属于这个元素，只有图像与元素重叠的部分才显示，所以页面滚动到元素与图像重合时才会出现，滚过去又消失。 - 设置
fixed前必须先有background-image，没有背景图时这个属性毫无意义。 background复合属性会重置所有背景子属性。同一个元素写两条background，前面的那条完全不生效，浏览器只看最后一条——不是"先执行再执行"。- 复合属性里的多个值用空格分隔，顺序无所谓、数量也无所谓，可以只写颜色，也可以只写图片。
- 如果拆开写子属性，注意不要和复合属性混在同一规则里互相覆盖。
常见错误
现象：只写
background-position: left后，纵向位置与预期不符。
原因： 关键字只写一个值时，另一个方向默认取center，不是top。
修法： 明确写出第二个关键字，或按需改用坐标/百分比。现象：用
background-position: 100px时，纵向没有贴在顶部。
原因： 长度坐标只写一个值时，该值作为 X 坐标，Y 方向默认center。
修法： 需要顶部对齐时写成100px 0或100px top。现象：把
background-position: 20% 10%当成“图像左上角定位到元素 20% 10% 处”。
原因： 百分比不是普通长度坐标，而是元素上的百分比点与图像上的百分比点重合。
修法： 按“元素找点、图像找点、两点重合”检查效果；需要左上角坐标时改用长度。现象：设置
background-attachment: fixed后背景图突然看不见，滚动页面才出现。
原因： fixed 后定位坐标系变为视口左上角，但背景图仍受元素裁剪，只有图像与元素重合区域可见。
修法： 结合元素位置和视口重新设置background-position，或确认该场景是否真的需要 fixed。现象：调整位置时以为没生效，或看不出真实位置。
原因： 背景重复仍开启，重复图像干扰了对“原图位置”的判断。
修法： 调试位置时先设置background-repeat: no-repeat，再观察原图位置。现象：在同一个选择器里先写
background再写background，前面的颜色/图片被覆盖。
原因： 同一属性重复声明时，后写声明覆盖前写声明，不是逐项叠加。
修法： 合并为一条background复合声明，或改用对应子属性分别设置。
练习
- 写一个元素，设置小背景图且不重复，并分别用关键字把它定位到：右下角、正中心、右上角。
- 用长度坐标完成三个定位：
0 0、100px 20px、-50px 100px，观察超出元素部分是否可见。 - 用百分比完成
50% 50%、100% 100%、20% 10%三组定位，并说明每组中“元素点”和“图像点”的重合关系。 - 制作一个页面滚动时背景图看起来不动的效果，要求说明元素、视口、背景图三者位置关系，并解释为什么背景图只在元素区域内出现。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 使用关键字设置背景图像位置 | 14:37 |
| 2 | 使用坐标设置背景图像位置 | 15:42 |
| 3 | 使用百分比设置背景图像位置 | 13:28 |
| 4 | background-position的两个子属性 | 06:22 |
| 5 | 背景图像固定 | 20:09 |
| 6 | 背景复合属性 | 03:46 |
小结
background-position的关键字方案简单，但可表达的位置组合有限。- 长度坐标设置的是图像左上角在坐标系中的位置；只写一个长度时，Y 默认
center。 - 百分比定位不是左上角坐标定位，而是元素与图像各自取百分比点后重合。
- 关键字、长度、百分比可以混搭，但实际开发优先保持写法统一、便于维护。
background-position-x/y与复合属性单值行为不同，未设置的方向会取默认状态。background-attachment: fixed会改变定位坐标系，主要应用场景是“页面滚动、背景图视觉上不动”。background是自由度很高的复合属性，但同一选择器内重复声明会覆盖，调试位置时应先排除重复图像干扰。