html 边距等于父节点,css的百分比margin,padding为什么不是相对于父元素的？

假设inner把padding–top设为60%，那它的高度就等于上内边距，等于自身宽度的60%(因为它是block，宽度和父级宽度相等)，position设为relative。

把section元素的position设为absolute，宽高都是100%。那么它内部的元素内边距和外边距的百分比虽然相对于父级section的宽度，但因为section宽高比已知，可以换算出来。

假设我们要实现的h2元素margin-left是父级宽度的10%，margin-top是父级高度的10%。

代码如下：

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

}

.container{

width:500px;

}

.inner{

position:relative;

padding-top:60%;

background:#EEE;

}

section{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

h2{

width:80%;

height:80%;

margin:0;

margin-top:6%;//因为高度是宽度的60%，所以高度的10%就是宽度的6%

margin-left:10%;

background:#09C;

}

span{

display:block;

float:left;

width:50px;

height:30px;

border:1px solid #09C;

color:#FFF;

background:#333;

font-size:14px;

text-align:center;

line-height:30px;

}

结果：

中间那块区域(64个格子组成的长方形)的margin-top是高度的10%，margin-left是宽度的10%；

html 边距等于父节点,css的百分比margin,padding为什么不是相对于父元素的？相关推荐

CSS样式属性margin,padding详解
盒模型基本属性有两个:padding和margin. 以边框border为界,边框里面是内边距,边框外面是外边距. 一.外边距margin: 外边距是指边框以外与其他同级元素之间的距离,外边距可以控制 ...
jQuery获取父节点、子节点、兄弟节点
介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布. jQuery设计的宗 ...
coos字节点跟换父节点，retain用法
local _view = widgetMgr:show("USE_PROP_VIEW", self) --找到子节点_view:retain() --保持内存不是放_view:r ...
JS节点操作（1） - 父节点，子节点，兄弟节点
节点操作的作用获取元素通常使用的两种方式: 1. 利用DOM提供的方法获取元素 document.getElementById() document.getElementsByTagName() d ...
cocos子节点转父节点坐标原理浅析（局部坐标转世界坐标同理）
在CCNode的类中,有一个得到一个节点坐标系转换父亲坐标系的一个矩阵,节点内坐标乘以这个矩阵,就可以转换为在节点父节点中的坐标,方法名为: Mat4& Node::getNodeToPar ...
jQuery获取父元素及父节点的方法小结
这篇文章主要介绍了jQuery获取父元素及父节点的方法,结合实例形式总结分析了jQuery针对父元素及父节点操作的常用技巧,需要的朋友可以参考下本文实例总结了jQuery获取父元素及父节点的方法.分 ...
知方可补不足～CSS中margin,padding,border-style有几种书写规范
参考文章: http://www.w3school.com.cn 在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义 ...
html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式...
html5shive html5shiv主要IE6-8解决: 1,HTML5提出的新的元素不被IE6-8识别. 2,这些新元素不能作为父节点包裹子元素, 3,并且不能应用CSS样式.让CSS 样式应用 ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
html盒子距离上边距50px,css中的margin属性
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...

html 边距等于父节点,css的百分比margin,padding为什么不是相对于父元素的？

html 边距等于父节点,css的百分比margin,padding为什么不是相对于父元素的？相关推荐

最新文章

热门文章