欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS尺寸样式属性

程序员文章站 2023-08-24 14:50:10
尺寸样式属性介绍 属性 | 值 |含义 | | height| auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度|设置元素高度 width |同上|设置元素的宽度 height属性和width属性 接下来让我们进入 属性、 属性实践，笔者用 属性 ......

尺寸样式属性介绍

属性 值 含义
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>

  • 代码块

CSS尺寸样式属性

  • 假设我们不给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>

  • 结果图

CSS尺寸样式属性

  • 为什么会这样呢？其实是这样的如果我们没有给div标签设置宽度，div标签将会自动的占用父元素的百分百的宽度，注意的是：高度和宽度是不一样的哈，高度不会自动占用父元素的任何位置。
  • 只有块级元素才可以设置宽高度。

上一篇： 柳州中秋吃什么传统美食

下一篇： 桂圆泡水喝去皮吗

推荐阅读