转载自：https://www.cnblogs.com/heyode/p/5973960.html

<body>

  <div class="wrap">

    <div class="content"></div>

  </div>

  <style>

  body {

    margin: 0;

    padding: 0;

  }

  .wrap {

    border: 1px solid black;

    width:800px;

  }

  .content {

    width: 500px;

    height:400px;

    background-color: aqua;

  }

  </style>

</body>

在这里，我们没有给wrap设高度，其默认值为auto。当height设为auto时，该标签的高度由其子标签的高度决定，即：子标签会撑开父标签。

而div标签宽度的默认值为100%. 如果，wrap不设width属性，

<body>

  <div class="wrap">

    <div class="content"></div>

  </div>

  <style>

  .wrap {

    border: 1px solid black;

  }

  .content {

    width: 500px;

    height:400px;

    background-color: aqua;

  }

  </style>

</body>

效果如下：

css中height, width默认值的更多相关文章

  1. CSS中vertical-align的默认值baseline的理解

    写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...

  2. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  3. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  4. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  5. struts2视频学习笔记 03-06（Struts 2配置文件无提示问题，Action配置中的各项默认值，各种转发类型）

    课时3 解决Struts 2配置文件无提示问题(eclipse):window→preference→XML→XML Catlog

  6. sqlserver中GUID的默认值设置

    sqlserver中GUID的默认值设置 YID uniqueidentifier not null default (NEWSEQUENTIALID()), //有序GUID(只能用于表设计的时候的 ...

  7. c++ 中bool 的默认值

    比如在Test.h中定义变量: _isFirst; //Test.h头文件 #ifndef __TEST_H__ #define __TEST_H__ class Test{ private: boo ...

  8. MySQL5.7中的sql_mode默认值

    简介 在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode 默认值的改变 optimizer_switc ...

  9. 弹窗中修改select默认值遇到的问题

    弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...

随机推荐

  1. git、gitLab、github区别

    git是一种版本控制系统,是一个命令.一种工具 gitlib是用于实现git功能的开发库 github是一个基于git实现的在线代码仓库,是一个网站,支持几乎所有git操作,可用于托管代码 gitla ...

  2. swoole--服务平滑重启

    参考来源:https://wiki.swoole.com/wiki/page/p-server/reload.html shell代码: echo "loading..." pid ...

  3. Add text to 'Ready Page' in Inno Setup

    https://stackoverflow.com/questions/1218411/add-text-to-ready-page-in-inno-setup

  4. js 之 for循环

    js之 for循环 普通for 循环 语法 for ([initialization]; [condition]; [final-expression]) statement initializati ...

  5. 【Linux常见命令】cat命令

    cat - concatenate files and print on the standard output cat 命令用于连接文件并打印到标准输出设备上. 用法: 1. cat file 查看 ...

  6. Elasticsearch: 权威指南 » 深入搜索 » 多字段搜索 » 多数字段 good

      跨字段实体搜索  » 多数字段编辑 全文搜索被称作是 召回率(Recall) 与 精确率(Precision) 的战场: 召回率 --返回所有的相关文档:精确率 --不返回无关文档.目的是在结果的 ...

  7. Clickhosue 强大的函数，argMin() 和argMax()函数

    说实话,我喜欢Clickhouse 的函数,简单操作,功能强大.今天需要给大家介绍两个函数,argMin(),argMax() 1.argMax():计算 ‘arg’ 最大值 ‘val’ 价值. 如果 ...

  8. Nakamori Akina

    听过中森明菜的歌以后,一直想写点什么.恰好前段时间看过她的一个访谈https://b23.tv/av13810011,节目里已经39岁左右的她看着已经有些衰老,但是那份属于她的天真却保持的很好. 节目 ...

  9. speedtest 测试服务器上传下载速度

    下载speedtest.py wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 赋予执行权限 ...

  10. andorid jar/库源码解析之Dagger/Dagger2

    目录:andorid jar/库源码解析 Dagger.Dagger2: 作用: 1.用于解耦Activity和业务逻辑 2.在使用业务的时候,不需要重复编写new代码. 3.当业务变化的时候,不需要 ...