CSS常用属性-3.3元素尺寸-1.width-height-2.min-width、min-height-3max-width、max-height

最新推荐文章于 2021-06-28 21:30:02 发布

say hi.

最新推荐文章于 2021-06-28 21:30:02 发布

阅读量876

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108180362

版权

1.宽度和高度
使用width属性定义宽度
使用height属性定义高度
属性值为 auto 、长度 150px 、百分比

2.最小宽度和最小高度（一个元素的下限，最低的值）
使用min-width属性定义最小宽度
使用min-height属性定义最小高度
【如果其宽高度，已经大于最小宽高，那就按照其该有的宽高显示呗】
例如
效果是100px
width:50px;
min-width: 100px;

效果是200px
width:200px;
min-width: 100px;

3.最大宽度和最大高度（一个元素的上限上边界，允许最大的值）
使用max-width属性定义最大宽度
使用max-height属性定义最大高度

咦？小例子：：
因为div 在没有设置宽度的情况下，块级元素，填满整个一行，所以，会超过设置的max-width最大(500px)宽度，所以，要应用设置的最大宽度即500px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>尺寸</title>
    <style>
        .text {
            background: yellow;
            /* width:200px;  */
            min-width: 100px;
            max-width: 500px;
            height: 50px; 
            min-height: 100px;
        }
    </style>
</head>
<body>
    <div class="text">华为云</div>
</body>
</html>

练习例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>尺寸</title>
    <style>
        .text {
            background: yellow;
            /* width:200px;  */
            min-width: 100px;
            max-width: 500px;
            /* height: 50px;  */
            /* height:500px ; */
            min-height: 100px;
            max-height: 200px;
        }
    </style>
</head>
<body>
    <div class="text">华为云</div>
</body>
</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用属性-3.3元素尺寸-1.width-height-2.min-width、min-height-3max-width、max-height

1.宽度和高度使用width属性定义宽度使用height属性定义高度属性值为 auto 、长度 150px 、百分比2.最小宽度和最小高度（一个元素的下限，最低的值）使用min-width属性定义最小宽度使用min-height属性定义最小高度【如果其宽高度，已经大于最小宽高，那就按照其该有的宽高显示呗】例如效果是100pxwidth:50px;min-width: 100px;效果是200pxwidth:200px;min-width: 100px;3.最大宽度和
复制链接

扫一扫