开启bfc 外边距合并

2024-08-31

BFC 以及外边距合并问题

BFC定义: BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. BFC布局规则特性: 在BFC中 , 盒子从顶端开始垂直的一个接一个排列盒子垂直方向的距离有margin决定,属于同一个BFC的两个相邻的盒子发生重叠在BFC中,每个盒子的左外边距(margin-left)会触碰到容器的左边缘(bor

关于CSS inline-block、BFC以及外边距合并的几个小问题

CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例定义:当两个垂直外边距相遇时,将形成一个外边距. 合并的场景: 一个元素出现在另一个元素上面时: 示例: 一个元素包含另一个元素时(没有内边距或边框把它们的外边距分开) 如图效果中,父容器box和子元素box1的上外边距合并,与子元素

由外边距合并到BFC

置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话) ::selection{ background:blue; color:red; } span{ color:red; } 外边距合并 myvin今天主要说的是BFC,块级格式化上下文,这里先由外边距合并引出来. 对于外边距合并,应该都不陌生,在这里简单列出外边距合并的几种情况: 两个元素

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的

css外边距合并和z-index的问题

参考这篇文章, 将外边距的折叠参考这篇文章, 将bfc的生成, bfc的应用参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, 但没有外边距margin属性? 这个说法是错误的! 实际操作表明, 所有的style样式属性都是具有的! 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. z-index 与 position属性的关系? 关于stacki

关于collapsed margin（外边距合并）

这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里重新展示出来,代码如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.js&qu

CSS2系列：外边距合并问题(margincollapse)

外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 为了好认识,我们称内部div为"盒子",包含这个内部div的外部div为"包含体" 解释怎么相遇: 相邻的两个盒子(可能是兄弟关系也可能是包含关系)这两个元素margin之间不能夹杂着边框啊,补白啊什么的就

CSS外边距合并&块格式上下文

前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考前言之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库("'▽'")),这一次需要动手排一个页面,也挺简单,但是遇到了一个奇怪的问题,所以学习记录一下. 问题测试代码如下: <!doctype html> <html class="no-js" lang=""

CSS 垂直外边距合并：规范、延伸、原理、解决办法

<CSS 权威指南>第七章基本视觉格式化.p192,提到了垂直外边距合并的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详解,总结如下: 规范: 8.3.1 Collapsing margins 计算方法: 如果外边距都是正数,取大的: 如果一个正数,一个负数,正外边距-负外边距的绝对值,相当于正外边距+负外边距: 都为负数,取外边距绝对值较大的: 如果相邻外边距有多个,要一起参与计算,不能分布计算:要注意,相邻的元素不一定非要

CSS min-height不能解决垂直外边距合并问题

垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了. 当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了:当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现:而当父元素设定了min-height,并且

CSS外边距合并（塌陷/margin越界）

原文简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种

关于margin外边距合并的问题

一 .兄弟元素margin外边距合并演示当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. 代码演示 : 效果演示 : 二 .父子级元素margin外边距合并演示及解决方法对于两个嵌套的父子级元素,如果父元素没有设置上外边距(或者小于子元素的上外边距),而子元素有上外边距,就会发生父元素与子元素的上外边距合并,合并后的外边距为两者中较大值. 代码演示: 注意:父元素article并未设

为什么margin-top不是作用于父元素【margin外边距合并问题】

coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中非常的常见,必须对此有明确的把握,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面结合实例代码对margin外边距合并做一下总结.外边距合并概念:相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并.水平方向不存在此现象.外边

css中外边距合并

最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;} #div2{width:50px;height:50px;background:blue;margin:20px;}<style> <div id="div1"> <div id="div2"> </div> </div> 实验了一下,结果是这样的:

CSS 外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: 当一个元素包含在另一个元素中

CSS Margin外边距合并

应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { margin-top: 10px; } 恰巧他俩div1在上面,div2在下面.这个时候表现出来就是div1的下外边距为20px,但是div2的上外边距2为20px.而div2外边距紧挨着的是div1的border-bottom. 2 一个父元素包含一个子元素,且都有外边距. div1 { margin

CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

内层div的margin-top影响外层div——引出外边距合并Collapsing margins

内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. <style type="text/css">body { margin:0; padding:0;}div { margin:0; padding:0;}.a { width:500px; margin:0px auto 30px; background:#eee;}.d1

CSS外边距合并问题

今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 例如,这里有这样两个块元素: <div class="box1"></div> <div class="box2"></div> 这里给的样式是: .box1{ width:150px; height:150px; bac

“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间若两者都为正外边距以最大的外边距为准: 若存在负边距, 合并后的外边距为最大正外边距减去绝对值最大的负边距: 若无正外边距,则用0减去绝对值最大负边距. 2.父元素与第一个/最后一个子元素之间如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-t

开启bfc 外边距合并

热门专题