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

james 发布于2019-08-01 18:25 / 502人阅读

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

结论是，如果是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增大而变大，说明他们的百分比设定是相对于父容器的宽度

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

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

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

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

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

Sleepy 2019-08-29 14:16 评论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