css 元素的竖向百分比设定是相对于容器的高度吗？
结论是，如果是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>- 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增大而变大，说明他们的百分比设定是相对于父容器的宽度
css 元素的竖向百分比设定是相对于容器的高度吗？的更多相关文章
- CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- CSS元素和文本垂直居中
div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...
- 注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度
定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
- css 元素溢出
css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
随机推荐
- 换发型app任性扣费？苹果app订阅任性扣费？怎么办？刚成功
2019年9月18日17:09:27 什么黑猫举报没用 先关闭订阅 账户中心自助申请试试,不通过再进行下面这步 https://getsupport.apple.com/?caller=home&am ...
- MFC 下调试 出现 warning : fail to load indicator string 0x0069
MFC 下调试 出现 warning : fail to load indicator string 0x0069 就是程序状态栏每一个标识列中至少有一个值没有初始值 或初始值为空 导致程序没有获取到 ...
- opencv 单目标模板匹配（只适用于模板与目标尺度相同）
#include <iostream> #include "opencv/cv.h" #include "opencv/cxcore.h" #inc ...
- 打印从1到最大的n位数(考虑大数问题)
void Print1ToMaxOfNDigits(int n) { if(n <= 0) { return; } int * number = new int[n]; for(int i = ...
- 【转】CnBlogs自定义博客样式
文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...
- 【Zabbix】分布式监控系统Zabbix【二】
一.Zabbix基本操作 1.主机群组.主机.模板.触发器 a.创建主机群组和主机的过程比较简单,不再介绍 b.配置模板: 创建一个模板,将其分组到Template组,添加配置应用: 给应用创建监控项 ...
- 鼠标悬停设置layui tips提示框
官方介绍:吸附层,灵活判断出现的位置,默认在元素的右侧弹出. layer.tips(content, follow, options) layer.tips(msg, '#id',{tips: 1}) ...
- mysql之使用json
从mysql 5.7开始才有 创建表(含有json类型) CREATE TABLE `emp_details` ( `emp_no` int(11) NOT NULL, `details` json ...
- 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key
当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...
- Mysql(三)-3:完整性约束
一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...