元素竖向的百分比设定是相对于容器的高度吗?
来源:互联网 发布:dota2 mac版下载官网 编辑:程序博客网 时间:2024/05/14 04:09
自己做了一下测试,结果。。。。。
<style> #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;} #div{width: 100px;height: 100px;background: red;position: absolute;left: 50%}</style>div套在box里面的,div的left值为50%,效果如图:
可以看到左边距居中,效果正常;
<style> #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;} #div{width: 100px;height: 100px;background: red;position: absolute;top: 50%}</style>现在改为top:50%,效果如图:
上边距居中,效果也正常;
那么我改成这样呢:
<style> #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;} #div{width: 100px;height: 100px;background: red;position: absolute;margin-top: 50%}</style>margin-top:50%,问题来了
很明显,这是把width当做了基准啊。
再看padding
<style> #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;} #div{width: 100px;height: 100px;background: red;position: absolute;padding-top: 50%}</style>结果:
一样是以width为基准的!
margin-left、margin-top就不用说了,肯定是以width为基准的。
但为什么这样设定就不清楚了,网上也没找到相应的说法,暂时先记住就好了。
0 0
- 元素竖向的百分比设定是相对于容器的高度吗?
- 元素竖向的百分比设定是相对于容器的高度吗?
- js获取元素相对于父级元素的高度
- padding-top的值用的是百分比,实际显示的不是父元素高度的百分比,而是宽度的百分比!margin-top同理
- 子元素相对于父元素设定margin-top值的时候
- 利用JS设置 元素 点面的百分比高度
- 设定iframe的高度
- Div高度的百分比问题
- css中子元素根据父元素设置百分比高度的问题。
- top bottom 百分比是相对于宽度
- silverlight 每个对象使用的坐标系统是相对于它最近的容器
- 容器的高度height使用百分比时,如何设置可以使里面的文字垂直居中。
- 百分比设定总宽度的原理
- 相对于父元素的绝对定位
- 获取元素相对于body的位置
- 获取元素相对于文档的偏移量以及元素相对于父元素的偏移量
- 元素宽度的最大百分比
- Css_浮动元素外层容器无高度的解决办法
- The Portable Executable File Format from Top to Bottom
- FTL语法使用
- Docker之基本概念和Ubuntu下安装(一)
- 代码片段Java - How Class is loaded and initialized
- 洛谷 P1071 [NOIP2009 T1] 潜伏者
- 元素竖向的百分比设定是相对于容器的高度吗?
- java数据类型转换之精华版
- CSS多列布局方案
- Days30 PullToRefreshListView & SlidingMenu
- 浅谈 C++ 中的 new/delete 和 new[]/delete[]
- Java中了使用list方式查看输入的字符串中不重复的字符
- discuz主导航左右分栏
- UVA1602 Lattice Animals 回溯+set判重
- Hibernate关联关系配置(一对多、一对一和多对多)