对height 100%和inherit的总结
对height 100%和inherit的总结
欢迎大家来我的博客留言：
https://sxq222.github.io/CSS%...
博客主页：
https://sxq222.github.io
正文：
之前看到一篇相关的文章：http://www.zhangxinxu.com/wor...
在看这个文章的demo时发现一些问题，下面来总结归纳一下:
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;;
}
.in{
background: #6aa;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}
</style>
</head>
<body>
<div class = 'outer'>
<div class = 'in full'>
</div>
</div>
<div class = 'outer'>
<div class = 'in inherit'>
</div>
</div>
</body>
</html>效果大致是这个样子：
其中，左边的是height 100%，右边的是height inherit。
下面我们进行一下改动：
<style>
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;;
}
.in{
position: absolute;
background: #6aa;
width:100px;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}
</style>其实就是给两个子元素加上绝对定位。效果如图：
我们发现，100%的元素的高度计算是相对于父元素的了。这也比较容易理解，因为绝对定位的元素，他的计算规则是相对于他最近的position不为static的元素。就算父元素未定位inherit也是相对于直接父元素进行高度计算的。
我们在outer上加上position relative 试一试：
.outer{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;;
}
看来确实是这样的，现在100%和inherit效果是一样的.
再对css进行改动：
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;
box-sizing: border-box;
}
.in{
background: #6aa;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}我们给父元素加上了boxsizing border box，让父元素的高度计算规则改变，下面看看效果：
我们看到 inherit元素的高度变成了父元素的高度，而100%的元素。
我们再给父元素加上padding：
.outer{
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;
box-sizing: border-box;
padding: 10px;
}效果图：
可以看到inherit的高度会与父元素的高度相等，而100%的高度会与父元素content相等。
下面我们给子元素加上绝对定位看看：
.outer{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;
box-sizing: border-box;
padding: 10px;
}
.in{
left: 0;
top: 0;
position: absolute;
width: 50px;
background: #6aa;
}
.full{
height: 100%;
}
.inherit{
height: inherit;
}效果图：
我们看到，当加上绝对定位时，100%的子元素的高度为：父元素的（content + padding），而inherit的高度就是等于父元素的border-box高度。
下面我们将父元素outer的borde -box 改回去：
.outer{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;
/* box-sizing: border-box; */
padding: 10px;
}效果图：
可以看到，inherit的高度变为父元素content-box的高度。
下面看一看固定定位：
.outer{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: #400;
border: 10px solid #444;
/* box-sizing: border-box; */
padding: 10px;
}
.in{
position: fixed;
width: 50px;
background: #6aa;
}
.full{
left:300px;
top: 0;
height: 100%;
}
.inherit{
left: 0;
top: 0;
height: inherit;
}
可以看到，inherit的高度还是等于父元素盒子模型的高度，而100%的高度变为了视口的高度。
总结
height:inherit的高度，总是等于父元素的盒子模型（content-box、border-box）的高度。
heighe:100%的高度，在文档流中，就等于父元素的content的高度。如果在绝对定位（脱离文档流）中，等于最近已定位父元素的content + padding的高度。在固定定位中，等于视口的高度。
下一步
目前只是阐述和总结了现象，还未解释原理，希望大神能在留言区指点一下。
一开始觉得自己很熟悉CSS的定位、盒子模型，但是现在发现很多东西都是不明白的，这方面的只是还需要深入理解。接下来需要继续学习CSS知识，弄明白这些现象背后的原因。
对height 100%和inherit的总结的更多相关文章
- height:100%与height：inherit的区别
一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...
- height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- 关于 iframe 在ie11 height:100% 无效的巨坑
好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...
- flex引起height:100%失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- height:100%不起作用（无效），div全屏
当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...
- 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
随机推荐
- drawable如何修改图片大小
这个问题刚开始遇到是导入图片太大,在网上找了许多教程大多都是采用setBounds()方法自己尝试许多次还是没成功,在经历了多达数个小时折磨后我找到两个方法1.在导入图片之前直接对图片进行修改大小.( ...
- Qt：QDir
0.说明 QDir提供了访问目录及目录下内容的类. QDir既可以用于访问文件系统,也可以用于访问Qt 资源系统(Qt's resource system.). Qt用 "/" 作 ...
- python3中map()函数用法
python源码解释如下:map(func, *iterables) --> map objectMake an iterator that computes the function usin ...
- Python 完美诠释"高内聚"概念的 IO 流 API 体系结构
1. 前言 第一次接触 Python 语言的 IO API 时,是惊艳的.相比较其它语言所提供的 IO 流 API . 无论是站在使用者的角度还是站在底层设计者的角度,都可以称得上无与伦比. 很多人在 ...
- 云e办笔记（删减）
1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...
- 源码安装Vim并配置YCM自动补全插件
Compiling Vim from source is actually not that difficult. Here's what you should do: 1. Install all ...
- Kubernetes：Ingress总结(二)
Blog:博客园 个人 参考:Ingress | Kubernetes.<Kubernetes进阶实战> Contour是Kubernetes Ingress控制器的另一款开源实现,它以高 ...
- Buffer 和 cache
要问Cache和Buffer的区别,首先要问另一个问题:为何会存在Cache和Buffer? 无论缓存还是缓冲,其实本质上解决的都是读写速度不匹配的问题,从这个角度,他们非常相似. 知乎上关于Cach ...
- CentOS Stream 8 安装 Zabbix6.0 -- LNMP环境（nginx-1.20，mariadb-10.6，php-7.4）
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 zabbix6.0 LTS版本出来了,前段时间刚安装了5.4,今天打算在虚拟机上安装6.0测试,安装6.0的要求php版本不低于7.2,mariad ...
- 【文件系统】dumpe2fs命令
dumpe2fs - dump ext2/ext3/ext4 filesystem information dumpe2fs prints the super block and blocks gro ...