尺寸样式属性介绍

属性 值 含义
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尺寸样式属性的更多相关文章

  1. 0010 CSS字体样式属性：font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  2. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  3. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  4. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  5. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  6. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  7. CSS 所有样式属性大复习

    1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径);    /*设置背景图片(默认)*/ background-attachment:fixed;     ...

  8. css clip样式 属性功能及作用

    clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...

  9. CSS哪些样式属性可以继承

    不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...

随机推荐

  1. 利用procedure批量插入数据

    正文   要求在页面查询到5000条数据,为了方便插入,准备用shell脚本写curl命令调用自己写的代码接口,但是速度慢,而且写的时候遇到点儿小问题,故用sql语句写了这个功能   由于operat ...

  2. 02-14 scikit-learn库之逻辑回归

    目录 scikit-learn库之逻辑回归 一.LogisticRegression 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LogisticRegressi ...

  3. vue3.0的安装使用

    关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vu ...

  4. idea破解版安装、配置jdk以及建立一个简单的maven工程

    idea破解版安装.配置jdk,配置jdk环境变量以及建立一个简单的maven工程 一.idea破解版以及配置文件下载 下载网址:https://pan.baidu.com/s/1yojA51X1RU ...

  5. 异常:微信小程序tabBar不生效

    app.json全局tabBar设置tabBar不显示 由于小程序的机制问题,首页的tabBar第一个导航必须是首页 "pages": [ "pages/index/in ...

  6. EF通过导航属性取出从表的集合后，无法删除子表

    主从表是配了级联删除的,如果通过导航属性去除从表明细删除时将报错The relationship could not be changed because one or more of the for ...

  7. 关于sqlmapapi一点记录

    关于sqlmapapi自己练习的还是很少 今天看见freebuf上师傅的分享的内容 自己练习了一下 来自: https://www.freebuf.com/articles/web/204875.ht ...

  8. [JOYOI1463] 智商问题

    题目限制 时间限制 内存限制 评测方式 题目来源 1500ms 131072KiB 标准比较器 Local 题目背景 各种数据结构帝~ 各种小姊妹帝~ 各种一遍AC帝~ 来吧! 题目描述 某个同学又有 ...

  9. SpringBoot项目配置Tomcat和JVM参数

    设置Tomcat端口号和连接数等 使用application.properties配置文件有一些参数无法设置,所以推荐创建一个类文件来配置,如下: package com.qipai.springbe ...

  10. php中转菜刀脚本过狗免杀

    <?php $target="url";//shell 地址 菜刀连这个脚本做中转 $post=''; $i=0; foreach($_POST AS $K=>$V) ...