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: 0;left: 0;background-color: #000000;}

　　效果如下：

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

　　若子元素position为absolute时，效果如下：

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

结论

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

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

转载于:https://www.cnblogs.com/shapeY/p/8001083.html

absolute和relative元素设置百分比宽高的差异相关推荐

Html百分比设宽偏差大,absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
未开启横屏时，设置了宽高为窗口100%的视频，竖屏方向播放时，变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调) demo: & ...
img图片太大设置图片宽高，图片显示变形解决办法
当img图片太大时,设置图片宽高图片显示就会变形,object-fit属性就可以很好的解决这个问题: <div><img src="https://img0.baidu.c ...
html设置长宽高代码_html设置高等于宽
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...
Glide获取网络图片宽高，并动态设置图片宽高
因Android手机屏幕尺寸较多,当imageview宽设置match_parent,高固定时.会导致图片拉伸或裁剪.目前可通过获取图片宽高,动态设置imageview宽高比例,等比例缩放图片. ...
Android动态设置布局宽高
例如设置一个图片宽高关键代码: //取控件当前的布局参数 LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) imageVi ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
在父容器没有高度的情况下给元素设置百分比高度
在实际的开发过程中经常会有这种CSS问题,就是父容器是没有高度的,可是我还要给子容器设置百分比的高度.所以本篇博客就诞生了.就是为了帮助朋友们解决这个问题. 一:设置vh单位 vh单位就是自动检测你的 ...

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

demo

结论

absolute和relative元素设置百分比宽高的差异相关推荐

最新文章

热门文章

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

demo

结论

absolute和relative元素 设置百分比宽高的差异相关推荐

最新文章

热门文章

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

absolute和relative元素设置百分比宽高的差异相关推荐