A21. CSS基础语法 长度属性值
1.1. 🌟 HTML元素通过style属性添加内联样式
为什么要有CSS？随着HTML的日渐成熟，人们的审美要求提高，
b、i等简单元素已经不能满足人们的需求。为此，人们创建了font元素，用于设置字体大小、颜色等（现已弃用），用center元素表示居中（现已弃用）。但人们很快发现，我们需要的样式（style）太多了，难道边距、边框、阴影、字体、动画……全都用HTML实现吗？这会导致HTML文件过于繁冗，内容与样式相互混杂，职责不够明确（即耦合）。
为了解决这个问题，引入一门新的语言——CSS（Cascading Style Sheet，层叠样式表）成为了最终的选择。
样式即style，与title类似，也是一个全局属性（Global Attribute），可以被用于几乎所有的HTML元素上。例如：
<div style="font-size: 32px;">Content</div>以上代码将div元素的字体大小（可以粗略理解为单字符的高度）设置为了32像素。
像这样，通过向元素的style属性中添加CSS属性，就是CSS最基础的使用形式。
需要注意的语法有以下几点：
- 每一条属性以英文分号
;结尾。 - 每一条属性内部分为属性名（name）和属性值（value），中间由英文冒号
:隔开，语法为name: value;。
WARNING
把分号写成中文符号（；）或者多条属性间不写分号会导致样式失效！
1.2. 🌟 px、em、rem是常见的长度单位
就像“物理量”是物理的基础，“属性值”就是CSS的基础。
物理量由数值+单位构成，属性值也类似。甚至，
10mm也是一个合法的CSS属性值。
我们已经学过，px（即像素，pixel）是计算机显示中最基础的单位。一般浏览器默认字体大小为 16px。
px是一种绝对的大小。除此之外，CSS提供了两种相对的大小，em 和 rem。em 源于排版术语，表示当前字体的尺寸；rem 是“root em”的缩写，表示相对于根元素（root element，即 <html> 元素）的字体大小。
以下是几个例子，读者可以查看效果，解释已写在注释之内（我们借用 font-size 即字体大小属性向大家演示）：
<!-- 示例1：使用px设置字体大小 -->
<p style="font-size: 24px;">这是一段24像素字体大小的文字</p>
<!-- 示例2：使用em设置字体大小 -->
<div style="font-size: 24px;">
<p style="font-size: 1.5em;">这是一段1.5倍于父元素字体大小的文字</p>
</div>
<!-- 示例3：使用rem设置字体大小 -->
<div style="font-size: 24px;">
<p style="font-size: 1.5rem;">这是一段1.5倍于<b>根元素</b>字体大小的文字</p>
</div>TIP
当下前端主流使用 rem 控制字体大小和宽高，达到较好的自适应效果。
主要因为 em 受父元素影响，层层嵌套较为复杂；px 决定了绝对尺寸，无法根据用户设置的浏览器默认字体大小进行精确控制。
1.3. font-size属性控制字体大小
在上一个例子里也已出现，
font-size如同其字面意义控制字体的大小。它的属性值一般为一个长度<length>。除此之外，还可以取<absolute-size>值，更加直观。
以下为 <length> 作为属性值：
<div style="font-size: 24px;">Text here</div>
<div style="font-size: 1.5rem;">Text here</div>
<div style="font-size: 1.5em;">Text here</div>以下为 <absolute-size> 作为属性值：
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;读者可以尝试上述属性值，查看效果。
1.4. 🌟 width属性与height属性控制部分元素的宽高
在任何用户界面（UI）开发中，我们最关心的就是元素显示的位置与大小。在计算机图形界面中我们常用一个宽（横向）为
width，高（纵向）为height的长方形描述一个元素在界面占用的空间。
注意：行内元素（如 <span>）的 width 和 height 不生效，对于其他元素大多生效。
使用例如：
<div style="width: 200px; height: 100px; background-color: skyblue;">
这是一个固定宽高的 div。
</div>TIP
对于确定宽高的元素（块级元素的宽度也是确定的，默认为其父元素的100%），子元素可以使用百分比值。例如：
<div style="width: 100%; height: 100px; background-color: skyblue;">
<div style="width: 75%; height: 50%; background-color: pink;">
</div>例题：添加一个 500x200 的元素，在内部嵌套一个宽度占 50%，高度为 5 倍根元素字体大小的元素。
注：颜色仅用于区分元素边界。
<div style="width: 500px; height: 200px; background-color: green;">
<div style="width: 50%; height: 5rem; background-color: blue;"></div>
</div>WARNING
在父元素高度不定的情况下，不能使用height: xx%;，这会导致浏览器计算陷入循环，而导致样式失效。
知识回顾
- CSS 通过
style属性添加内联样式，声明格式为属性: 值;。 px是绝对单位，em基于父级字体大小，rem基于根字体大小。font-size控制文字尺寸，支持关键字（如large）和长度值（如20px）。width/height对块级元素生效，可以使用长度值或百分比值。
课后练习
（单选）以下哪个单位不受父元素和根元素字体大小影响？ A.
pxB.emC.rem（填空）每一条CSS属性声明必须以____结尾。
（计算）父元素的宽度为
150px，子元素（块级元素）设置样式width: 50%;，则子元素的宽度为：____。（代码纠错）修复以下代码：
html<div style="width 300px; height=200px; background-color: blue">（探究）设置
width: 80vw;有什么奇特的效果？（情景分析）为什么设计师提供的设计稿通常使用px单位，而开发时建议使用rem？