css布局时,普通文档流中块框的垂直外边距为什么会发生叠加? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

css布局时,普通文档流中块框的垂直外边距为什么会发生叠加?

2016-06-02 16:34:47 1801 1

如题:css布局时,普通文档流中块框的垂直外边距为什么会发生叠加?这是浏览器解析的问题吗?

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:25:13

    是由一个叫BFC(Block formatting context)的东西引起的。

    BFC的布局规则:
    •内部的Box会在垂直方向,一个接一个地放置。
    •Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    •每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    •BFC的区域不会与float box重叠。
    •...

    触发BFC的情况:
    •根元素
    •float属性不为none
    •position为absolute或fixed
    •display为inline-block, table-cell, table-caption, flex, inline-flex
    •overflow不为visible

    你要避免相邻块元素外边距重叠的话,那你就要避免产生BFC。

    参考:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

    0 0
相关问答

1

回答

一个关于 css布局的问题?

2016-06-08 14:28:00 1671浏览量 回答数 1

2

回答

关于css布局问题

2016-06-06 17:25:32 1749浏览量 回答数 2

1

回答

css布局出现的问题

2016-06-02 13:40:14 1609浏览量 回答数 1

1

回答

关于css布局的一个小问题

2016-03-25 15:08:11 1436浏览量 回答数 1

1

回答

程序员表白神器:如何使用js+css实现炫美表白页面

2019-12-25 10:14:27 1287浏览量 回答数 1

1

回答

前端面试经典题目合集-哪些地方会出现css阻塞,哪些地方会出现js阻塞?

2019-11-28 16:17:54 446浏览量 回答数 1

1

回答

css 动画和 js 动画的差异

2019-11-21 18:30:06 727浏览量 回答数 1

1

回答

在 css/js 代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次 js 请求一般情况下

2019-11-19 18:10:28 1005浏览量 回答数 1

1

回答

为什么最好把CSS的<link>标签放在<head></head>之间?为什么最好把JS的<scri

2019-11-18 13:28:31 2325浏览量 回答数 1

0

回答

Xamarin WebView 使用 html+js+css如何开发app

2019-09-19 18:27:15 555浏览量 回答数 0
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载