对于html中div标签height属性的个人理解

对于没有系统学习过css的程序员来说，在编写css样式的时候，div的height属性值确实是个玄学的东西，我也感觉css确实挺玄学的，本文将介绍我对div标签height属性的个人理解，如有问题请指正。

在html中，div标签属于行级标签，最明显的特点是占一行，也就是width的值默认是100%，而height的值默认是inherit，并不是100%

当父div高度指定时

若子div高度不指定，则父div高度是根据子div中内容所需要的高度动态改变的。比如以下代码，在谷歌浏览器中渲染之后，父div高度指定为600px，子div高度动态赋值为21px

<div style="height: 600px;background-color: antiquewhite;"><div style="background-color: gray;">123</div>
</div>

若子div高度指定，且高度小于等于父div高度，则正常渲染，内容超出高度时会出现滚动条
若子div高度指定，且高度大于父div高度，子div高度超过父div的部分内容会溢出渲染，父div的高度也不会被撑开变大。如果想让子标签超出父div高度的内容隐藏，可以给父div添加overflow-y: hidden;样式

<div style="height: 50px;background-color: antiquewhite;"><div style="height: 100px;width: 50%;background-color: gray;"></div>
</div>

若想给父div增加内间距之后，剩余高度由子div继承，可以给子div的height值设置成100%，注意：父实际渲染的 height = padding-top + padding-bottom + border-top + border-bottom + 父指定height，并且从dom中获取父div的height，结果是父指定height，而不是实际渲染的height

<div id="demo" style="height: 200px;background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="height: 100%;background: #7bed9f;">123</div>
</div>

若子div存在两个，其中一个div高度指定，剩余的高度全部交给另一个div，可以使用calc()函数计算剩余子div的高度。注意：另一个div的height不能设置成100%，100%的height继承父div的height（200px)，此时这两个div的总height就会超过父height，然后内容溢出

<div id="demo" style="height: 200px;background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="height: 30px;background: #7bed9f;">123</div><div style="height: calc(100% - 30px);background: #dfe4ea;">456</div>
</div>

若父div高度想设置成屏幕高度，可以使用vh单位，vh相对于视口的高度，视口被均分为100单位，设置成height：100vh后，div的高度就是屏幕高度，又因为div的宽度默认时100%，所以此时该div盒子铺满整个屏幕。

当父div高度不指定时

若子div高度也不指定，则父div的高度取决于子标签的高度

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="background: #7bed9f;">123</div><div style="background: #7bed9f;">123</div>
</div>

若子div高度指定（非指定百分比），则父div的高度取决于子标签的高度

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="height: 40px;background: #7bed9f;">123</div><div style="height: 40px;background: #7bed9f;">123</div>
</div>

若子div的高度指定为百分比，则height设置无效，因为父div的height没有具体值。

<div id="demo" style="background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="height: 30%;background: #7bed9f;">123</div><div style="height: 30%;background: #7bed9f;">123</div>
</div>

在多级div中，比如一级div设置了具体的height，二级div未设置height，三级div的height的值设置成百分比，该百分比的height也是失效的，符合以上的情况。因为二级div未设置height的具体值，则二级div的高度取决于子标签中的内容所需要的高度，然后三级div在指定百分百高度之后，因为（父）二级div的height没有指定，则百分百height失效。
<div id="demo" style="height: 200px;background-color: antiquewhite;padding: 10px 0 10px 0 ;"><div style="background: #7bed9f;"><div style="height: 50%;background-color: #dfe4ea;">123</div></div>
</div>

对于html中div标签height属性的个人理解相关推荐

H5 中div标签及其属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g ...
html中div标签圈套,HTML中div标签和span标签的应用
HTML中div标签和span标签的应用发布时间:2020-06-16 18:09:16 来源:亿速云阅读:217 作者:元一一.div标签 DIV标签,称为区隔标记.作用是设定字.画.表格等的 ...
vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
html语言div怎么使用,什么是div标签？HTML中div标签怎么使用？
HTML中的div标签是实现网页的重要基础,是学习HTML知识必不可少的内容,本篇文章就来为大家介绍关于HTML中div标签的使用方法. 什么是div标签? div标签表示一组必要的结构.目的是将夹在 ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
Spring中bean标签的属性和值：
Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...
jsp中div 标签到底有什么用?
DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或 ...
html中a标签的属性
html中a标签的属性常用的有: href.rel.target. a标签没有像button的click事件,只能通过html的全局鼠标属性onclick 因此在vue中不能直接对a标签使用语法糖@ ...

对于html中div标签height属性的个人理解

对于html中div标签height属性的个人理解相关推荐

最新文章

热门文章