margin-top、padding-top的值为百分比

问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？
A 相对父级元素的height，相对自身的height
B 相对最近父级块级元素的height，相对自身的height
C 相对父级元素的width，相对自身的width
D 相对最近父级块级元素的width，相对最近父级块级元素的width

答案：D

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

CSS权威指南中的解释：

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

margin-top、padding-top的值为百分比相关推荐

html教程padding,HTML CSS——margin和padding的学习
一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距代码2-1: html PUBLIC "-//W3 ...
HTML CSS——margin和padding的学习
http://www.cnblogs.com/fengyv/p/3789333.html 你在学习margin和padding的时候是不是懵了,--什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我 ...
前端：margin、padding、float一篇文章彻底理解
系列文章目录文章目录系列文章目录 margin -- 意思是边距 margin的4个取值 padding -- 意思是填充 float -- 意思是浮动总结 -- 这些玩意要自己敲一下,然后去 ...
css中width、height、margin、padding默认值总结
默认值 left top right bottom width height: 默认值为 auto margin padding: 默认值为 0 百分比参照于谁 width ...
android 动态设置padding,Android动态设置控件大小以及设定margin以及padding值
http://www.aichengxu.com/Java/73893.htm Android动态设置控件大小以及设定margin以及padding值,有需要的朋友可以参考下. 一.概述在andro ...
bootstrap4 调整元素之间距离 margin 和padding
响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同:margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距:padding影响的元素本身 ...
android自定义View之margin和padding的处理
转载请注明出处:http://blog.csdn.net/u012732170/article/details/55045472 说起margin和padding,想必大家都不陌生.margin就是指 ...
浅析Margin和Padding属性
序 Magin:有边缘的意思,在Android布局中的使用方式是 android:layout_margin="XXdp",看到这个不免想到layout是父布局来控制子控件的. 而 ...
linux自动执行top,Linux top 命令使用
top命令结合jvm诊断工具jstack能够快速帮我们定位有问题的代码位置,输入top命令,运行图如下 CPU负载第一行包括运行时间.当前时间.用户数量和系统平均负载,其中后面三个数字就是一分钟.五 ...
[css] margin和padding使用的场景有哪些？
[css] margin和padding使用的场景有哪些? 实现自适应的等比例矩形效果: div { padding: 50%; } div { padding: 25% 50%; } //宽高比为 ...

margin-top、padding-top的值为百分比

margin-top、padding-top的值为百分比相关推荐

最新文章

热门文章