元素尺寸设置

最新推荐文章于 2024-04-28 07:30:23 发布

_老杨_

最新推荐文章于 2024-04-28 07:30:23 发布

阅读量2.3k

点赞数

分类专栏：前端入门知识整理文章标签： css3 width height overflow max-height

本文链接：https://blog.csdn.net/evanyanglibo/article/details/121343860

版权

前端入门知识整理专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中如何设置元素的宽度和高度，包括数值设定、百分比设置、calc()计算方法以及自动尺寸的使用。同时，讲解了元素尺寸溢出时的处理方式，如overflow属性的设置，以及如何通过min-height和max-height控制元素尺寸的最小和最大值。此外，还强调了行内元素转换为行块级元素以应用width和height的重要性，并提醒在使用百分比设置时需确保父级元素有确定尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对网页样式的设置一个基本的需求就是对各元素的尺寸进行设置，设置元素的宽度和高度。

CSS提供了 width 属性和 height 属性分别进行宽度和高度的设置。

宽度和高度的值可以设置为确定的数值，也可以设置为百分比的形式，还可以使用 calc() 设置计算值。

1、数值设定

通过使用确定的数值加上单位的形式进行设置：

<html>
<head>
    <meta charset="utf-8">
    <title>CSS尺寸设置</title>
    <style type="text/css">
        div {
            border: 1px solid black;
        }
        .container {
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .item {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

页面效果：

其中 .container 和 .item 样式都使用确定的数值指定了元素的尺寸， width: 500px; 指定了元素宽度500像素。height: 500px; 指定了元素高度500像素。

CSS可使用的长度单位有很多，最常使用还是px(像素)。其他单位本篇不做介绍。

2、百分比设置

以百分比的方式设置元素的尺寸，将上述代码中 .item 选择器对应样式中的 width 和 height 都设置成 40%：

        .item {
            width: 40%;
            height: 40%;
            background-color: green;
        }

保存页面刷新可以看出 .item 元素的尺寸仍然是 200px 乘以 200px，即按照其父级容器的宽度和高度乘以对应设置的百分比。

3、calc方法计算

元素的尺寸也可通过calc方法进行计算，将上述代码中 .item 选择器对应样式中的 width 设置为 calc(40% + 50px);：

       .item {
            width: calc(40% + 50px);
            height: 40%;
            background-color: green;
        }

页面效果：

可以看出 .item 的元素的宽度为 250px，即上级元素的宽度 500px 乘以 40% + 50px。

calc()方法支持 “+”, “-”, “*”, “/” 运算

calc()方法使用标准的数学运算优先级规则

运算符前后都需要保留一个空格，示例中的“+” 两侧都保留有一个空格。

4、尺寸溢出

当子级元素的尺寸超出了父级元素的尺寸就会出现溢出现象，比如上诉代码如果再添加一个 .item 元素，则 .container 元素的尺寸就不足以容纳其子级元素的高度，可以称为 .container 元素发生了溢出：

可以看到，默认情况下子级元素超出了父级元素的范围，显示到了外面。

CSS可以对容器的溢出情况进行显示控制，设置的属性有：

overflow：同时针对水平方向和垂直方向进行设置。

overflow-x：只针对水平方向进行设置。

overflow-y：只针对垂直方向进行设置。

溢出设置可以设置的值有：

默认值visible：此时子元素会显示到父级元素外面，如上图所示。

auto：会自动比较子元素和父元素的尺寸判断是否出现滚动条进行滚动显示。

scroll：始终出现滚动条

hidden：隐藏子元素超出父元素尺寸的部分，不出现滚动条

inherit：从父元素继承对应值

上述代码可以为 .container 添加 overflow-y 设置：

        .container {
            width: 500px;
            height: 500px;
            background-color: red;
            overflow-y: auto;
        }

当设置 overflow-y: auto; 时页面效果：

此时减少一个子元素，页面就不会出现滚动条：

当设置 overflow-y: scroll; 时页面效果：

当设置 overflow-y: hidden; 时页面效果：

5、自动尺寸

可以通过设置元素 width 或 height 的值为 auto，使其拥有自动的宽度或高度，即宽度或高度自动跟随子级元素的尺寸而变化。当然也可以同时设置 width 和 height 为 auto 。

本篇只演示height设置为自动高度的情况：

<html>
<head>
    <meta charset="utf-8">
    <title>CSS自动尺寸</title>
    <style type="text/css">
        div {
            border: 1px solid black;
        }
        .container {
            width: 500px;
            height: auto;
            background-color: red;
        }
        .item {
            width: calc(40% + 50px);
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

页面效果：

可以看到父级元素的高度自动被子级元素的高度撑开，此时减少一个子级元素：

父级元素设置尺寸为auto时，可以设置对应方向尺寸的最大最小值：

min-height：设置元素的最小高度

max-height：设置元素的最大高度，根据此高度判断是否发生高度溢出

min-width：设置元素的最小宽度

max-width：设置元素的最大宽度，根据此高度判断是否发生宽度溢出

修改上述代码：

      .container {
            width: 500px;
            height: auto;
            min-height: 250px;
            max-height: 350px;
            overflow-y: auto;
            background-color: red;
        }

当包含两个子元素时，子元素高度和为200px，父元素高度为设置的min-height:250px;：