CSS尺寸样式属性

来源：cnblogs　　作者：微笑是最初的信仰　　时间：2019/11/14 8:35:40　　对本文有异议

尺寸样式属性介绍

属性	值	含义
height	auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度	设置元素高度
width	同上	设置元素的宽度

height属性和width属性

接下来让我们进入height属性、width属性实践，笔者用class属性值为.box，给div标签设置宽度和高度以及div标签背景颜色。
代码块

<!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>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

代码块

假设我们不给div标签设置宽度，会变成什么样呢？那咱们就试试看哦。
代码块

<!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>
        .box{
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>