盒子模型和外边距重叠

最新推荐文章于 2021-09-16 18:25:11 发布
最新推荐文章于 2021-09-16 18:25:11 发布
阅读量324 收藏
点赞数 1
分类专栏： CSS3 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imber___zsk/article/details/119389720
版权

IE盒子box-sizing：border-box

  • 一旦使用，占位大小(内容大小)就不再改变
  • 即：当加上padding、border的时候，盒子的大小是不会变化的
  • 有UI图的时候很实用

默认C3盒子box-sizing：content-box

  • 即：有padding、border的时候，盒子会变大
  • padding的部分是有背景颜色的

外边距重叠

  • 普通文档流两个盒子的垂直外边距直接接触的时候
  • 可以用clearfix解决，即中间加个元素
  • 父元素padding-top解决

思考？

  • 父子盒子用padding
  • 兄弟盒子用margin
前端imber
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒模型margin重叠/合并问题解决发方法
ifformy的博客
03-14 2143
html代码 <div class="divOne">场请放事国才没甲辜是受一颜我冇于人不，得评骂天对互秦变者苟你流太，此将游人的倒的动，付解有活后大但家考人动不把是家斯，足创者德已案的临孔什掉三活，重。</div> <div>已对报了拾妙人航即罚因最德而才实，病好仍血老仓锐娇国，你在以没身又为皇，么屯够生以母判，云败叩反能收能章王的杨人也，终书畴请土才话的，者作你郭放，君未张知之感则和饮是第</div> css 代码 /*初始化*/ bo..
盒模型的介绍，以及margin（外边距）padding（内边距）的使用.zip
02-24
在实际开发中，理解和熟练运用盒模型、内边距和外边距是创建复杂布局的基础。同时，要时刻注意浏览器兼容性问题，确保在不同环境下都能正确显示。此外，掌握盒模型还有助于优化页面性能，通过合理设置内外边距，可以...
详解css盒模型与外边距重叠
weixin_34233679的博客
09-03 107
盒模型的构成 之前写了一篇关于如何解决css的外边距重叠问题,可是后来发现,我有些本末倒置了,对于一个问题的正确的处理流程就应该是先发现问题,分析问题,解决问题,所以我在这篇文章中就对下css的盒模型,什么是外边距重叠,为什么会发生外边距重叠,以及怎样计算外边距重叠一一进行解读,旨在透过现象看本质,达到掌握的目的.文章可能会有点长,为节省...
盒子模型之外边距叠加
weixin_47124862的博客
12-01 295
在开发过程中，可能会遇到这样的一种情况，有相邻的两个块元素A和B，其中A定义了一个margin-bottom,B定义了一个margin-top。当我们在浏览器中查看时，明显发向A和B的垂直距离明显小于相加之和。这个现象是由外边距叠加所引起的。 外边距叠加有三种情况： 1、同级元素叠加 当一个元素出现在另一个元素上面的时候，第一个元素的下边距就会和第二个元素的上边距发生合并。 2、父子元素叠加 当一个元素包含在另外一个元素中时，加入没有padding和border把外边距分隔开，父元素和子元素的相邻上下外边距
盒模型——外边距重叠问题
趙尒七
03-03 370
首先创建两个盒子，一个父盒子，一个子盒子 我们想让子盒子往右下移动一段距离 于是给子盒子加上 上左外边距，但是我们会发现父盒子会随子盒子移动，父盒子具有子盒子上外边距属性。（触发BFC规则） 处理方法： 1.解决： 1.给父盒子设置上边框： border-top：1px soild red 加上一个和父盒子颜色一样的上边框。 2.给父盒子设置内...
盒模型的外边距叠加
月南的博客
11-08 371
有时候在使用margin-top或者margin-bottom时，发现加上去的margin-top或者margin-bottom值不起作用了，其中的原因有可能就是发生了外边距叠加。这在普通文档流中经常会出现。行内框，浮动框，或者绝对定位框之间的外边距不会发生叠加。 外边距叠加只会发生在垂直的top或者bottom边距，left或者right边距不会发生这种情况。 以下就是发生这种边距叠加的几种
盒子模型.zip
04-10
这个模型将每个HTML元素视为一个矩形的“盒子”，包含内容、内边距、边框和外边距四个部分。 1. **内容(Content)**：这是盒子的核心，包含实际的文字、图像或其他媒体。内容区域的大小由元素的width和height属性...
CSS 外边距(margin)重叠及防止方法
12-13
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，...
CSS盒子模型.rar
03-23
CSS盒子模型，又称盒状模型（Box Model），是指HTML或CSS中的每个元素都可以被看作一个矩形的盒子，这个盒子由四个部分组成：内容区域（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。...
Day05-CSS布局-盒子模型
07-06
通过调整内边距和外边距，我们可以改变元素的相对位置，创建各种复杂的布局效果。同时，理解盒子模型对于解决元素重叠、计算元素实际占用的空间等问题至关重要。 在实际项目中，我们可能会遇到盒模型兼容性问题，...
51_盒子模型-外边距的重叠
述安的博客
08-18 120
相邻的垂直方向的外边距会发生重叠现象
css的盒子外边距margin会重叠
qq_44844751的博客
09-16 373
在css里有一个奇怪的特性，就是两个或多个盒子(可能相邻也可能是父子)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 相邻盒子边界的计算方式： 全部都为正值，取最大者 不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值 没有正值，则都取绝对值，然后用0减去最大值。 解决方法： 任意一个盒子触发bfc；两个盒子统一用margin-top或margin-bottom 父子盒子边界的计算方式 父盒子如果没有border和padding的话，子盒子的margin会传递给
盒子模型之margin重叠深度分析
dancing_burry的博客
12-08 3932
文章来源：http://blog.csdn.net/flyokzt/article/details/46454655 你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。 CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是，在实践中对
CSS盒模型知识整理与理解（2）--- 边距重叠问题详解
Yuval的博客
01-06 2023
CSS-盒模型知识整理与理解： CSS盒模型知识整理与理解（1）--- 基本概念 CSS盒模型知识整理与理解（2）--- 边距重叠问题详解 CSS-盒模型知识整理与理解（3）--- BFC详解     CSS盒模型知识整理与理解 --- 边距重叠问题详解   边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界...
CSS盒模型及边距重叠
Carol的小星球
12-13 407
盒模型由content,padding,border,margin组成。 两种模型 W3C标准模型和IE模型。 在标准模型中，盒的宽高只是内容的宽高。 在IE模型中宽高是content+padding+border的宽高。 如何设置 通过设置box-sizing:content-box/border-box； 边距重叠 两个box都设置了边距，垂直方向上两个box的边距会重叠，以绝对值大的为最...
html盒子会重叠吗,详解css盒模型与外边距重叠
weixin_35607076的博客
06-01 359
盒模型的构成之前写了一篇关于如何解决css的外边距重叠问题,可是后来发现,我有些本末倒置了,对于一个问题的正确的处理流程就应该是先发现问题,分析问题,解决问题,所以我在这篇文章中就对下css的盒模型,什么是外边距重叠,为什么会发生外边距重叠,以及怎样计算外边距重叠一一进行解读,旨在透过现象看本质,达到掌握的目的.文章可能会有点长,为节省时间大家可以根据掌握的情况浏览阅读.1.结构为了给文档树中的各...
html 盒子模型基础（外边距的重叠问题详解）（三）
余正源的博客
02-07 3564
1.外边距的重叠问题 .box1{ width: 100px; height: 100px; background-color: red; /*为上边的元素设置一个下外边距*/ margin-bottom: 100px; } .box2{ width: 100px; heig
兄弟盒子外边距重叠
qq_40664253的博客
08-06 599
外边距重叠（margin-collapse）：相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距，折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 两个外边距一正一负时，折叠结果是两者的相加的和 解决...
解决外边距重叠
weixin_39307273的博客
02-04 1200
一、外边距重叠 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 换句话说，外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。 margin值重叠计算的方法： margin值都为正，取两者的最大的值。 出现负边界，用最大的正边界减去绝对值最大...
css盒子外边距背景色
最新发布
06-07
CSS中的盒子模型是理解布局的基础，它包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。外边距（margin）指的是元素四周空白区域，它可以控制元素与其他元素之间的空间。 **外边距（Margin）**: 1. **单独设置**: 你可以为每个方向（上、右、下、左）分别设置外边距，如`margin-top: 10px; margin-bottom: 20px;`。 2. **简写形式**: 可以用简写形式`margin: 10px 20px 30px 40px;`，分别代表上、右、下、左四个方向。 3. **负值**: 可以设置负值来创建重叠或内嵌的效果。 **背景色（Background-color）**: 1. **属性**: 使用`background-color`属性来设置元素的背景颜色，例如`background-color: #f00;` 设置为红色。 2. **透明度**: 通过`rgba()`或`hsla()`可设置带透明度的颜色。 3. **图像**: 另外，还可以使用`background-image`设置背景图片，而`background-color`则提供背景图像显示前的填充颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值