第一种:两个块级元素的上下边距折叠
第二种:父元素和子元素(或者最后一个元素)的外边距
第三种:空的块级元素的上下外边距
折叠的根本原因:
margin之间直接接触,没有阻隔
折叠后外边距的计算:
1.如果两个外边距都是正值,折叠后的外边距取较大的一个
2.如果两个外边距一正一负,折叠后的边距为边距之和
3.如果两个外边距都为负数,折叠后边距为较小的边距
解决方案:解决方法实际上也就是阻止外边距直接接触
第一种、第三种:只有静态流的元素才会发生外边距合并故设置float position inline-block都可以
<style>
.bother{
width: 50px;
height: 50px;
margin: 50px;
background-color: #44cc00;
/*1.float: left;*/
/*2.position: absolute;*/
<!--3.display: inline-block;-->
}
/*.father{*/
/*2.position: relative;*/
/*background:#cccdd1;*/
/*}*/
/*.bother1{*/
/*2.top:50px;*/
/*}*/
/*.bother2{*/
/*2.top:250px;*/
/*}*/
</style>
<body>
<div class="father">
<div class="bother1 bother"></div>
<div class="bother2 bother"></div>
</div>
</body>
第二种(嵌套的情况)只要border padding非0或者有inline元素隔开,比如在父元素里加一行文字也可以
<style>
.margin-box{
width: 50px;
height: 50px;
/*margin: 50px;设置了上下左右的外边距*/
margin: 50px;
/*margin-left: 50px;*/
/*margin-right: 50px;*/
/*div是块级元素,所以设置左右外边距也不会使父元素有左右外边距*/
background-color: #fae900;
/*5.2 display: inline-block;*/
}
.father{
<!--3.overflow: hidden;-->
background:#cccdd1;
/*1.border: 1px solid;*/
/*2.padding: 20px;*/
/*5.1 display: inline-block;*/
/*如果没有border和padding只有测试这个字,那么子元素的外边距不会在父元素里显示*/
/*而仅仅只有上外边距显示,下外边距不显示*/
/*而如果在子元素下面同样写一个测试,那么下外边距也会显示*/
}
</style>
</head>
<body>
<div class="father">
<!--4.<span>测试</span>-->
<div class="margin-box"></div>
<!--4.<span>测试</span>-->
</div>
</body>
来自:https://segmentfault.com/a/1190000018312668
最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。
边距重叠解决方案(BFC),首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”,外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。
BFC即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素;设置 overflow 属性,除了 visible 以外的值(例如 hidden、auto)
getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。注意: availLeft/availTop 大多数情况下,返回 0。获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的属性
将WEB页面直接导出为pdf文件是经常会用到的一个功能,尤其是各种报表系统。总结了一下目前几种主流的做法:在后端用代码生成pdf文件,比如iText一类;在后端抓取页面并生成pdf文件,比如phantomjs一类;
Js获取滚动的头部距离和左边距离:在js中,经常会用到需要获取头部距离和左边距离的小功能,在这里封装一下,以后可以直接调用即可:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!