CSS尺寸样式属性

2019-11-13 16:08:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS尺寸样式属性

尺寸样式属性介绍

属性 含义
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>
  • 结果图

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

原文链接:https://www.cnblogs.com/lq0001/p/11854055.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端之css(一)

下一篇:HTML连载49-清除浮动的第三种方式(内外墙法)