CSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。
1.height
(1)设置元素的高度:height 属性
高度:属性指定了一个元素的高度。
① 适用范围和对象:默认内容区
适用对象: 所有元素
除了 (不可替换的)行内元素 non-replaced inline elements, 表列 table columns, 列组 column groups
适用范围: 默认情况下,这个属性 决定的是内容区( content area)的高度。
② 改变适用范围:
如果将 box-sizing 设置为 border-box , 这个属性决定的将是 边框区域(border area)的高度。
③ 不适用 对象
行内 非替换元素: 会忽略这个属性。
行内元素:无法设置高度。
④ 属性值覆盖
min-height 和 max-height 属性会覆盖 height。
(2)高度的语法
height: auto|length|%|inherit;
含 实验中的属性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
/*关键字值Keywordvalue*/height:auto;/*长度值<length>values*/height:120px;height:10em;/*百分比值<percentage>value*/height:75%;/*全局关键字值Globalvalues*/height:inherit;height:initial;height:unset;
2. width
(1)设置元素的宽度: width 属性
① 适用区域
内容区: 默认情况下,它设置内容区域的宽度。
不包括: 在内容区 外面可以增加内边距、边框和外边距。
修改适用区域: 但是如果 box-sizing 设置为 border-box,它设置边框区域的宽度。
② 适用元素
所有元素,除了以下的元素
不适用元素: 除了 (不可替换的)内联元素 non-replaced inline elements、表行 table rows和 行组 row groups
行内 非替换元素,会忽略这个属性。
③ 覆盖
min-width 和 max-width 属性 可能会覆盖 width.
(2)宽度的语法
width: auto | length| %| inherit;
含实验中的属性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto;
/*长度值<length>values*/width:300px;width:25em;/*百分比值<percentage>value*/width:75%;/*关键字值Keywordvalues*/width:25emborder-box;width:75%content-box;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*全局值Globalvalues*/width:inherit;width:initial;width:unset;
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 属性的特性与之相似)
(1)当 max-width 属性的值小于 width 属性时,width 属性的值会被重新定义为与 max-width 属性相同的值;
(2)当 max-width 属性的值大于 width 时,max-width 属性将会被忽略;
(3)当 max-width 属性的值小于 min-width 时,max-width 属性将会被忽略。
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 属性的特性与之相似)
(1)当 min-width 属性的值小于 width 时,min-width 属性将会被忽略;
(2)当 min-width 属性的值大于 width 时,min-width 属性的值将被重新定义为与 min-width 属性相同的值;
(3)当 min-width 属性的值大于 max-width 时,max-width 属性将会被忽略。