margin之百分比
2016-07-22 21:26
148 查看
转载自http://www.ituring.com.cn/article/64581
假设有这样一个场景
我们以一个问题开始:假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 大家说说 margin 的 top, right, bottom, left 计算值最终是多少?
我记得得到不少 100px 30px 100px 30px 的反馈,我们来还原代码:
CSS:
#demo{
width: 1000px;
height: 600px;
}
#demo p{
margin: 10% 5%;
}
HTML:
<div id="demo">
<p>恩,注意看我所在的位置。</p>
</div>
事实告诉我们结果是 100px 50px 100px 50px,不论结果是否符合你的预期,我们先来看demo验证一下:margin百分比结果猜想,当然,你也根据上面还原的代码自己创建一个例子。
为什么会这样?
诧异吗?不用怀疑浏览器出了问题,因为这是正确的实现。
规范中注明 margin 的百分比值参照其包含块的宽度进行计算。
当然,它不会这么简单,这只发生在默认的
writing-mode: horizontal-tb;和
direction: ltr;的情况下。
当书写模式变成纵向的时候,其参照将会变成包含块的高度。我们改变一下上面例子中的CSS书写模式:
CSS:
#demo{
-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */
}
在 #demo 中添加这2句,其它code不变。也有个例子供观:书写模式影响margin百分比的参照对象。
恩,这回的结果是
60px 30px 60px 30px,因为其参照对象变成了包含块的高度。
顺带再说说
你是否觉得这不符合常规的感性认知?感性认知更多感觉应该横向参照包含块宽度,纵向参照包含块高度。
其实这是为了要横向和纵向2个方向都创建相同的margin,如果它们的参照物不一致,那就无法得到两个方向相同的留白。
你可能会问那为什么要选择宽度做参照而不是高度呢?
这其实更多的要从CSS设计意图上去想,因为CSS的基础需求是排版,而通常我们所见的横排文字,其水平宽度一定(仔细回想一下,如果没有显式的定义宽度或者强制一行显示,都会遇到边界换行,而不是水平延展),垂直方向可以无限延展。但当书写模式为纵向时,其参照就变成了高度而不再是宽度了。
为什么
margin: auto;无法再纵向上垂直居中?其实原因也是上面所说的,因为纵向是可以无限延展的,所以没有一个一定的值可以被参照被用来计算。
相关文章推荐
- HDOJ 2018 母牛的故事
- 大数据spark蘑菇云行动前传第5课:零基础彻底实战Scala函数式编程及Spark源码解析
- 常用算法思想之:递归思想
- linux基础入门
- ubuntu 用root登陆图形界面
- Codeforces 468B Two Sets(超直白解释)
- CodeForces 489B BerSU Ball (贪心)
- UVALive 2756 Crazy tea party
- 初探Python(1)
- 线段香蕉
- Doing Homework again (贪心)
- 实验项目3-5:求链表线性表的倒数第K项
- 思路:如何跳过CreateProcess调用底层创建进程函数
- table头部、尾部固定;中间内容定高自适应滚动
- linux笔记十----虚拟机网络配置
- Java 数据转换
- 常用算法思想之:递推思想
- php封装类 实现图片上传
- 如何使用java中的对象
- Nginx SSI 设置