外边距的折叠

最新推荐文章于 2023-09-03 23:40:04 发布
最新推荐文章于 2023-09-03 23:40:04 发布
阅读量52 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55839814/article/details/119782798
版权

垂直外边距的折叠

相邻的垂直方向外边距会发生重叠现象

——兄弟元素

        

 发现两矩形的距离并不是200px

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况，如果相邻的外边距一正一负，则取两者之和

若两者都为负，取绝对值较大者

兄弟元素的重叠对于开发是有利的

——父子元素

父子元素的相邻外边距，子元素的会传递给父元素（上外边距）

父子外边距的折叠对页面布局有影响

可以通过添加边框或者内边距来进行调整，调整过程中还要进行相关的计算

 

飞飞鱼431
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css外边距折叠（margin collapsing）
09-22
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下
外边距折叠1
08-08
在CSS布局中，外边距折叠（Margin Collapsing）是一个重要的概念，它涉及到元素间的垂直间距处理。这个现象主要发生在相邻元素的垂直外边距上，尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。 首先...
详解CSS外边距折叠问题
最新发布
indigoticrain的博客
09-03 370
当父元素的padding-top和border-top属性值为0时，就会导致父元素的上外边距与其第一个子元素的上外边距直接接触，从而导致两个外边距的折叠，效果上就像是子元素的上外边距被挤到父元素之外；同理，当父元素的padding-bottom和border-bottom属性值为0时，就会导致父元素的下外边距与其最后一个子元素的下外边距直接接触，从而导致外边距折叠。
外边距折叠
garrulousabyss的博客
10-17 137
外边距折叠
如何理解HTML外边距折叠,详解CSS外边距折叠引发的问题
weixin_42511517的博客
06-05 204
第一种：两个块级元素的上下边距折叠第二种：父元素和子元素(或者最后一个元素)的外边距第三种：空的块级元素的上下外边距折叠的根本原因：margin之间直接接触，没有阻隔折叠后外边距的计算：1.如果两个外边距都是正值，折叠后的外边距取较大的一个2.如果两个外边距一正一负，折叠后的边距为边距之和3.如果两个外边距都为负数，折叠后边距为较小的边距解决方案：解决方法实际上也就是阻止外边距直接接触第一种、第三...
BFC & 外边距折叠
qq_46469137的博客
06-07 185
BFC BFC(Block fomatting context) = block-level box + Formatting Context Box Box即盒子模型 block-level box即块级元素，display属性为block,list-item,table的元素，会生成block-level box；并参与block formatting content inline-level box即行内元素，display属性为inline,inline-block,inline-table的
如何理解HTML外边距折叠,深入理解 CSS 中的外边距折叠及 BFC
weixin_30818373的博客
06-05 251
作为一个前端工程师，在编写 CSS 时外边距折叠及 BFC 都是经常遇到的情况，今天就来做一下总结。外边距折叠什么是外边距折叠在 CSS 中，两个或者多个普通流中相邻盒子的边距在垂直方向上会发生折叠的这种现象叫做外边距折叠。外边距折叠分为父子外边距折叠及兄弟外边距折叠。示例1：父子外边距折叠我们给 child 添加了 margin-top，却导致 body 整体下移。示例2：兄弟外边距折叠我们给 ...
详解CSS外边距折叠引发的问题
01-19
1.如果两个外边距都是正值，折叠后的外边距取较大的一个 2.如果两个外边距一正一负，折叠后的边距为边距之和 3.如果两个外边距都为负数，折叠后边距为较小的边距 解决方案：解决方法实际上也就是阻止外边距直接接触 ...
CSS外边距合并代码
09-25
当我们为相邻元素设置外边距时，有时它们并不会简单地相加，而是会合并成一个较大的值，这被称为外边距合并或外边距折叠。 在CSS中，有两种主要的外边距合并情况： 1. **垂直外边距合并**：当两个或多个块级元素...
List集合概述和特点
weixin_55839814的博客
10-09 3315
List集合也是在util包下 1、列表允许重复的元素 2、用户可以精确控制列表中每个元素的插入位置，用户可以通过整数索引访问元素，并搜索列表中的元素 List集合的特点： 1、有序：存取元素的顺序一致 ​ import java.util.List; import java.util.ArrayList; public class 学生集合 { public static void main(String[] args) { // TODO Auto-generated method
语义化标签
weixin_55839814的博客
07-21 3043
标题标签一共有六级 h1~h6，重要性依次递减，title标签最重要，h1其次。一般情况下h1只有一个 块元素：独占一行(block element) 在网页中，一般通过块元素来进行布局 行内元素（inline element）：行内元素主要用来包裹文字 一般情况下，会在块元素中放行内元素或者块元素，不会在行内元素中放块元素 p元素中不能放任何块元素 （浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正） p标签和标题标签都是块元素 ：语音语调的加重(行内元素) ：强调，重要内容（行内元素） ：表示
Set集合概述和特点
weixin_55839814的博客
10-23 1531
特点： 1、不包含重复元素的集合 2、没有带索引的方法，不能使用普通for循环遍历 HashSet对集合的迭代顺序不做保证 Set<String> set = new HashSet<String>(); set.add("java"); set.add("hello"); set.add("world"); set.add("hello"); System.out.println(set); Iterator &lt...
像素、百分比、em、rem、RGB值、HSL值
weixin_55839814的博客
08-16 751
单位 长度单位： 像素： 屏幕（显示器）实际上是由一个个小方块构成 不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越好 所以同样的数值在不同的设备下显示效果不一样 百分比： 百分比可以设置属性相对于父元素属性大小 ...
文档流（normal flow）
weixin_55839814的博客
08-16 576
网页是一个多层的结构，一层摞着一层 通过CSS可以为每一层设置样式 用户只能看到最上面一层 最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列的 元素的主要有两个状态： 1、在文档流中 2、不在文档流中（脱离文档流） 元素在文档流中的特点： 块元素：在文档流中独占一行 ...
标签的相关知识
weixin_55839814的博客
01-23 577
display显示框类型 display可以设置的值有 block、inline、inline-block、none 以上值可以是任意元素变为行内元素或者块元素亦或者是行内块元素 display：none与visibility：hidden的区别 对块1设置display：none 对块1设置visibility：hidden overflow溢出隐藏 visible（默认值） hidden scroll auto 此外还可以直...
html 表格标签与表单
weixin_55839814的博客
01-19 344
<table>:最外层 <tr>:定义表格行 <th>:定义表头 <td>:定义表格单元 <caption>:定义表格标题 语义化标签：tHead tBody tFood 表格属性: border：表格边框 cellpadding：单元格内的空间 cellspacing：单元格之间的空间 rowspan:合并行 colspan:合并列 align:左右对齐方式（left、center、right） valign:上下对齐方式（.
增强for 循环、List补充
weixin_55839814的博客
10-10 255
目的：简化数组和Collection集合的遍历 1、实现Iterator接口的类允许其对象成为增强型for语句的目标 2、它是JDK5以后出现的其内部原理是一个iterator迭代器 增强for语句的格式： for(元素数据类型 变量名：数组或者是Collection集合）{ 在此使用变量即可 } 例如： int[]arr = {1 , 2 , 3 , 4}; for(int i:arr) { System.out.println(i);
超链接伪类
weixin_55839814的博客
08-12 253
特殊状态： 1、访问过的链接 2、没有访问过的链接 :link 用来表示 没有访问过的链接（正常链接） :visited 用来表示访问过的链接 由于隐私，visited这个伪类只能修改颜色 :hover 表示鼠标移入的状态 :active 表示鼠标点击的状态 注意：link和visited只能用于超链接 <style> a:link{ color:red; } </style> 其他同理 ...
样式的继承及选择器的权重
weixin_55839814的博客
08-16 160
样式的继承 继承是发生在祖先与后代之间的 利用继承，我们可以将一些通用的样式统一设置 注意：并不是所有的样式都能继承 例如与背景和布局相关的样式不会被继承 选择器的权重 样式的冲突： 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突 发生样式冲突是，应用的样式由选择器的权重决定 选择器的权重 内联样式 1000 id选择器 100 类和伪类选择器 10 元素选择器 ...
CSS折叠外边距原理与Web标准设计
例如，如果有三段文字，每段的上外边距为10px，下外边距为20px，那么第二段文字与第一段文字之间的距离不是30px，而是20px，因为它们的下外边距折叠了。 网页设计趋势正在逐渐转向W3C标准，这包括避免过度依赖表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值