零基础学习CSS(15)——元素尺寸

Dragon水魅

发布于 2026-01-23 19:05:25

1030

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

box-sizing：https://man.ilovefishc.com/pageCSS3/box-sizing.html overflow：https://man.ilovefishc.com/pageCSS3/overflow.html resize：https://man.ilovefishc.com/pageCSS3/resize.html

使用 box-sizing 自适应边框尺寸：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        img {
            width: 240px;
            height: 240px;
            padding: 20px;
            border: 20px double pink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <img src="Pig.png" alt="pig">
</body>
</html>

通过 min-width 和 max-width 设置元素最小尺寸和最大尺寸，可以有效的解决当浏览器尺寸小于 width 时，内容显示不完全的问题。

通过 overflow 解决元素溢出问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        p {
            width: 300px;
            height: 100px;
            border: 2px solid pink;
            overflow: auto;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim debitis delectus tempore ipsum dolor voluptate mollitia, dolore at eaque aliquam iusto vitae, excepturi consequatur doloremque deleniti soluta quibusdam ab eum!</p>
</body>
</html>

通过 resize 指定元素能够由用户改变大小：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        p {
            width: 300px;
            height: 100px;
            border: 2px solid pink;
            overflow: auto;
            resize: horizontal;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim debitis delectus tempore ipsum dolor voluptate mollitia, dolore at eaque aliquam iusto vitae, excepturi consequatur doloremque deleniti soluta quibusdam ab eum!</p>
</body>
</html>