CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

CSS 尺寸实例：

使用像素值设置图像的高度

本例演示如何使用像素值设置元素的高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img.normal 
  5. {
  6. height: auto
  7. }
  9. img.big 
  10. {
  11. height: 160px
  12. }
  14. img.small 
  15. {
  16. height: 30px
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <img class="normal" src="/i/eg_smile.gif" />
  23. <br />
  24. <img class="big" src="/i/eg_smile.gif" />
  25. <br />
  26. <img class="small" src="/i/eg_smile.gif" />
  28. </body>
  29. </html>

使用百分比设置图像的高度

本例演示如何使用百分比值来设置元素的高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img.normal 
  5. {
  6. height: auto
  7. }
  9. img.big 
  10. {
  11. height: 50%
  12. }
  14. img.small 
  15. {
  16. height: 10%
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <img class="normal" src="/i/eg_smile.gif" />
  23. <br />
  24. <img class="big" src="/i/eg_smile.gif" />
  25. <br />
  26. <img class="small" src="/i/eg_smile.gif" />
  28. </body>
  29. </html>

使用像素值来设置元素的宽度

本例演示如何使用像素值来设置元素的宽度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img
  5. {
  6. width: 300px
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <img src="/i/eg_smile.gif" />
  14. </body>
  15. </html>

使用百分比来设置元素的宽度

本例演示如何使用百分比值来设置元素的宽度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img
  5. {
  6. width: 50%
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <img src="/i/eg_smile.gif" />
  14. </body>
  15. </html>

设置元素的最大高度

本例演示如何设置一个元素的最大高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. max-height: 10px
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. <img src="/i/eg_smile.gif" />
  20. </body>
  21. </html>

使用像素值来设置元素的最大宽度

本例演示如何使用像素值来设置元素的最大高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. max-width: 300px
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. </body>
  19. </html>

使用百分比来设置元素的最大宽度

本例演示如何使用百分比值来设置元素的最大高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. max-width: 50%
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. </body>
  19. </html>

使用像素值来设置元素的最小高度

本例演示如何使用像素值来设置元素的最小高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. min-height: 100px
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. <img src="/i/eg_smile.gif" />
  20. </body>
  21. </html>

使用像素值来设置元素的最小宽度

本例演示如何使用像素值来设置元素的最小宽度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. min-width: 1000px
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. <img src="/i/eg_smile.gif" />
  20. </body>
  21. </html>

使用百分比来设置元素的最小宽度

本例演示如何使用百分比值来设置元素的最小宽度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p
  5. {
  6. min-width: 200%
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <p>这是一些文本。这是一些文本。这是一些文本。
  13. 这是一些文本。这是一些文本。这是一些文本。
  14. 这是一些文本。这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. 这是一些文本。这是一些文本。这是一些文本。</p>
  18. <img src="/i/eg_smile.gif" />
  20. </body>
  21. </html>

使用百分比设置行间距

本例演示如何使用百分比值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small {line-height: 90%}
  6. p.big {line-height: 200%}
  7. </style>
  8. </head>
  10. <body>
  12. <p>
  13. 这是拥有标准行高的段落。
  14. 在大多数浏览器中默认行高大约是 110% 到 120%。
  15. 这是拥有标准行高的段落。
  16. 这是拥有标准行高的段落。
  17. 这是拥有标准行高的段落。
  18. 这是拥有标准行高的段落。
  19. 这是拥有标准行高的段落。
  20. </p>
  22. <p class="small">
  23. 这个段落拥有更小的行高。
  24. 这个段落拥有更小的行高。
  25. 这个段落拥有更小的行高。
  26. 这个段落拥有更小的行高。
  27. 这个段落拥有更小的行高。
  28. 这个段落拥有更小的行高。
  29. 这个段落拥有更小的行高。
  30. </p>
  32. <p class="big">
  33. 这个段落拥有更大的行高。
  34. 这个段落拥有更大的行高。
  35. 这个段落拥有更大的行高。
  36. 这个段落拥有更大的行高。
  37. 这个段落拥有更大的行高。
  38. 这个段落拥有更大的行高。
  39. 这个段落拥有更大的行高。
  40. </p>
  42. </body>
  43. </html>

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small
  6.   {
  7.   line-height: 10px
  8.   }
  9. p.big
  10.   {
  11.   line-height: 30px
  12.   }
  13. </style>
  14. </head>
  16. <body>
  18. <p>
  19. 这是拥有标准行高的段落。
  20. 在大多数浏览器中默认行高大约是 20px。
  21. 这是拥有标准行高的段落。
  22. 这是拥有标准行高的段落。
  23. 这是拥有标准行高的段落。
  24. 这是拥有标准行高的段落。
  25. 这是拥有标准行高的段落。
  26. </p>
  28. <p class="small">
  29. 这个段落拥有更小的行高。
  30. 这个段落拥有更小的行高。
  31. 这个段落拥有更小的行高。
  32. 这个段落拥有更小的行高。
  33. 这个段落拥有更小的行高。
  34. 这个段落拥有更小的行高。
  35. 这个段落拥有更小的行高。
  36. </p>
  38. <p class="big">
  39. 这个段落拥有更大的行高。
  40. 这个段落拥有更大的行高。
  41. 这个段落拥有更大的行高。
  42. 这个段落拥有更大的行高。
  43. 这个段落拥有更大的行高。
  44. 这个段落拥有更大的行高。
  45. 这个段落拥有更大的行高。
  46. </p>
  48. </body>
  49. </html>

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. p.small
  6. {
  7. line-height: 0.5
  8. }
  9. p.big
  10. {
  11. line-height: 2
  12. }
  13. </style>
  14. </head>
  16. <body>
  18. <p>
  19. 这是拥有标准行高的段落。
  20. 默认行高大约是 1。
  21. 这是拥有标准行高的段落。
  22. 这是拥有标准行高的段落。
  23. 这是拥有标准行高的段落。
  24. 这是拥有标准行高的段落。
  25. 这是拥有标准行高的段落。
  26. </p>
  28. <p class="small">
  29. 这个段落拥有更小的行高。
  30. 这个段落拥有更小的行高。
  31. 这个段落拥有更小的行高。
  32. 这个段落拥有更小的行高。
  33. 这个段落拥有更小的行高。
  34. 这个段落拥有更小的行高。
  35. 这个段落拥有更小的行高。
  36. </p>
  38. <p class="big">
  39. 这个段落拥有更大的行高。
  40. 这个段落拥有更大的行高。
  41. 这个段落拥有更大的行高。
  42. 这个段落拥有更大的行高。
  43. 这个段落拥有更大的行高。
  44. 这个段落拥有更大的行高。
  45. 这个段落拥有更大的行高。
  46. </p>
  48. </body>
  49. </html>

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。