CSS宽度和高度

CSS 尺寸属性指的就是元素的宽度和高度属性,虽然说非常简单,但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-

width、max-height 和 min-height 等几个属性来设置元素的宽度和高度,这些元素使用起来非常简单,下面我们就来简单介绍一下。

1. width

通过 width 属性可以设置元素内容区的宽度,属性的可选值如下:

描述
auto 默认值,浏览器自动计算元素的实际宽度
length 使用具体数值配合 px、cm 等单位来定义宽度
% 定义基于父元素宽度百分比的宽度
inherit 从父元素继承 width 属性的值

提示:对于<img>标签来说,若仅指定 width 属性,那么它的 height 属性将根据原图片尺寸进行等比例缩放。

一般情况下 width 属性需要与 height 属性配合使用来同时定义元素的宽度和高度,因为某些元素没有默认的宽度或高度(或者宽度与高度默认为

0px),若不定义宽度或高度而且元素中又没有内容(子元素、文本等)时,这个元素的宽度或高度就会被设置为 0px,从外表看起来就像被压缩成了一条线。

【示例】使用 width 属性设置元素的宽度:

复制代码
<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            margin-top: 5px;

            margin-bottom: 5px;

        }

        div.box-one {

            /*为了能更直观的看出效果,这里为元素设置上边框和背景色*/

            border: 1px solid black;

            background: #CFF;

        }

        span {

            border: 1px solid red;

            background: #CCC;

        }

        div.box-two {

            border: 1px solid black;

            background: #CFF;

            width: 200px;

        }

        img.img-one {

            width: 100px;

        }

        img.img-two {

            width: 160px;

            height: 80px;

        }

    </style>

</head>

<body>

    <div class="box-one"></div>

    <span></span>

    <div class="box-two">width 属性</div>

    <img src="./css.png" class="img-one">

    <img src="./css.png" class="img-two">

</body>

</html>

运行结果如下图所示:

图:width 属性演示

2. height

height 属性用来定义元素内容区的高度,属性的可选值如下:

描述
auto 默认值,浏览器自动计算元素的实际高度
length 使用具体数值配合 px、cm 等单位来定义高度
% 定义基于父元素高度百分比的高度
inherit 从父元素继承 width 属性的值

提示:无论是 width 属性还是 height 属性,它们的值都不能设置为负数。

默认情况下,浏览器会将某些元素的宽度设置为 100%,例如`
`、`

`,而元素的高度则是根据元素中的内容来确定的,所以有些情况下您不必为元素设置固定的宽度或高度。

【示例】使用 width 和 height 属性设置元素的宽度和高度:

复制代码
<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            /*为了能更直观的看出效果,这里为元素设置上边框和背景色*/

            border: 1px solid black;

            background: #CFF;

            width: 300px;

            height: 100px;

        }

        p {

            border: 1px solid green;

            background: #CCC;

            width: 150px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div></div>

    <p></p>

</body>

</html>

运行结果如下图所示:

图:height 属性演示

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 属性的特性与之相似)

  • 当 max-width 属性的值小于 width 属性时,width 属性的值会被重新定义为与 max-width 属性相同的值;
  • 当 max-width 属性的值大于 width 时,max-width 属性将会被忽略;
  • 当 max-width 属性的值小于 min-width 时,max-width 属性将会被忽略。

【示例】使用 max-width 和 max-height 属性设置元素的最大宽度和高度:

复制代码
<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            /*为了能更直观的看出效果,这里为元素设置上边框和背景色*/

            border: 1px solid black;

            background: #CFF;

            max-width: 280px;

            max-height: 200px;

            width: 300px;

            height: 180px;

        }

    </style>

</head>

<body>

    <div>

        max-width: 280px;<br>

        max-height: 200px;<br>

        width: 300px;<br>

        height: 180px;

    </div>

</body>

</html>

运行结果如下图所示:

图:max-width 和 max-height 属性演示

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 属性的特性与之相似)

  • 当 min-width 属性的值小于 width 时,min-width 属性将会被忽略;
  • 当 min-width 属性的值大于 width 时,min-width 属性的值将被重新定义为与 min-width 属性相同的值;
  • 当 min-width 属性的值大于 max-width 时,max-width 属性将会被忽略。

【示例】使用 min-width 和 min-height 属性设置元素的最小宽度和高度:

复制代码
<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            /*为了能更直观的看出效果,这里为元素设置上边框和背景色*/

            border: 1px solid black;

            background: #CFF;

            min-width: 280px;

            min-height: 200px;

            width: 300px;

            height: 180px;

        }

    </style>

</head>

<body>

    <div>

        min-width: 280px;<br>

        min-height: 200px;<br>

        width: 300px;<br>

        height: 180px;

    </div>

</body>

</html>

运行结果如下图所示:

图:min-width 和 min-height 属性演示

原文地址CSS宽度和高度

相关推荐
江号软件分享44 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架