盒子模型外边距，合并与塌陷

最新推荐文章于 2022-05-10 10:14:29 发布
最新推荐文章于 2022-05-10 10:14:29 发布
阅读量156 收藏
点赞数
分类专栏： 笔记 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZDAXING/article/details/109983377
版权

盒子模型外边距

margig:外边距
一个值：上下左右
两个值：上下/左右
三个值：上 /左右/ 下
四个值：上/右/下/左

*通配符
初始化网页元素:网页中所有元素的内外边距都为0

auto水平居中
盒子水平位置居中;左右外边距设置为auto,前提条件:有width.

盒子的合并与塌陷

1.给相邻两个盒子都设置margig，垂直方向外边距取两者最大值
2.塌陷：嵌套的两个盒子都设置了margig，垂直方向的外边距取最大值
塌陷的结局方法： 1.给父元素加border 2.给父元素加overflow：hidden

ZDAXING
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css使两个盒子并列_CSS 盒子模型详解（二）
weixin_39778447的博客
11-20 1996
这篇继续接着上一篇来继续讲剩下盒子模型内容一、margin 外边距margin(外边距)属性定义元素周围的空间。设置外边距会在元素之间创建“空白”区域，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。margin-top...
第十二章：盒子模型的合并原则
绝版菜
02-09 367
一、外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。     当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。   假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并 ...
CSS盒子模型AND浮动[附：常用工具ps]
世间万物皆代码[地球online]
11-13 828
课程目标: 熟练掌握CSS盒子模型 熟练掌握CSS浮动 盒子模型（CSS重点） 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎.
CSS盒子模型以及外边框合并的问题
weixin_33895604的博客
12-15 755
盒子模型 我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子。你现在心里有很多疑问，没关系，接着看。 以下是标准的盒子模型。（图片来源） 我们平常给元素加上的width，height实际上就是给内容区域加宽和高。...
盒子模型问题,合并和塌陷问题
muweichang的博客
04-28 396
盒子模型问题外边距折叠现象1.合并现象2.塌陷问题行内元素 外边距折叠现象 1.合并现象 当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。 两个垂直布局的块级元素，上下的margin会合并 结果会取两者之间margin的最大值 解决办法：只给其中一个盒子设置margin即可 <style> div{ width: 100px;
css盒子模型 css margin 外边框合并
12-01
外边距合并（也称作外边距塌陷）是CSS布局中的一个关键特性。当两个垂直相邻的元素的外边距相遇时，它们会合并成一个较大的外边距。这在处理段落或列表项等连续元素时尤为常见，可能导致元素之间的间距小于预期。...
盒子模型PPT学习教案.pptx
10-10
需要注意的是，块级元素的垂直外边距有时会发生合并，这被称为“外边距塌陷”。 **盒子模型的理解与应用**： 网页设计中的布局往往是多个盒子的嵌套和排列。通过调整盒子模型的各个属性，我们可以精确控制元素的...
3.2CSS 内容总结(二)盒子.md
02-16
### CSS内容总结（二）—— 盒子模型与相关特性 #### 1. 盒子模型 **1.1 盒子模型组成** 在CSS中，盒子模型是用于描述HTML元素如何显示的一种方式，它包括边框（border）、内边距（padding）、外边距（margin）...
深入理解css中的margin属性（推荐）
09-24
CSS盒子模型由四部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容是元素的实际内容，如文本或图像；内边距是内容与边框之间的空间；边框则是围绕内容和内边距的边线；而外边距则是...
css-box-model-challenge
03-06
需要注意的是，外边距可以与其他元素的外边距合并，这被称为外边距塌陷。 在CSS盒子模型中，元素的实际宽度和高度是内容宽度/高度加上左右内边距、边框和外边距的总和。如果元素设置了`box-sizing: content-box;`...
妙味课堂——前端HTML+CSS修炼之道-值得反复推敲的经典布局方案
11-10
前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局
"margin塌陷现象"div盒子嵌套盒子外边距合并现象
weixin_30535843的博客
01-16 183
问题描述：原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” 。header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题，内层div 并没...
解决嵌套盒子外边距塌陷的问题
JIE18018的博客
05-28 954
嵌套关系的两个盒子，如果给子盒子加一个外边距，会导致外边距塌陷 列子： 再.box1里面嵌套一个.box2然后给子盒子加一个外边距想让其下移，会导致外边距塌陷。 .box1 { height: 500px; width: 500px; background-color: slateblue; } .box2 { height: 200px; width: 200px; background-color: yellowgreen; margin-top: 100px; } 塌陷指
html盒模型中关于外边距塌陷问题（父子关系外边距和兄弟关系外边距）
lyclyc_的博客
06-25 1043
1，父子盒子外边距塌陷 父子关系外边距塌陷的表现是：父盒子和子盒子粘在一起了，当给父盒子设置margin-top时，子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时，父盒子也跟着走。当子盒子和父盒子都设置margin-top时，哪个值大，就按照哪个值。 塌陷原因：父子盒子公用一个外边距区域。 解决办法： 1，给父盒子设置边框或内边距 2，给父标签添加overflow:hidden属性，触发BFC规则（块级格式上下文，把父级渲染成一个独立区域。） 代码如下： <!DOCTYPE html
浅谈盒模型，怪异盒，外边距塌陷问题
weixin_43213962的博客
04-23 425
盒模型 什么是盒模型？
外边距及外边距合并与塌陷问题
qq_52594180的博客
02-24 370
1.若两个嵌套的的块元素（父子关系）均有margin-top值时，父元素会塌陷较大的top值（塌陷指父元素顶部与上沿的距离），而子元素并不会与父元素顶部产生距离（子元素的margin-top失效） 2.产生原因：首先，父子元素之间没有padding和border进行隔离，子元素会与父元素边缘重叠。其次，父元素和子元素都设置了同方向的margin-top值，而两个属性之间也没有其他内容进行隔离，导致两个属性相遇，使得margin属性重叠，从而发生父元素塌陷。 3.解决塌陷问题方法：
挖掘关键词的六种方法
ZDAXING的博客
05-10 2084
1.联想搜索。搜索引擎输入框输入关键词，联想与该关键词有关的所有关键词形成列表展示。该列表展示出的关键词就是我们要找的关键词。 2.相关搜索。在搜索引擎框输入关键词后确定，在底部有一个相关搜索区域，该区域的关键词就是我们要找的关键词。 3.关键词挖掘工具。站长工具的关键词挖掘工具 4.百度搜索推广关键词工具。在百度推广账户后台操作，进入后台，选择“搜索推广”，选择“关键词工具”就可以了。 5.竞争对手官方网站。先找一些自己同行或者竞争对手的官网，查看源代码网页，找到“keywords”所对应的关键词，复制并
seo站内优化的10点建议及分析处理方案
ZDAXING的博客
03-15 2033
seo搜索引擎优化站内优化的十点建议及剖析！SEO说难不难,说容易也不是那么容易,温州很多人问seo小编,站内SEO优化该怎么做?但当我扯皮出来的时候, seo专员们又觉得:就这些?不可能就这么点内容吧!其实现在的站内SEO真的没有多少内容,更多的是细节处理和用户体验度的把握. 有些做seo的朋友以为站内优化很难,由于他们没有摸清里边的门道,不知道该从何下手;而另外一些seo朋友又以为站内优化很简单,就是更新文章, 这也是因为他们对站内SEO不了解,许多seo培训组织教站内优化的时分都是关键词设置好之后就开
【SEO与SEM常见问题】
ZDAXING的博客
03-15 346
在这里插入图片描述
CSS盒子模型与排版详解
需要注意的是，外边距在某些情况下可以合并，这是所谓的"外边距塌陷"现象。 当涉及到CSS排版时，经典布局版式是常见的布局方式，包括浮动布局（float）、定位布局（position）和Flexbox（弹性盒布局）以及Grid布局...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值