CSS学习之浅谈尺寸样式属性(height和width属性)

CSS尺寸样式属性:height属性和width属性定义元素内容区的高度和宽度,在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这两个属性。

尺寸样式属性介绍#

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

height属性和width属性#

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

代码块

<!DOCTYPE html>
<html>

<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>

    </div>
</body>
</html>

效果图:

1.png

假设我们不给div标签设置宽度,会变成什么样呢?那咱们就试试看哦。

代码块

<!DOCTYPE html>
<html>

<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>

    </div>
</body>
</html>

结果图

2.png

为什么会这样呢?

其实是这样的如果我们没有给div标签设置宽度,div标签将会自动的占用父元素的百分百的宽度,注意的是:高度和宽度是不一样的哈,高度不会自动占用父元素的任何位置。

只有块级元素才可以设置宽高度。

本文转载自:https://www.cnblogs.com/lq0001/p/11854055.html

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是CSS学习之浅谈尺寸样式属性(height和width属性)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏