码迷,mamicode.com
首页 > Web开发 > 详细

CSS尺寸样式属性

时间:2019-11-14 00:17:45      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:meta   ati   pre   技术   alt   对象   div   The   为什么   

尺寸样式属性介绍

属性 含义
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标签将会自动的占用父元素的百分百的宽度,注意的是:高度和宽度是不一样的哈,高度不会自动占用父元素的任何位置。
  • 只有块级元素才可以设置宽高度。

CSS尺寸样式属性

标签:meta   ati   pre   技术   alt   对象   div   The   为什么   

原文地址:https://www.cnblogs.com/lq0001/p/11854055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!