一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时,却是不同的结果。

demo

  用如下小demo测试:

  <aside class="container">
<div class="test">
</div>
</aside>
    .container{
position: relative;
margin: 100px auto;
padding: 20px;
height: 100px;
width: 100px;
border : 10px solid green;
background-color: red;
} .test{
height: 20%;
width: 20%;
position: relative;
top:;
left:;
background-color: #000000;
}

  效果如下:

  

  子元素以父元素的content宽度100px为基准计算的20%为20px 且是以content为参考进行的偏移(虽然这里为0)

  若子元素position为absolute时,效果如下:

  此时子元素的百分比宽度是以 父元素的 padding + content的值进行计算的 为28px; 而且也是以padding为基础进行偏移的。

结论

  absolute元素的百分比宽高 计算时按照的包含块的 padding + content的值算的,偏移的参考也要加上padding那部分

  relative元素的百分比宽高 计算时按照的包含块的 content的值算的.

absolute和relative元素 设置百分比宽高的差异的更多相关文章

  1. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  2. 关于html中的设置body宽高的理解

    有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...

  3. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  4. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

  5. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  6. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. IE下元素设置百分比的问题

    场景:近两天在做一个控件,该控件是一个tab型的,并且该tab有可能是两个tab标签,也有可能是多个tab标签,为了能够适应这种动态需求, 在设置标签宽度的时候,直接用的最外层容器除以tab的个数,然 ...

  8. 关于百分比宽高div居中并垂直居中问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery获取元素的所有宽高(包括内边距和外边距)

    width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距).                    innerHeight() ...

随机推荐

  1. ACM/ICPC 之 靠墙走-DFS+BFS(POJ3083)

    //POJ3083 //DFS求靠左墙(右墙)走的路径长+BFS求最短路 //Time:0Ms Memory:716K #include<iostream> #include<cst ...

  2. Tomcat:利用Apache配置反向代理、负载均衡

    本篇主要介绍apache配置反向代理,介绍了两种情况:第一种是,只使用apache配置反向代理:第二种是,apache与应用服务器(tomcat)结合,配置反向代理,同时了配置了负载均衡. 准备工作 ...

  3. three.js初涉略(一)

    <!-- 最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1).边研究教程边做下记录 --> thre ...

  4. Hibernate反转维护

    //反转维护 @Test public void test4(){ Session ses=new Configuration().configure().buildSessionFactory(). ...

  5. javascript原型链简单的理解

    在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...

  6. 领域驱动设计和实践(转:http://kb.cnblogs.com/page/112298/)

    引言 软件系统面向对象的设计思想可谓历史悠久,20世纪70年代的Smalltalk可以说是面向对象语言的经典,直到今天我们依然将这门语言视为面向对象语言的基础.随着编程语言和技术的发展,各种语言特性层 ...

  7. java中如何实现全局变量

    有时一个项目中会多处涉及到路径,当你把这个项目移植到别的电脑上时就要一一修改这些路径,过程十分繁琐,所以一个全局变量在这时是必不可少的. 遗憾的是java等oo语言并没有全局变量,这怎么办呢?下面介绍 ...

  8. [Leetcode] Sort, Hash -- 274. H-Index

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  9. Asp.net core 学习笔记 (AutoMapper)

    参考 : http://www.cnblogs.com/xishuai/p/3700052.html http://www.cnblogs.com/xishuai/p/3704435.html htt ...

  10. 如果想要跨平台,在file类下有separtor(),返回锁出平台的文件分隔符

    对于命令:File f2=new file(“d:\\abc\\789\\1.txt”) 这个命令不具备跨平台性,因为不同的OS的文件系统很不相同. 如果想要跨平台,在file类下有separtor( ...