margin padding是以什么为参照物

最近在写一个简单的代码的时候发现了一个问题（还不是因为我太菜），请看代码

<div class="parent"><div class="children"></div>
<div>
.parent {width: 100%:height: 100%;
}.children {margin-top: 20%;
}

就这么几行简单的代码，当我们缩小父元素宽度的时候，子元素确要上下移动，按理说，margin-top已经设置了偏移量，为啥子元素还要上下移动呢？

原来margin padding设置为百分比的时候他的参照物有所讲究

当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的。所以这里你就能理解为啥，我缩小父元素的宽度的时候，子元素会移动了吧。

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

扩展：巧用margin/padding的百分比值实现高度自适应

扩展：BFC

margin padding是以什么为参照物相关推荐

巧用margin/padding的百分比值实现高度自适应（
转载自https://segmentfault.com/a/1190000004231995 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 布局自适应前端 cs ...
fieldset在ie8下的margin\padding bug规避
写在前面的话其实我不推荐使用fieldset这个标签,正如我们常常议论的那样这东西在不同的浏览器下确实操蛋,但是在一些老的项目中大量使用,所以还是有必要分析一下,fieldset到底有哪些怪毛病,如 ...
html标签默认属性值之margin;padding值
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
知方可补不足～CSS中margin,padding,border-style有几种书写规范
参考文章: http://www.w3school.com.cn 在我们使用CSS时,经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义 ...
关于使用position:fixed之后附加margin/padding的一些影响细节
① 未设置(left/right/top/bottom属性)方位 -> 该元素表现为包裹性(与内联元素的效果相似,目前来说margin和padding与内联元素中的margin/pad ...
php内外边距,选择器与内外边距使用方法（margin,padding使用）-2019年9月4日
9月3日作业: 1. 实例演示相邻选择器与兄弟选择器,并分析异同相邻选择器:就是邻居的意思,从当前选择器后面的邻居,也就是挨得最近的一个. 兄弟选择器:就是同一父元素下面又是同级的元素,兄弟可以有多 ...
关于行内元素的margin padding一些说明；background-color的范围
①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...
css margin padding 0,CSS 彻底理解margin与padding
我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向,什么时候设置margin,什么时候设置padding,不是太清楚,设置了以后在界面上看到的效果也差不多呀. 如何理解marg ...
CSS样式属性margin,padding详解
盒模型基本属性有两个:padding和margin. 以边框border为界,边框里面是内边距,边框外面是外边距. 一.外边距margin: 外边距是指边框以外与其他同级元素之间的距离,外边距可以控制 ...
CSS3 放飞自我1——margin,padding,border到底有啥关系？
在开始严肃地讨论技术之前,我想先说几句题外话.从今天开始呢,我将陆续更新一些有关于CSS3的一些我觉得很有必要了解的知识,也包括一些干货.这些东西不一定是难点,也不一定都是CSS3新出的,却是我觉得重 ...

margin padding是以什么为参照物

margin padding是以什么为参照物相关推荐

最新文章

热门文章