【外边距塌陷之clearance】的更多相关文章

外边距塌陷之clearance

在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overflow: auto; width: 300px; height: 500px; border: 2px solid #6666FF; } .box{ width: 100px; height: 100px; font-family: "simhei"; } .top{ margin-bot…

外边距塌陷 margin collapsing

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹元素 毗邻的两个兄弟元素之间的外边距会塌陷(除非后者兄弟姐妹需要清除过去的浮动).例如: <p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p> <p style="margin-top: 20px;&…

CSS 基础 例子 盒子模型及外边距塌陷

我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: 父子元素包含情况下的计算,父亲元素会把儿子元素的整个盒子(包括margin)的大小作为内容. 外边距塌陷(margin collapse),块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷. 一般我们给元素设置背景色不会包…

css的外边距合并或者外边距塌陷问题

第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40px时,现象如下图所示: 结论: 只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题,此问题也不需要解决,记住谁的外边距较大就采用谁的外边距就ok了. 水平排列的盒子不存在合并的问题. 下面实验证实: <!DOCTYPE html> <html lang="en"…

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

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

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

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

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

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

CSS 盒子的边距塌陷

tip:为能更直观地学习,本文章已省略部分 css 样式代码. 我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距. 现页面效果: 目标页面效果: 为了达成上图的效果,我们首先就能想到给子盒子设置一个上外边距: <style> .image-div { /*子盒子*/ margin-top:25px; } </style> 让我们来看看结果如何呢? 结…

李洪强和你一起学习前端之(6)css行高,盒模型,外边距

李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = "stylesheet> 实现了css与html的分离 行内式写法 1.2Html标签的分类 按照显示模式进行分类 1.2.1块级元素 元素自己独占一行(默认有宽度) 可以设置宽度和高度 子元素的宽度与父元素的宽度一样 1.2.2行内元素 所有元素在一行上显示 不能直接设置宽度和高度 1.2…

BFC 以及 外边距合并问题

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