CSS margin collapsing All In One
CSS margin collapsing All In One
margin collapsing
margin 塌陷 / margin 合并
会出现 margin collapsing 的 3 种情况
️ 只有 margin-top 之间, margin-bottom 之间,margin-top 和 margin-bottom 之间才会出现 margin 合并!
️ 在 margin-left 与 margin-bottom 不存在 margin 合并!
相邻兄弟元素
没有内容隔开的父子元素
空的块级元素
demos
See the Pen css margin collapsing (1. 相邻兄弟元素) by xgqfrms
(@xgqfrms) on CodePen.
See the Pen css margin collapsing (2. 没有内容隔开的父子元素) by xgqfrms
(@xgqfrms) on CodePen.
See the Pen css margin collapsing (3. 空的块级元素) by xgqfrms
(@xgqfrms) on CodePen.
margin 合并后, margin 大小的计算方法
++, max +
--, min -
+-, sum
- 同为正数,取大的正值(正)
Math.max(10px, 20px) = 20px
- 同为负数,取小的负值(负)
Math.min(-10px, -20px) = -20px
- 一正一负,取求和后的值(可正可负)
10px + -20px = -10px
BFC
BFC 触发条件
https://www.cnblogs.com/xgqfrms/p/12764046.html
demos
See the Pen css margin collapsing all in one by xgqfrms
(@xgqfrms) on CodePen.
refs
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
504 Gateway Timeout
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/504
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
CSS margin collapsing All In One的更多相关文章
- 小记css的margin collapsing
近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- 外边距塌陷 margin collapsing
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹 ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- CSS——margin
CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...
- CSS Margin(外边距)
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- CSS:CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
随机推荐
- Go is more about software engineering than programming language research.
https://talks.golang.org/2012/splash.article Go at Google: Language Design in the Service of Softwar ...
- 在nodejs中创建cluster
目录 简介 cluster集群 cluster详解 cluster中的event cluster中的方法 cluster中的属性 cluster中的worker 总结 在nodejs中创建cluste ...
- HTML5 使用浏览器内置数据库之 indexedDB
indexedDB是H5规范里的浏览器内置数据库,是nosql数据库的一种.因为另一种数据库Web SQL不再受W3C支持,所以还得学习下这个. 基本情况 兼容性:ie11及以上都支持, W3C是这么 ...
- Urlrewrite
Urlrewrite 地址重写,用户得到的全部都是经过处理后的URL地址 过滤用户的所有请求,符合规则的便对其进行重定向 rule结点中from默认使用的正则表达式来匹配,若用户访问服务器时的URL ...
- RESTFul应用分析
Restful API 近年来应用越来越广泛,各大互联网公司纷纷推出了自己的 Restful API 服务. 本文将从实际应用出发,从 REST 到 Restful 再到 Restful API ,逐 ...
- java-poi创建模板
package com.jy.demo.web; import java.io.FileOutputStream; import org.apache.poi.ss.usermodel.Cell; i ...
- (11)Linux服务器管理维护注意事项
1.远程服务器关机及重启时的注意事项 为什么远程服务器不能关机?原因很简单,远程服务器没有放置在本地,关机后谁帮你按开机电源键启动服务器?虽然计算机技术曰新月异,但是像插入电源和开机这样的工作还是需要 ...
- Docker容器管理平台Rancher高可用部署——看这篇就够了
记得刚接触Rancher时,看了官方文档云里雾里,跟着官网文档部署了高可用Rancher,发现不管怎么折腾都无法部署成功(相信已尝试的朋友也有类似的感觉),今天腾出空来写个总结,给看到的朋友留个参考( ...
- 图的连通性——Tarjan算法&割边&割点
tarjan算法 原理: 我们考虑 DFS 搜索树与强连通分量之间的关系. 如果结点 是某个强连通分量在搜索树中遇到的第⼀个结点,那么这个强连通分量的其余结点肯定 是在搜索树中以 为根的⼦树中. 被称 ...
- 阿里新晋 CNCF TOC 委员张磊:“云原生”为什么对云计算生态充满吸引力?
简介: 美国当地时间 2021 年 2 月 2 日,全球顶级开源社区云原生计算基金会(Cloud Native Computing Foundation,简称 CNCF)正式宣布其新一届技术监督委员会 ...