CSS高度和宽度尺寸

CSS尺寸属性

CSS的尺寸属性允许你控制元素的高度和宽度。

该元素具有100％的宽度。

的height和width属性用于设置一个元件的高度和宽度。

的height和width可以设置为自动（这是缺省值。也就是说，浏览器计算的高度和宽度），或在长度值来指定，例如px, cm等，或者以百分比(%)的包含块的。

这个<div>元素为100像素，高度为500像素的宽度。

注意： height和width属性不包括填充，边框，或利润率; 它们设置填充，边界内的区域的高度/宽度，以及该元件的余量！

下面的例子显示了一个<div>与100像素，高度为500像素的宽度元素：

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

的max-width属性用于设置一个元件的最大宽度。

的max-width可在长度值来指定，例如px, cm等，或者以百分比(%)的包含块的，或者设置为无（这是缺省值。也就是说，没有最大宽度）。

与这个问题<div>当浏览器窗口比元素（500像素）的宽度以上发生。浏览器然后添加一个水平滚动条到页面上。

使用max-width代替，在这种情况下，将提高的小窗口浏览器的处理。

提示：在浏览器窗口拖动到小于500像素宽，看到两个div的区别！

这个<div>元素为100像素，高度为500像素的最大宽度。

注：值max-width属性覆盖width 。

下面的例子显示了一个<div>与100像素，高度为500像素的最大宽度元素：

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

设置元素的高度和宽度
这个例子演示了如何设置不同元素的高度和宽度。

设置的图像使用百分之的高度和宽度
这个例子说明了如何使用一个百分比值以设置图像的高度和宽度。

设置最小宽度的元素和最大宽度
这个例子演示了如何设置最小宽度和使用像素值的元素的最大宽度。

设置最小高度和元素的最大高度
这个例子演示了如何设置一个最低高度，并使用像素值的元素的最大高度。