Dotcpp  >  编程教程  >  CSS语法  >  CSS 尺寸/宽高属性(width/height)

CSS 尺寸/宽高属性(width/height)

点击打开在线编译器,边学边练

CSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。

用于属性名CSS 版本
1. 元素的高度。(auto/长度值/ 百分比值) 。height1
(1)元素的最大高度。 (当最小高度 是最小, 高度超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) ) 。max-height2
(2)元素的最小高度。 (最小高度不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块)) 。min-height2
2. 元素的宽度。 (默认用于内容区,浏览器默认 auto/ 长度值/ 百分比值(父元素) )。width1
(1)元素的 最大宽度。 (无最大宽度值 none/ 长度值/ 百分比值 (包含块的内容区 width) )。max-width2
(2)元素的 最小宽度。 (当最小宽度 不是最小时,实际宽度 = 最小宽度 )。min-width2

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、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)