CSS 尺寸 (Dimension) · W3School HTML & CSS 教程

# CSS 尺寸 (Dimension) **CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。** ## CSS 尺寸实例： [使用像素值设置图像的高度](/tiy/t.asp?f=csse_dim_height) ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 160px } img.small { height: 30px } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比设置图像的高度](/tiy/t.asp?f=csse_dim_height_percent) ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 50% } img.small { height: 10% } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值来设置元素的宽度](/tiy/t.asp?f=csse_dim_width) ``` <html> <head> <style type="text/css"> img { width: 300px } </style> </head> <body> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比来设置元素的宽度](/tiy/t.asp?f=csse_dim_width_percent) ``` <html> <head> <style type="text/css"> img { width: 50% } </style> </head> <body> <img src="/i/eg_smile.gif" /> </body> </html> ``` [设置元素的最大高度](/tiy/t.asp?f=csse_dim_max-height) ``` <html> <head> <style type="text/css"> p { max-height: 10px } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值来设置元素的最大宽度](/tiy/t.asp?f=csse_dim_max-width) ``` <html> <head> <style type="text/css"> p { max-width: 300px } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> </body> </html> ``` [使用百分比来设置元素的最大宽度](/tiy/t.asp?f=csse_dim_max-width_percent) ``` <html> <head> <style type="text/css"> p { max-width: 50% } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> </body> </html> ``` [使用像素值来设置元素的最小高度](/tiy/t.asp?f=csse_dim_min-height) ``` <html> <head> <style type="text/css"> p { min-height: 100px } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值来设置元素的最小宽度](/tiy/t.asp?f=csse_dim_min-width) ``` <html> <head> <style type="text/css"> p { min-width: 1000px } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比来设置元素的最小宽度](/tiy/t.asp?f=csse_dim_min-width_percent) ``` <html> <head> <style type="text/css"> p { min-width: 200% } </style> </head> <body> <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比设置行间距](/tiy/t.asp?f=csse_dim_line-height_percent) ``` <html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> 这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 110% 到 120%。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。 </p> <p class="small"> 这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。 </p> <p class="big"> 这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。 </p> </body> </html> ``` [使用像素值设置行间距](/tiy/t.asp?f=csse_dim_line-height_pixel) ``` <html> <head> <style type="text/css"> p.small { line-height: 10px } p.big { line-height: 30px } </style> </head> <body> <p> 这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 20px。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。 </p> <p class="small"> 这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。 </p> <p class="big"> 这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。 </p> </body> </html> ``` [使用数值来设置行间距](/tiy/t.asp?f=csse_dim_line-height_number) ``` <html> <head> <style type="text/css"> p.small { line-height: 0.5 } p.big { line-height: 2 } </style> </head> <body> <p> 这是拥有标准行高的段落。默认行高大约是 1。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。 </p> <p class="small"> 这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。 </p> <p class="big"> 这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。 </p> </body> </html> ``` ## CSS 尺寸属性 CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。 | 属性 | 描述 | | --- | --- | | [height](/cssref/pr_dim_height.asp) | 设置元素的高度。 | | [line-height](/cssref/pr_dim_line-height.asp) | 设置行高。 | | [max-height](/cssref/pr_dim_max-height.asp) | 设置元素的最大高度。 | | [max-width](/cssref/pr_dim_max-width.asp) | 设置元素的最大宽度。 | | [min-height](/cssref/pr_dim_min-height.asp) | 设置元素的最小高度。 | | [min-width](/cssref/pr_dim_min-width.asp) | 设置元素的最小宽度。 | | [width](/cssref/pr_dim_width.asp) | 设置元素的宽度。 |