Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异

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

demo

用如下小demo测试:

.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;

}

效果如下:

e65a80b3772daad864ac4e5664c06b3c.png

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

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

1af5c33476aeb512f835012e61b74c0f.png

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

结论

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

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

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个像素的偏差

...

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

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

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

【转载】Spark性能优化指南——高级篇

前言 数据倾斜调优 调优概述 数据倾斜发生时的现象 数据倾斜发生的原理 如何定位导致数据倾斜的代码 查看导致数据倾斜的key的数据分布情况 数据倾斜的解决方案 解决方案一:使用Hive ETL预处理数 ...

bootstrap-select去除蓝色边框outline

/*去除选择框的outline*/ .bootstrap-select .dropdown-toggle:focus{outline:none !important;} /*去除选项的outline* ...

Angular中使用Rainbow

在使用js类库和框架的时候,大家都习惯于编写自己的使用示例,如果能将示例中的html,js和css 进行展示, 并进行高亮显示,效果会很棒,例如在html高亮显示jquery代码 上面的示例是使用ra ...

poj2407

欧拉函数裸题. 欧拉函数:在数论,对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 欧拉函数的定义: E(N)= (  区间[1,N-1] 中与 N 互质的整数个数). 对于 积性函数 F ...

QTP自传之web常用对象

随着科技的进步,“下载-安装-运行”这经典的三步曲已离我们远去.web应用的高速发展,改变了我们的思维和生活习惯,同时也使web方面的自动化测试越来越重要.今天,介绍一下我对web对象的识别,为以后的 ...

窗体的扩展样式GWL_EXSTYLE用于SetWindowLong

SetWindowLong(Handle, GWL_EXSTYLE, GetWindowLong(Handle, GWL_EXSTYLE) or WS_EX_TRANSPARENT or WS_EX_ ...

mysql命令参数详解

一,MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式 -?, --help //显示帮助信息并退出 -I, --help //显示帮助信息并退出  ...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值