24、CSS布局与CSS3新特性全解析

CSS布局与CSS3新特性全解析

1. CSS布局基础

在网页设计中，使用CSS进行页面布局既是一门艺术，也是一项技术实践。无论从事网站建设多久，都需要不断学习何时使用浮动（floats）、绝对定位（absolute positioning），以及何时让文档自然流动。成功的布局往往是多种布局和定位技术的结合。

1.1 布局技术示例

• 浮动列布局 ：可以将其中一列设置为 position: relative ，而不设置相关的偏移属性，以便在该列内对其子元素进行绝对定位。
• 单栏布局 ：可以利用浮动元素打破堆叠块级元素的单调感。

通过尝试这些技术并研究网页上遇到的布局，可以解决大多数布局问题。

1.2 CSS属性控制

CSS属性可用于控制列表、链接、表格、轮廓和背景。还可以使用 :before 和 :after 伪类将样式表中的内容添加到文档中，包括文本、图像或文件内容。甚至可以使用 counter() 函数为任何元素添加自动编号或计数，并管理复杂的引号集。

1.3 @import和@charset规则

• @import规则 ：用于将其他样式表中的规则包含到当前样式表中，实现样式表的模块化，便于在不同网站上重用相同的规则。
• @charset规则