CSS+div：掌握常用标签与属性，打造精美页面

本文档主要介绍了CSS（层叠样式表）与div（文档片段）在网页设计中的常用标签和属性，重点关注于CSS中的长度单位、元素分类、颜色与背景处理。以下是对这些知识点的详细阐述： 1. CSS长度单位： - 绝对单位：CSS提供了一些基于物理尺寸的绝对单位，如in（英寸）、cm（厘米）、pt（点）和pc（派卡）。然而，由于网页设计更倾向于响应式和自适应，这些绝对单位在实际项目中使用较少。 - 相对单位：CSS推荐使用相对单位，其中em和ex是两个重要的相对单位。em表示元素字体大小的倍数，而ex则基于当前字体的x字符高度，但其值不易准确测量，通常近似为0.5em。px是最常用的像素单位，它直接对应屏幕上的物理像素。 2. 元素分类： - display属性用于设定元素的呈现方式，分为以下类别： - none：元素完全不显示在屏幕上。 - block：块级元素，如`<p>`、`<h1>`等，占据一行，并且可以包含其他块级元素。 - inline：内联元素，如`<a>`、`<em>`和`<span>`，不会换行，通常用于文本链接和小型文本装饰。 - list-item：列表项目元素，适用于`<li>`标签。 - 这些属性不能被子元素继承，需要明确地为每个元素指定。 3. 颜色与背景处理： - color属性用于设置文本颜色，支持多种颜色表示方式，如颜色名称（如red）、十六进制颜色代码（如#f00或#ff0000）、RGB/RGBA颜色值（如rgb(255,0,0)）以及百分比颜色值（如rgb(100%,0%,0%)）。 - background-color属性用来设定元素的背景颜色，同样接受上述各种颜色表示方法。背景颜色默认是无，但可以覆盖元素内容。 - background-image属性设置背景图片，通过`url()`函数引用外部图片资源。默认值为none，不显示背景图。 - background-repeat控制背景图片的重复方式，包括no-repeat（不重复）、repeat（均匀重复）、repeat-x（水平重复）和repeat-y（垂直重复）。 - background-attachment指定背景图片是否随页面滚动而移动，有fixed（固定）和scroll（滚动）两种状态。 通过理解并掌握这些CSS与div的基础知识，开发者可以有效地创建美观且功能丰富的网页布局和样式。在实际项目中，灵活运用这些属性能够实现各种复杂的网页设计效果。