CSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。
用于 | 属性名 | CSS 版本 |
1. 元素的高度。(auto/长度值/ 百分比值) 。 | height | 1 |
(1)元素的最大高度。 (当最小高度 是最小, 高度超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) ) 。 | max-height | 2 |
(2)元素的最小高度。 (最小高度不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块)) 。 | min-height | 2 |
2. 元素的宽度。 (默认用于内容区,浏览器默认 auto/ 长度值/ 百分比值(父元素) )。 | width | 1 |
(1)元素的 最大宽度。 (无最大宽度值 none/ 长度值/ 百分比值 (包含块的内容区 width) )。 | max-width | 2 |
(2)元素的 最小宽度。 (当最小宽度 不是最小时,实际宽度 = 最小宽度 )。 | min-width | 2 |
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
/* 关键字值 Keyword value */ height: auto; /* 长度值 <length> values */ height: 120px; height: 10em; /* 百分比值 <percentage> value */ height: 75%; /* 全局 关键字值 Global values */ 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%; /* 关键字值 Keyword values */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* 全局值 Global values */ 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 属性的可选值如下:
值 | 描述 |
none | 默认值,表示对元素的最大宽度或高度没有限制 |
length | 使用具体数值配合 px、cm 等单位来定义元素的最大宽度或高度 |
% | 定义基于父元素宽度和高度百分比的最大宽度或高度 |
inherit | 从父元素继承 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 属性的可选值如下:
值 | 描述 |
length | 使用具体数值配合 px、cm 等单位来定义元素的最小宽度或高度,默认值取决于浏览器 |
% | 定义基于父元素宽度和高度百分比的最小宽度或高度 |
inherit | 从父元素继承 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 属性将会被忽略。
本文固定URL:https://www.dotcpp.com/course/1142
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程