margin系列之百分比
你可能从没注意过它
在 margin系列之keyword auto 中,说过了 margin
值为 auto
的情况,这次要聊的是值为百分比的情形。
我必须承认这是一个非常基础的知识点,但有一段时间我发现很多人对此有错误的认知。偶尔在面试或者分享的时候,我会问到这个问题,有人会脱口而出的告诉我他对此的感性理解。
或许现在大多数人对此不屑一顾,但我仍想说一说,这样以后就可以不再问类似的问题了。
假设有这样一个场景
仍然以一个问题来开始,这是我之前在 微博 发过的,原文是这样的:
假设一个块级包含容器,宽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
的百分比值参照其包含块的宽度进行计算。
当然,它不会这么简单,和上篇文章 keyword auto 一样,这只发生在默认的 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系列之keyword auto 留了个问题:为什么 margin: auto;
无法再纵向上垂直居中?其实原因也是上面所说的,因为纵向是可以无限延展的,所以没有一个一定的值可以被参照被用来计算。
margin系列之百分比相关推荐
- css中margin属性值百分比的使用
margin使我们使用得很频繁的一个属性,用来设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度,可以有 1 到 4 个值.例子:margin:10px 5px 15px 20px; 说明: 属 ...
- margin系列之负值
对于负值的margin,好像 css 2.1 规范中没有提及(反正我没有找到).看来,"猿猴"的生活还木有结束... 但,就像孙悟空逃不了佛祖手掌心一样,程序猿也逃不了" ...
- margin击穿问题(margin折叠问题)
问题如下 一段很简单的代码: css如下: <style type="text/css">*{margin: 0px; padding: 0px; }.show{mar ...
- 4、CSS 外边距margin
围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CS ...
- CSS margin 属性简介
CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...
- CSS 盒模型之外边距 margin属性
外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素.因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔. 外边距默认是透明的,在这个区域中可以看到父元素的背景. ...
- 巧用margin/padidng的百分比值占位,避免闪烁
当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的 场景:购物平台商品的展示界面 当图片还未加载出来时,高度为 ...
- 巧用margin/padding的百分比值实现高度自适应(
转载自https://segmentfault.com/a/1190000004231995 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 布局 自适应 前端 cs ...
- 在html中设置外边距,CSS外边距设置属性margin用法
本文向大家描述一下CSS外边距属性margin的用法,设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位.百分数值甚至负值,相信本文介绍一定会让你有所收获. CSS外边距 围绕 ...
最新文章
- Ajax学习(6)---服务器端脚本和程序中用 JSON 进行响应和回复
- RichTextBox的使用
- vue之slot用法
- 牛客网 桂林电子科技大学第三届ACM程序设计竞赛 D.寻找-树上LCA(树上a到b的路径上离c最近的点)...
- vim编辑器常用命令总结
- 24. PE结构-PE详解之基址重定位详解
- 20-10-020-安装-KyLin-2.1.3单机版安装(MAC)
- Java包数据消息头消息尾_读Socket流时产生阻塞的解决方案(粘包拆包问题)
- 【bzoj3000】Big Number 【斯特林公式】
- ue4是什么意思_ue4主要是做什么用的
- 【bzoj2959】长跑【LCT+并查集】
- 组装机怎么重装系统?组装机U盘装系统方法
- 自己捣鼓的小程序实现订单代付的功能
- Knowledge Embedding Based Graph Convolutional Network
- 软件授权码方案(附Python示例代码)
- 动画,在我眼中,详细
- 银河麒麟怎么卸载软件_常见问题·银河麒麟操作系统 麒麟操作系统 中标麒麟 麒麟软件官方网站...
- 学会map、reduce、filter这三个函数,让你Python代码看起来更有逼格!
- java web项目VO,dao,pojo,dto,bo,
- 【行人重识别】计算机视觉进阶系列 第一课 基础知识