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

"这是一份关于DIV+CSS基础的教程，主要涵盖了CSS高度的设定和相关技巧，包括如何使用CSS设置对象的高度，如何实现高度自适应，以及如何处理固定高度并隐藏超出内容的情况。" 在网页设计中，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。本教程的核心是讲解如何使用CSS来控制元素的高度，这对于创建响应式和布局合理的网页至关重要。 1. **CSS高度**： CSS中的`height`属性用于指定元素的高度。例如，`height: 300px;`将设置选择器`.yangshi`的元素高度为300像素。单位可以是像素（px）、百分比、em等，但通常使用像素作为默认单位。此外，还可以使用`max-height`和`min-height`属性来限制元素的最大和最小高度，这两个属性在IE7及以上版本的浏览器中得到支持。 2. **CSS高度的自适应**： 当希望元素的高度根据其内容自动调整时，通常不需要显式设置`height`属性。默认情况下，如果未设定高度，元素的高度会自动适应其内容。这种自适应高度的方式对于动态内容和多行文本尤其有用。 3. **固定高度与隐藏超出内容**： 在某些场景下，可能需要设置元素的固定高度，并且当内容超过这个高度时，隐藏超出的部分。这可以通过组合使用`height`属性和`overflow`属性来实现。例如，`overflow: hidden;`会裁剪超出元素边界的内容。在这个示例中，`.yangshi`类的元素被设置为50px的高度，如果内容超过这个高度，超出部分将不会显示。 ```css .yangshi { height: 50px; width: 50px; overflow: hidden; border: 1px solid #666; } ``` 这段CSS代码将创建一个具有固定高度和宽度，且内容超出时会被隐藏的元素，同时有一个1像素的黑色边框以方便观察效果。 4. **HTML与CSS高度的对比**： 在HTML中，可以直接在元素内设置高度，如`<td height="100">`，但这种方式固定了高度且单位默认为像素。而在CSS中，我们可以更加灵活地控制元素的高度，包括设置自适应高度、最大最小高度，以及处理内容溢出的情况。 这份教程全面介绍了CSS在处理元素高度方面的基本概念和高级技巧，对于初学者来说是一份宝贵的参考资料。理解并熟练运用这些知识，能够帮助开发者创建更加美观、功能丰富的网页布局。