absolute和relative元素设置百分比宽高的差异

　　一般元素在页面所占的空间包括：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元素设置百分比宽高的差异的更多相关文章

JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...
关于html中的设置body宽高的理解
有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...
input与select 设置相同宽高，在浏览器上却显示不一致，不整齐
遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不 ...
Python设置浏览器宽高
# 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...
CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
IE下元素设置百分比的问题
场景:近两天在做一个控件,该控件是一个tab型的,并且该tab有可能是两个tab标签,也有可能是多个tab标签,为了能够适应这种动态需求, 在设置标签宽度的时候,直接用的最外层容器除以tab的个数,然 ...
关于百分比宽高div居中并垂直居中问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jquery获取元素的所有宽高（包括内边距和外边距）
width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() ...

随机推荐

ACM/ICPC 之靠墙走-DFS+BFS(POJ3083)
//POJ3083 //DFS求靠左墙(右墙)走的路径长+BFS求最短路 //Time:0Ms Memory:716K #include<iostream> #include<cst ...
Tomcat：利用Apache配置反向代理、负载均衡
本篇主要介绍apache配置反向代理,介绍了两种情况:第一种是,只使用apache配置反向代理:第二种是,apache与应用服务器(tomcat)结合,配置反向代理,同时了配置了负载均衡. 准备工作 ...
three.js初涉略（一）
 thre ...
Hibernate反转维护
//反转维护 @Test public void test4(){ Session ses=new Configuration().configure().buildSessionFactory(). ...
javascript原型链简单的理解
在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[prototype],我们通常称之为原型.原型的值可以是一个对象,也可以是null.当然也可能是一个值,如果它的 ...
领域驱动设计和实践(转：http://kb.cnblogs.com/page/112298/)
引言软件系统面向对象的设计思想可谓历史悠久,20世纪70年代的Smalltalk可以说是面向对象语言的经典,直到今天我们依然将这门语言视为面向对象语言的基础.随着编程语言和技术的发展,各种语言特性层 ...
java中如何实现全局变量
有时一个项目中会多处涉及到路径,当你把这个项目移植到别的电脑上时就要一一修改这些路径,过程十分繁琐,所以一个全局变量在这时是必不可少的. 遗憾的是java等oo语言并没有全局变量,这怎么办呢?下面介绍 ...
[Leetcode] Sort, Hash -- 274. H-Index
Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...
Asp.net core 学习笔记 (AutoMapper)
参考 : http://www.cnblogs.com/xishuai/p/3700052.html http://www.cnblogs.com/xishuai/p/3704435.html htt ...
如果想要跨平台，在file类下有separtor()，返回锁出平台的文件分隔符
对于命令:File f2=new file(“d:\\abc\\789\\1.txt”) 这个命令不具备跨平台性,因为不同的OS的文件系统很不相同. 如果想要跨平台,在file类下有separtor( ...

absolute和relative元素 设置百分比宽高的差异

demo

结论

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

随机推荐

热门专题

absolute和relative元素设置百分比宽高的差异

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