对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 ...
随机推荐
- iredmail邮件系统离线搭建手册-从零到无
--时间:2020年10月20日 --作者:飞翔的小胖猪 概述 前言 iRedMail 是一个基于 Linux/BSD 系统的零成本.功能完备.成熟的邮件服务器解决方案.iRedMail 是一个开源. ...
- 《Symfony 5全面开发》教程03、使用Controller创建第一个页面
我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...
- RadioButtton
activity_radio_button.xml <?xml version="1.0" encoding="utf-8"?> <Relat ...
- Hive表数据同步到es
1.首先服务器节点,进入到对应的数据库.2. 然后找到要同步的表,show create table + 表名查看一下或者自己可以新建一个表,用来测试原表,如下 CREATE TABLE `wb_tm ...
- Arava: 用 swing 写一个取色器
备哥以前发我了一个小工具,TakeColor 取色器.来复刻一个吧. 分析一下:顶部是菜单,左侧框显示当前鼠标所在的颜色(下面显示当前坐标和颜色值,默认RGB),中间框显示鼠标周围区域,右侧显示取色的 ...
- MySQL-5.7.29解压版安装教程【全网最新】
作者:北顾箫 博客园地址:https://www.cnblogs.com/Aarom 1.下载解压 下载地址:https://downloads.mysql.com/archives/communit ...
- Control Flow in Tensorflow TF中的控制流解析
写在前面 本文翻译自Tensorflow团队的文章Tensorflow Control Flow Implementation,部分内容加入了笔者自己的理解,如有不妥之处还望各位指教. 目录 概览 控 ...
- Kubernetes系列(四) StatefulSet
作者: LemonNan 原文地址: https://juejin.im/post/6870071267438329869 Kubernetes系列(四) StatefulSet Kubernetes ...
- TypeError: put() missing 1 required positional argument: 'item'问题分析
今天博主在练习带参数线程池的时候与到了如下问题: 翻译过来,就是缺少位置参数. 一.错误1 如果此时你的代码高亮是这样: 解决办法:在init魔法方法下的Queue没有加括号,即 self.q = Q ...
- Net之线程池的优点
使用线程池的好处: 1.减少在创建和销毁线程上所花的时间以及系统资源的开销 2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".