html+css margin塌陷

最新推荐文章于 2024-07-22 23:28:14 发布
最新推荐文章于 2024-07-22 23:28:14 发布
阅读量301 收藏
点赞数
分类专栏： html+css 文章标签： margin html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39396275/article/details/81182104
版权

在设置子类和父类之间的margin-top时，会出现无反应的现象。
如下面代码：
html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
<link rel="stylesheet" href="1.css">
<style type="text/css">

</style>
</head>

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body
</html>

给父类设置margin-top, margin-left 父类会带着子类一起移动。
css:

*{
    padding: 0;
    margin: 0;
}
.wrapper{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
    margin-left: 100px;
}
.content{
    width: 50px;
    height: 50px;
    background-color: orange;
}

这里写图片描述
下面来设置子类相对父类之间的间距：

.content{
    width: 50px;
    height: 50px;
    background-color: orange;
    margin-left: 50px;//添加左边距==成功
    }

这里写图片描述

添加上边距：

.content{
    width: 50px;
    height: 50px;
    background-color: orange;
    /*margin-top: 50px;上边距====失败，无反应*/
    margin-top: 150px;/*成功===连同父级一起移动距上边距150px*/
}

结论：
子类设置margin-top 无法相对于父级来设置，只能相当于上窗口，而且，当二者都设置margin-top时，谁的值大就用谁的值。
这就称为margin塌陷
解决办法：
bfc(block format context)方法:
如何触发一个盒子的bfc?（添加在父级里）
1. position: absolute;
2.display: inline-block;
3.overflow: hidden;
4.float: left/right;
在实际开发中根据具体的情况来用不同的方法，每个方法都有其副作用。

解决后的代码：

css:

.wrapper{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
    margin-left: 100px;
    overflow: hidden;/*超出部分隐藏*/
    /*position: absolute;*/
    /*display: inline-block;*/  
    /*float: left/right;*/
}
.content{
    width: 50px;
    height: 50px;
    background-color: orange;
    margin-top: 50px;/*成功*/
}

这里写图片描述

嫌疑-人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
margin塌陷和margin合并
qq_44239939的博客
04-05 400
一、margin塌陷 父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最大的值 正常情况应该是父级相对于浏览器进行定位，子级应该相对于父级定位的 ，但是 margin 塌陷是在父级相对于浏览器进行定位时，子级没有相对于父级定位，就 像父级的棚子没有了一样 子级相对于父级，就像塌陷了一样 <style> *{ margin: 0; padding: 0; } .wr
CSS高度塌陷问题（float塌陷&margin塌陷）
YANGMENGZHENG的博客
11-08 2493
一、什么是盒子高度塌陷？ 1、解释 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。 2、代码示例 ...
css之margin塌陷
最新发布
蔡里都傻的博客
07-22 424
实际上导致了整个.parent元素向下移动了20px，使得.parent的顶部与页面顶部之间的间距增加了20px，而不是.child元素内部增加了20px的间距。.child元素的margin-top现在正确地在其内部产生了20px的间距，而.parent元素的顶部没有移动。预期效果：如果margin塌陷没有发生，你可能会期望粉色的.child元素在其顶部有20px的空白区域（即margin），这个空白区域只影响.child元素，.parent元素的顶部不会移动。
CSS-margin塌陷问题
oah的博客
09-12 458
互相嵌套 的 块级元素，子元素的margin-top会作用在父元素上。
CSS中的margin塌陷问题
m0_62711871的博客
04-15 2296
在web学习中我们可能会遇到一个问题：margin塌陷问题。 margin塌陷现象有两种：兄弟关系的盒子和父子关系的盒子。 1.兄弟关系盒子：垂直布局的块级元素，上下的margin会合并，取最大的一个margin作为两者间的距离。 解决方法：只给其中一个盒子设置margin值。 2.父子关系盒子：相互嵌套的块级元素，子元素的margin-top会作用在父元素上，使父元素和子元素一起向下移。 例如： <style> *{ margin: 0;
CSS的margin塌陷
zp1996323的博客
11-25 699
今天在某论坛看到一个题目，觉得很有意思，下面我们就来看问题：<div class="box1"></div> <div class="box2"></div> <div class="box3"></div>.box1, .box2, .box3 { width: 200px; height:40px; } .box1, .box3{ margin: 20px; }.box2
纯HTML+css做的个人博客页面Blogger.rar
06-08
2. **盒模型**：CSS盒模型描述了元素如何占据空间，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。理解盒模型对于精确布局至关重要。 3. **布局技术**：CSS提供了多种布局方式，如流式布局...
HTML+CSS布局(常用css控制属性)小结
09-25
HTML+CSS布局是网页设计的基础，主要涉及如何在网页上组织和定位元素。在这个小结中，我们将探讨一些常用的CSS控制属性，这些属性对于创建响应式和有组织的页面布局至关重要。 首先，CSS布局的基本属性包括`width`...
HTML+CSS习题及面试题.pdf
08-07
3. **盒模型**：理解CSS盒模型至关重要，它包括content、padding、border和margin四个部分，决定了元素的大小和位置。盒模型的不同计算方式（W3C标准和IE传统模式）可能导致布局差异，需要开发者灵活应对。 4. **...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1161
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
CSS之margin塌陷问题
zqr4818的博客
06-10 300
CSS之margin塌陷问题
CSS3——垂直定位的小bug（margin塌陷）
abraham的博客
11-16 8607
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; width: 0; } .demo1{ /* margin-left: 100px;
CSS之margin塌陷
dachaoxuexi的博客
02-17 784
CSS中的外边距塌陷（Margin Collapse）问题是指在垂直方向上，当两个或多个块级元素的边距相遇时，它们之间的距离不是它们各自边距的总和，而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。.ac和.bc有上下margin但是只生效了一个最大值。
css中 margin塌陷的问题
任重道远
08-11 535
现象：如下代码 &lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt; &lt;/div&gt; .wrapper{ width: 200px; height: 200px; background: #aaa; margin-left:200px ; margin-top:200px ; } .c...
关于HTMLmargin塌陷的问题
qq_45137516的博客
11-26 176
解决HTML的margin标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
css margin篇 margin塌陷
weixin_41213328的博客
05-08 157
1、嵌套元素里 垂直方向的margin属性 父子元素一起取最大的值 例如：margin-top margin-bottom 这种效果就是margin塌陷 利用bfc 就把这个盒子遵循另一套渲染规则，对于解决margin塌陷特别好用 1、如何触发bfc 触发bfc的集中规则，在父元素中添加以下任意一种都可以（哪个合适用哪个） position:absolute dispaly:inline-block float:left/right overflow:hidden 改变该父元素的渲染规则 2、兄弟元素之间
CSS Margin塌陷（重叠）
Auto
11-24 430
CSS Margin塌陷（重叠） #1 说明 #1.1 什么是Margin塌陷 在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。 注意: 两个盒子的垂直外边距完全接触才会触发 #1.2 塌陷情况有几种? 兄弟关系的盒子...
html+css， margin塌陷及解决方法
m4587的博客
07-26 261
他有两个特殊的伪元素before和after伪元素可以跟正常元素差不多可以一起来使用，但是他没有正常的元素结构一个标签诞生的时候，他就有了伪元素，伪元素存在于逻辑的最前（after）和逻辑的最后（before），只是一般看不见，除非我们通过css选中，并操作他写成spanbefore{}就是选择了span的before伪元素，里面有一个必须要有的值是content“”。浮动元素1）浮动元素产生了浮动流（浮动流产生的效果）所有产生了浮动流的元素，块级元素看不到他们。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值