20、CSS 样式基础与布局模型

CSS 样式基础与布局模型

1. CSS 样式基础

在网页设计中，CSS 样式基础是至关重要的。以下是一些关键的知识点：
- 单位选择 ：CSS 中有绝对单位和相对单位之分。绝对单位如像素（px）、英寸（in）等，相对单位如 em、% 等。在不同的场景下，需要选择合适的单位。例如，在需要精确控制元素大小的情况下，可能会选择绝对单位；而在需要元素自适应页面大小的情况下，相对单位会是更好的选择。
- 常见属性 ：CSS 中有许多常见的属性，这些属性会对网站的外观和用户体验产生重要影响。
- 行高（line-height） ：行高在处理大而粗的下划线文本、诗歌或需要增加行间距的文本时非常有用。行高的取值可以是 “normal”，也可以是一个具体的值，这个值可以是正常行高的倍数，也可以使用 em、%、px 等单位。例如， line-height: 200%; 会将行高设置为正常行高的两倍。
- 颜色属性 ：选择颜色时，除了要考虑颜色的美观度，还需要考虑颜色的透明度（opacity）。不同的颜色和透明度设置会给网站访客带来不同的感受。
- 字体选择 ：字体的选择对网站的整体风格影响很大。例如，为殡仪馆的网站选择过于奇特的字体显然不合适。在选择字体时，需要考虑字体的可读性和与网站内容的适配性。

2. 练习示例

为了更好地掌握 CSS 样式基础，下面给出两个练习示例：

2.1 练习 1：使用单位样式化元