Python:margin collapse
margin collapse:边界 折叠/重叠/坍塌
此种现象只会垂直方向并且要满足一定条件时才会出现这种现象。
https://tech.youzan.com/css-margin-collapse/
在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。
我们可以注意定义中的几个关键字:毗邻、两个或多个、垂直方向和普通流。
外边距叠加存在两种情况:一是父子外边距叠加;二是兄弟外边距叠加。
从定义中我们可以很清楚的知道要符合哪些情况才会发生外边距折叠:
- 都属于普通流的块级盒子且参与到相同的块级格式上下文中
- 没有被
padding、border、clear和line box分隔开 - 都属于垂直毗邻盒子边缘:
- 盒子的
top margin和它第一个普通流子元素的top margin - 盒子的
bottom margin和它下一个普通流兄弟的top margin - 盒子的
bottom margin和它父元素的bottom margin - 盒子的
top margin和bottom margin,且没有创建一个新的块级格式上下文,且有被计算为0的min-height,被计算为0或auto的height,且没有普通流子元素
- 盒子的
形成 BFC 的条件(符合以下任一条件即可):
1) float 的值不为 none;
2) overflow 的值不为 visible;
3) display 的值为 table-cell、table-caption 和 inline-block 之一;
4) position 的值不为 static 或 relative 中的任何一个;
3. BFC 常见作用
https://blog.csdn.net/qq_33435265/article/details/54705946
Python:margin collapse的更多相关文章
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- 深入理解BFC和Margin Collapse
深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...
- Python:wordcloud
wordcloud官方文档 1.简介 wordcloud是优秀的词云展示的第三方库 2.导入模块 import wordcloud 3.wordcloud对象初始化 以下参数值均为官方文档给出的默认值 ...
- Python:使用threading模块实现多线程编程
转:http://blog.csdn.net/bravezhe/article/details/8585437 Python:使用threading模块实现多线程编程一[综述] Python这门解释性 ...
- css margin collapse
css中存在margin collapse,即边界塌陷或边界重叠. http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.h ...
- Python:渗透测试开源项目
Python:渗透测试开源项目[源码值得精读] sql注入工具:sqlmap DNS安全监测:DNSRecon 暴力破解测试工具:patator XSS漏洞利用工具:XSSer Web服务器压力测试工 ...
- Python:开发Sublime插件,方便PHP开发
Python:开发Sublime插件,方便PHP开发 背景 最近在学习PHP,开发环境选择了Sublime2,开发过程发现执行PHP程序非常不方便,需要自己在浏览器中输入路径以进行调试,这点不如Dre ...
随机推荐
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...
- Java并发编程-ReentrantReadWriteLock
基于AQS的前世今生,来学习并发工具类ReentrantReadWriteLock.本文将从ReentrantReadWriteLock的产生背景.源码原理解析和应用来学习这个并发工具类. 1. 产生 ...
- 07-HTML-内嵌标签
<html> <head> <title>内嵌标签学习</title> <meta charset="utf-8"/> ...
- Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由
前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们 ...
- Markdown简单上手
标题 # +内容 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 字体 1. 加粗(Ctrl+B) **加粗** 2. 斜体(Ctrl+I) *斜体* 3. 斜体加粗(Ctrl+B+I) ...
- 在PeopleSoft中,什么是AlterAudit,Sysaudit和DDDAudit报告
Alter Audit-是一个进程,它标识任何需要SQL Alter process的记录.即:如果AD中定义的record与数据库的中定义不匹配则标识该记录为应该修改. SQL Alter-AD中的 ...
- Javascript 流程控制
流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...
- MyBatis-Plus初步使用
在使用mybatis的过程中,我们会发现需要自己写很多的mapper和mapper.xml配置文件,很多时候会写到相当多的重复代码,特别是普通的增删改查,这样不仅会影响我们的开发效率,也会使得代码变的 ...
- MyBatis笔记----MyBatis 入门经典的两个例子: XML 定义与注解定义
----致敬MyBatis官方开放文档让大家翻译,不用看书直接看文档就行了,mybatis的中文文档还需要完备的地方 简介 什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以 ...
- 自动化测试基础篇--Selenium Xpath定位
摘自https://www.cnblogs.com/sanzangTst/p/7458056.html 学习 什么是xpath? XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言 ...