19、CSS 布局：高度、宽度与浮动元素的运用

CSS 布局：高度、宽度与浮动元素的运用

在网页设计中，CSS 的高度、宽度属性以及浮动元素的运用是至关重要的，它们能够帮助我们创建出美观且实用的网页布局。下面将详细介绍这些属性的使用方法和注意事项。

1. 高度和宽度属性

高度（height）和宽度（width）属性是 CSS 盒模型的重要组成部分，用于为元素（如表格、列、横幅或侧边栏）分配尺寸。这些属性通常用于设置元素内容区域的高度和宽度。

1.1 设置高度和宽度

添加这些属性到样式中非常简单，只需在属性后面跟上 CSS 测量系统的单位即可。常见的单位有像素（px）、百分比（%）和 em。
- 像素（px） ：简单易懂，能创建固定的宽度或高度。例如：

width: 300px;
height: 200px;

• em ：与元素的文本大小相关。如果设置文本大小为 24px，那么 1em 就等于 24px。例如：

width: 2em; /* 如果文本大小为 24px，那么宽度为 48px */

• 百分比（%） ：宽度的百分比值基于元素包含元素的宽度，高度的百分比值基于包含元素的高度。例如：

width: 75%; /* 如果包含元素宽度