对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 ...
随机推荐
- AcWing 289. 环路运输
传送门 思路: 一个环路上的问题,考虑拆环为链然后复制一倍接在后面.那么对于Ai与Aj,不妨设j<i,如果i-j>N/2则两者距离在新的链上就是i-j,而如果i-j<=N/2那么两者 ...
- 虚拟地址和物理地址(MMU)以及cache
最近非常忙,博客很乱也没有更新,这里随便记录点东西,周末有空整理下. cache是一个与CPU很近的高速存储器, 作用:提高内存的访问读写速度 cache属性是指对这部分虚拟地址的读写是使用cache ...
- go泛型教程
泛型 原文 在线阅读 导读: 约束 使用方法 实现原理 跟其它语言的泛型进行对比 用例子学泛型 issues 泛型需满足 go1.18+ 约束 go使用interface作为约束,约束的意思是约束了这 ...
- JZ-051-构建乘积数组
构建乘积数组 题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]A[1]...A[i-1]A[i+1]...A[n-1]. ...
- JZ-039-平衡二叉树
平衡二叉树 题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 在这里,我们只需要考虑其平衡性,不需要考虑其是不是排序二叉树 题目链接: 平衡二叉树 代码 /** * 标题:平衡二叉树 * 题目 ...
- GPT-3被超越？解读低能耗、高性能的GlaM模型
原创作者 | LJ GLaM: Efficient Scaling of Language Models with Mixture-of-Experts https://arxiv.org/pdf/2 ...
- VirtualBox虚拟机--桥接模式
问题概述:VirtualBox虚拟机设置桥接模式,与宿主机互相ping通. 注:如果按照以下方式设置了还是ping不通,查看虚拟机防火墙是否已关. 公司电脑拿去维修了,在自己家里电脑上部署项目开发环境 ...
- mysql-索引对性能影响
1.添加索引后查询速度会变快 mysql中索引是存储引擎层面用于快速查询找到记录的一种数据结构,索引对性能的影响非常重要,特别是表中数据量很大的时候,正确的索引会极大的提高查询效率.简单理解索引,就相 ...
- EasySwoole-ElasticSearch-Head启动
- centos7 安装mysql Package: akonadi-mysql-1.9.2-4.el7.x86_64 (@anaconda)
wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release ...