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

举例说明：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="wrapper">

    <div class="content"></div>

  </div>

</body>

</html>
  1. 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%;

}

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

  1. padding-height,margin-height

修改父容器宽度

.wrapper{

  height: 400px;

  width:400px;

  background: #ccc;

  display: block;

}


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

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

  1. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  2. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  3. CSS元素和文本垂直居中

    div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...

  4. 注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度

    定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...

  5. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  6. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  7. css 元素溢出

    css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...

  8. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  9. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

随机推荐

  1. JSR-303

    JSR-303是java标准的验证框架,已有的实现由 Hibernate validator 定义的注解验证bean属性: 空检查 @Null 验证对象是否为空 @NotNull 验证对象不为空 @N ...

  2. springboot2.0集成webSocket

    WebSocket和http的区别? http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要有三次握手才能发送信息. http链接分为短链接,长链接,短链接是每次请求都要三 ...

  3. java技术面试之面试题大全

    转载自:http://blog.csdn.net/lijizhi19950123/article/details/77679489 Java 面试知识点总结 本篇文章会对面试中常遇到的Java技术点进 ...

  4. MySQL的左连接查询，只取出最大的一条数据

    今天有个需求,是通过两张表进行查询.一对多的关系.通过一个主键,取出其中的一条.开始以为还好,直接用用了left join on进行查询.却发现了问题所在.其他的好弄.开始的写法借鉴这篇博客:http ...

  5. Java学习笔记【三、运算符、表达式、语句】

    运算符 算数运算符 /* / % ++ -- 关系运算符 == != > /< >= /<= 位运算符 &(按位与,有0是0,否则1) |(按位或,有1是1,否则0) ...

  6. win10编译maskrcnn benchmark

    步骤 1. 按照官网的Option1安装步骤安装 https://github.com/facebookresearch/maskrcnn-benchmark/blob/master/INSTALL. ...

  7. SQL语句复习【专题九】

    SQL语句复习[专题九] 视图:View视图的概念:视图是从若干基本表或其他视图构造出来的表.在创建一个视图时,只是存放的视图的定义,也即是动态检索数据的查询语句,而并不存放视图对应的数据在用户使用视 ...

  8. bootstap 表格自动换行 截取超长数据

    <table class="table" style="TABLE-LAYOUT:fixed;WORD-WRAP:break_word">

  9. kettle Spoon.bat闪退解决办法

    1.Java环境配置问题 java_home:D:\Program Files\Java\jdk1.7.0_25(安装jdk路径) classpath:.;%java_home%\lib\dt.jar ...

  10. MySQL之concat、concat_ws、group_concat

    concat(str1, str2, ...)  返回结果为连接一起的字符串. concat_ws(separator, str1, str2, ...) 同concat,但是可以指定连接符,sepa ...