CSS基础教程：DIV高度与高度控制

"这是一份关于DIV+CSS基础的教程，主要涵盖了CSS高度的设置和应用，适合初学者学习。" 在网页布局中，`DIV` 和 `CSS` 是不可或缺的元素，它们共同构成了网页的结构和样式。`CSS`（层叠样式表）允许我们精确地控制网页元素的外观和布局，包括元素的高度。本教程主要围绕`CSS`高度展开，讲解了如何设置和使用高度属性以及相关的技巧。 首先，`CSS` 高度是通过`height`属性来定义的，你可以为任何HTML元素设置高度，例如`<div>`。在实例中，`.yangshi{height:300px;}` 就将选择器`.yangshi`所代表的元素高度设定为了300像素。单位可以是像素（px）、百分比、em等，但最常见的还是像素单位。 除了基本的`height`属性，还有`max-height`和`min-height`属性。`max-height`用于限制元素的最大高度，当内容超过这个高度时，元素不再扩展。同样，`min-height`则规定了元素的最小高度，即使内容少于这个高度，元素也不会收缩到小于这个值。需要注意的是，这些属性在IE7及以上版本的浏览器中才得到支持。 在HTML中，我们可以直接在标签内设置`height`属性，如`<td height="100">`，但在`DIV+CSS`布局中，更推荐通过外部CSS文件或内部`<style>`标签来设置高度，这样可以更好地实现样式分离和复用。 接下来，教程介绍了`line-height`属性，它用于设置行内元素的行间距，也可以用来实现简单的垂直居中效果。如果设置`line-height`等于元素的高度，元素内的文本就会垂直居中显示。 在处理高度时，有一种常见的需求是使元素的高度自适应内容。默认情况下，如果不设置`height`属性，元素的高度会自动调整以适应其内容，这就是所谓的“自适应高度”。 然而，有时我们希望固定元素的高度，并隐藏超出这个高度的内容。这时可以使用`overflow:hidden`属性，如`.yangshi{height:50px; width:50px; overflow:hidden; border:1px solid #666;}`。这样的设置会使元素有一个固定的高度和宽度，当内容超出这个范围时，超出的部分不会显示，只显示在可视区域内。 这份`DIV CSS基础教程全攻略`详细地阐述了如何利用CSS来控制元素的高度，包括基本的`height`属性、`max-height`、`min-height`，以及`line-height`和`overflow`属性的使用。通过学习这些内容，初学者可以更好地掌握网页布局和样式设计的基本技能。