CSSwidth和height（宽度和高度）

，而元素的高度则是根据元素中的内容来确定的，所以有些情况下您不必为元素设置固定的宽度或高度。

【示例】使用 width 和 height 属性设置元素的宽度和高度：

运行结果如下图所示：

3. max-width 和 max-height

max-width 和 max-height 属性分别用来设置元素内容区的最大宽度和最大高度。当定义了 max-width 和 max-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会小于等于 max-width 和 max-height 属性的值。max-width 和 max-height 属性的可选值如下：

以 max-width 属性为例：（max-height 属性的特性与之相似）

• 当 max-width 属性的值小于 width 属性时，width 属性的值会被重新定义为与 max-width 属性相同的值；
• 当 max-width 属性的值大于 width 时，max-width 属性将会被忽略；
• 当 max-width 属性的值小于 min-width 时，max-width 属性将会被忽略。

【示例】使用 max-width 和 max-height 属性设置元素的最大宽度和高度：

    


    

        max-width: 280px;

        max-height: 200px;

        width: 300px;

        height: 180px;
    

运行结果如下图所示：

4. min-width 和 min-height

min-width 和 min-height 属性用来设置元素内容区的最小宽度和最小高度，当定义了 min-width 和 min-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会大于等于 min-width 和 min-height 属性的值。min-width 和 min-height 属性的可选值如下：

以 min-width 属性为例：（min-height 属性的特性与之相似）

• 当 min-width 属性的值小于 width 时，min-width 属性将会被忽略；
• 当 min-width 属性的值大于 width 时，min-width 属性的值将被重新定义为与 min-width 属性相同的值；
• 当 min-width 属性的值大于 max-width 时，max-width 属性将会被忽略。

【示例】使用 min-width 和 min-height 属性设置元素的最小宽度和高度：

    


    

        min-width: 280px;

        min-height: 200px;

        width: 300px;

        height: 180px;
    

运行结果如下图所示：