CSS属性学习:(三)尺寸-Dimension

widthmin-widthmax-widthheightmin-heightmax-height

width


类型: Dimension

默认值: auto

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-row, table-row-group之外的所有元素

取值

  • auto:无特定宽度值,取决于其它属性值
  • <length>:用长度值来定义宽度。不允许负值
  • <percentage>:用百分比来定义宽度。百分比参照包含块宽度。不允许负值

demo

See the Pen wWVRYj by yrq110 (@yrq110) on CodePen.


min-width


类型: Dimension

默认值: 0

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-row, table-row-group之外的所有元素

取值

  • <length>:用长度值来定义宽度。不允许负值
  • <percentage>:用百分比来定义宽度。百分比参照包含块宽度。不允许负值

demo

See the Pen XKvoyA by yrq110 (@yrq110) on CodePen.


max-width


类型: Dimension

默认值: none

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-row, table-row-group之外的所有元素

取值

  • <none>:无最大宽度限制
  • <length>:用长度值来定义宽度。不允许负值
  • <percentage>:用百分比来定义宽度。百分比参照包含块宽度。不允许负值

demo

See the Pen yJmwjz by yrq110 (@yrq110) on CodePen.


height


类型: Dimension

默认值: auto

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-column, table-column-group之外的所有元素

取值

  • auto:无特定高度值,取决于其它属性值
  • <length>:用长度值来定义高度。不允许负值
  • <percentage>:用百分比来定义高度。百分比参照包含块宽度。不允许负值

demo

See the Pen JRPoLo by yrq110 (@yrq110) on CodePen.


min-height


类型: Dimension

默认值: 0

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-row, table-row-group之外的所有元素

取值

  • <length>:用长度值来定义高度。不允许负值
  • <percentage>:用百分比来定义高度。百分比参照包含块宽度。不允许负值

max-height


类型: Dimension

默认值: none

取值: <length> | <percentage>

适用于: 除非置换内联元素,table-row, table-row-group之外的所有元素

取值

  • none:无最小高度限制
  • <length>:用长度值来定义高度。不允许负值
  • <percentage>:用百分比来定义高度。百分比参照包含块宽度。不允许负值

demo

See the Pen vXBEpy by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. width
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. min-width
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. max-width
    1. 3.1. 取值
    2. 3.2. demo
  4. 4. height
    1. 4.1. 取值
    2. 4.2. demo
  5. 5. min-height
    1. 5.1. 取值
  6. 6. max-height
    1. 6.1. 取值
  7. 7. demo
|