边距重叠以及解决方案BFC

NervosNetwork 发布于2019-08-26 11:38 / 2996人阅读

摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。

边距重叠

统一的解决方案；设置padding或者border或者触发BFC

边距重叠有一下三种情况：

首先把所有的margin格式清空


  边距重叠

1.父子元素之间
块级父元素与第一个或者最后一个子元素（父元素不存在上边框、上内边距、内联元素、清除浮动）。即这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。父元素的高度：100 或者110 都对.没有overflow: hidden的时候父边距和子边距重叠了，父的高度只有100.加了overflow: hidden，父元素成了新的bfc,就解决了边距重叠的现象，margin-top 没有塌陷进去，所以父的高度是110px;

2.相邻兄弟姐妹元素

两个div的边距是50px 而不是90，取了最大值，若为负值，则取绝对值最大的，若一正一负，则取两者的和。

3.空块元素
如果存在一个空的块级元素， border、 padding、 inline content 、height 、min-height 都不存在，那么上下边距居中将没有任何阻碍，上下边距将合并。取值规则同2一样


  这个段落的和下面段落的距离将为20px

  

  这个段落的和上面段落的距离将为20px

解决方案：BFC讲解

BFC (block formatting context) 块级格式化上下文 =====》是为了解决边距塌陷（边距重叠）问题。

基本概念

BFC (block formatting context) 块级格式化上下文

基本原理

即布局规则
1、每个元素的margin box的左边，与包含块border box 的左边相接触，即使浮动也如此
2、BFC区域不会与float box 重叠
3、BFC是一个隔离的独立的容器，容器里面的子元素的不会影响到外面的元素，反之亦然。
4、计算BFC高度的时候，浮动元素也参与计算。

哪些元素生成BFC

1、overflow: 不为visible
2、postion: absoluted, fixed
3、float 不为none
4、根元素
5、display:inline-block	able-cell	able-captionflexinline-flex

应用和解决了什么问题

1、自适应两栏布局

2、清除内部浮动

3、防止边距重叠(BFC中子元素边距重叠)

两个div 中间取了最大值30为重叠了，在p外面包裹一层容器，并触发该容器生成一个
BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了.

总结：因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107289.html

边距重叠以及解决方案BFC

摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。边距重叠统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况：首先把所有的margin格式清空边距重叠 html *{ margi...

Tychio 2019-08-30 13:56 评论0 收藏0
边距重叠与BFC

摘要：边距重叠边界重叠是指两个或多个盒子可能相邻也可能嵌套的相邻边界其间没有任何非空内容补白边框重合在一起而形成一个单一边界。兄弟元素的边界重叠可以看到和和之间的间距不是，发生了边距重叠是取了它们之间的最大值。边距重叠边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合，它们的边...

BicycleWarrior 2019-08-29 13:57 评论0 收藏0
CSS盒模型完整介绍

摘要：盒模型的认识基本概念标准模型模型。如图由于盒模型的怪异模式，模型和标准模型的内容计算方式不同。设置为标准模型，它的元素宽度。这里就不介绍，大家可以自行搜索。盒模型的认识基本概念：标准模型+IE模型。包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何设置获取盒模型对应的宽和高根据盒模型解释边距...

qqlcbb 2019-08-29 14:21 评论0 收藏0
面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

CocoaChina 2019-08-29 15:39 评论0 收藏0
面试官：谈谈你对 CSS 盒模型的认识?（你确定会？）

摘要：从上图可以看到盒子模型的范围也包括，和标准盒子模型不同的是盒子模型的部分包含了和。运行效果以上就是的清除浮动原理。愿你成为终身学习者题目：谈谈你对 CSS 盒模型的认识涉及知识点(层层递进): 基本概念：标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) CSS盒模型 1. ...

Channe 2019-08-26 12:02 评论0 收藏0