css 元素的竖向百分比设定是相对于容器的高度吗？

Sleepy 发布于2019-08-29 14:16 / 1391人阅读

摘要：结论是，如果是的话，是相对于容器高度，如果是则是相对于容器的宽度。

结论是，如果是height的话，是相对于容器高度，如果是padding-height,margin-height则是相对于容器的宽度。

举例说明：




  
  
  JS Bin

height

.wrapper{
  height: 400px;
  width:200px;
  background: #ccc;
  display: block;
}
.content{
  width:100px;
  height: 50%;
  background: red;
  margin-left: 10%;
  padding-top: 12%;
  margin-top: 10%;
}

从这个效果图看，小方块的高度确实是相对于容器的高度

padding-height,margin-height

修改父容器宽度

.wrapper{
  height: 400px;
  width:400px;
  background: #ccc;
  display: block;
}

对比前后两张图，内部方块的padding-height和margin-height分别随着父容器的width增大而变大，说明他们的百分比设定是相对于父容器的宽度

容器云相对于汇编语言程序相对于关于汇编语言程序相对于 js取元素相对位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113033.html

css 元素的竖向百分比设定是相对于容器的高度吗？

摘要：结论是，如果是的话，是相对于容器高度，如果是则是相对于容器的宽度。结论是，如果是height的话，是相对于容器高度，如果是padding-height,margin-height则是相对于容器的宽度。举例说明： JS Bin height .wrapper{ height: 400px; width:200px; b...

james 2019-08-01 18:25 评论0 收藏0
height:100%; 为什么不起作用

摘要：你知道为什么不起作用吗按常理，当我们用的属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按...

LiangJ 2019-08-30 10:58 评论0 收藏0
50道CSS基础面试题（附答案）

摘要：弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。偶数字号相对更容易和设计的其他部分构成比例关系。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本I...

wua_wua2012 2019-08-30 13:58 评论0 收藏0
CSS面试须知，哪些需要掌握得CSS技巧

摘要：首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。类似于优先级机制优先级最高，有他们在时，不起作用，值需要调整。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。偶数字号相对更容易和设计的其他部分构成比例关系。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + paddin...

wushuiyong 2019-08-30 11:24 评论0 收藏0
整理 45 道 CSS 基础面试题（附答案）

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 评论0 收藏0