CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗

这篇具有很好参考价值的文章主要介绍了CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

难度级别:初级及以上                                 提问概率:60% 


例如在一个div盒子元素内,需要设置一个标题,我们用一个p标签做为这个标题元素。根据UI设计要求,标题元素需要距离父div元素20px,理所当然想到的就是为标题元素设置margin-top为20px,希望可以撑开距离顶部的距离。但根据经验可知,这样做是存在问题的,父div元素会紧跟着p元素向下20px,并没有达到撑开20px的效果。先来看一下最初的代码和下图的效果

HTML代码:
<div class="box">
    <div class="inner">
       <p class="title">标题内容</p>
    </div>
</div>

CSS代码:
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>

 

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

目录

产生问题的原因 

1 添加一个元素

2 创建块级格式上下文

3 为父元素设置边框

4 为父div元素设置padding-top样式

5 为子标题元素添加padding-top样式

6 对标题元素使用absolute定位的方式

7 使标题元素变为行内块元素


 

产生问题的原因 

通过上图发现,原本很正常的代码,希望class为title的p标签和class为inner的div标签之间产生20px的间距,但却不经意间使class为inner的div标签与class为box的div标签之间产生了20px的间距,这并不是我们预期的效果。

这种效果也就是所谓的边距折叠,结合本场景的案例,意思就是相邻的class为inner和title两个元素,margin-top进行了折叠,浏览器会解析两个元素margin-top的最大值,并使用这个最大值。但需要注意的是,只有上下边距会产生折叠,左右边距不会产生折叠。

既然知道产生问题的原因,我们接下来尝试一些解决方案,使标题元素顶部,可以正常与父div元素产生20px的间距。

 

1 添加一个元素

产生问题的原因中有一个重要点,在于相邻的两个元素产生了边距折叠,那么使标题元素与父div元素不相邻,便可得到解决。我们在标题元素的上面添加一个div兄弟元素,设置其高度为20px。

HTML代码:
<div class="box">
<div class="inner">
<div class="blank-element"></div>
<p class="title">标题内容</p>
</div>
</div>
CSS代码:
<style>
.blank-element {
height: 20px;
}
</style>

 

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

通过上图可知,添加一个空白元素的方式,使得标题元素和父div元素产生了20px的间距。这样做虽然解决了问题,但多添加一个DOM元素的选择并不是明智的。 

 

2 创建块级格式上下文

我们知道创建块级上下文可以清除浮动,而这种办法也可以解决父子元素边距重叠的问题

HTML代码:
<div class="box">
<div class="inner">
<p class="title">标题内容</p>
</div>
</div>
CSS代码:
<style>
* {
   margin: 0;
   padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
overflow: hidden;
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>

 

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

通过为 .inner 类添加overflow:hidden 的方式,使父div元素和子标题元素规定于块级上下文中。这样做不用添加多余的DOM元素,是个不错的选择。 

3 为父元素设置边框

通过为父元素设置边框的方法也可以解决边距重叠的问题

CSS代码:
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
border-top: 1px solid #000;
width: 300px;
height: 200px;
}
.title {
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>

 

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

虽然为 .inner 类设置上边框解决了问题,但很显然如上图中,使父div又增加了一个带有色值的边框,即便是设置上边框的色值为transparent的透明色,也会使父div的高度加一,这无疑是破坏了原有的代码环境。 

 

4 为父div元素设置padding-top样式

可以避开为子标题元素设置margin-top这一环节,换个思路,将子标题元素的margin-top样式属性去掉,为父div元素设置padding-top属性,也可以解决父子元素边距重叠的问题。

CSS代码:
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
padding-top: 20px;
}
.title {
width: 100%;
text-align: center;
background: yellow;
}
</style>

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

为父div元素设置padding-top属性的方法虽然也解决了边距重叠的问题,但通过上图发现,父div元素的高度变为了220px,这种办法很显然和添加边框的方法类型,都会改变原有代码环境,也不推荐使用。 

5 为子标题元素添加padding-top样式

可以再换一种思路,父div元素不做处理,去掉子标题元素的margin-top样式,为其设置padding-top样式,这样标题元素就会增高,增加空白间距。

CSS代码:
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
width: 100%;
padding-top: 20px;
text-align: center;
background: yellow;
}
</style>

 

CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗,WEB前端最新面试题 - 又全又卷,css,前端,css3,javascript,面试,html5

如上图,这种方法并没有改变父div元素在上下文的代码环境,但标题元素的空白高度增加了,本例中我们为子标题元素的背景色设置为yellow,使得这种方法并不合适。但如果标题元素与父div元素的背景色值相同,这种方法也是可行的。 

6 对标题元素使用absolute定位的方式

既然我们一直在想办法对子标题元素,那么也绝对不会少了position定位的一席之地。可以通过为父div元素设置相对定位,子标题元素再进行absolute绝对定位的方式进行解决。

CSS代码:
<style>
* {
   margin: 0;
padding: 0;
}
    .box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
position: relative;
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
position: absolute;
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>

 这种方法也解决了父子元素边距重叠的问题,但需要注意的是,子标题元素设置了absolute绝对定位,这就使得当前的DOM文档流与之前产生了差异,当父div元素内部再添加其他元素的时候,就需要更多的考虑元素定位问题,虽然解决了当前的问题,但很显然还会产生更多的问题。

 

7 使标题元素变为行内块元素

既然我们所说的边距重叠,说的是块级元素上下文的边距重叠,那么将子标题元素原本的块元素,改变为inline-block行内块元素,同样也是可以解决的。

CSS代码:
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px;
width: 360px;
height: 260px;
border: 1px solid blue;
}
.inner {
margin-left: 30px;
width: 300px;
height: 200px;
}
.title {
display: inline-block;
margin-top: 20px;
width: 100%;
text-align: center;
background: yellow;
}
</style>

这种将块元素更改为行内块元素的方法虽然解决了问题,但他具有行内元素的特性,也就是说在标题元素后面再添加行内元素,便会出现横向排列的情况,所以这种解决方案也是有缺陷的。

综合以上7种解决方案发现,为父元素创建块级格式上下文的方式,不会多添加DOM元素,不会改变原有代码环境,不需要做多余的定位处理,也不需要改变元素原有的属性,而且代码量小,在本案例中是最合适的。


刷题思考

    很多初学者其实并不能很好的回答这道题,原因就在于子元素设置margin-top,由于影响因素较多,并不会百分百出现影响父元素的情况。所以想要回答好这类题目,除了日常工作中细心总结外,能够利用业务时间多学习并把所学知识实践到项目中是很重要的。


类似考点

    这类题目属于不经意类型的考点,意思就是日常工作中并不会百分百的出现,而想要完美的回答面试题,就需要说出其原理与多个解决方案。面试官还可能会问,例如你遇到过z-index失效的情况吗?例如你是否用CSS选择器查找过父元素?你知道两个相邻的行内元素之间为什么会有空隙吗等。文章来源地址https://www.toymoban.com/news/detail-844611.html

到了这里,关于CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS中的margin与padding

    目录  一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前,先看一张图,便于理解  一、margin 1.概念及作用 CSS   margin   属性用于在任何定义的边框之外,为元素周围创建空间。 通过 CSS,您可以完全控

    2024年02月11日
    浏览(38)
  • CSS通过设置filter实现元素交融效果

    2024年02月15日
    浏览(41)
  • css的gap设置元素之间的间隔

    在felx布局中可以使用gap来设置元素之间的间隔;  效果:

    2024年02月07日
    浏览(41)
  • CSS进阶方法——复合选择器、元素显示、背景设置

    复合选择器是建立在基础选择器之上,对基础选择器进行 组合形成 的。 复合选择器可以更准确、更高效的选择目标元素(标签) 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的 常用的复合选择器包括: 后代选择器 、 子选择器 、 并集选择器 、 伪类选

    2024年02月02日
    浏览(47)
  • CSS:给子元素设置了浮动,页面缩放的时候,子元素往下掉

    给子元素设置了浮动,页面缩放的时候,子元素往下掉 html代码: css代码 结果: 但页面缩放的时候,第二个子元素会往下掉 给子元素最外层的大盒子设置宽高即可解决,比如给父盒子设置宽度,其2宽度至少是2个子盒子的宽度之和 页面缩放后,蓝色的子盒子不会掉下去:

    2024年02月17日
    浏览(56)
  • 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

    这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位 , 父元素必须使用 相对定位 ; 使用 样式 隐藏元素 , 使用 样式 显示元素 ; 鼠标经过 链接 时 , 显示 链接 中的 one 元素 , 需要使用如下选择器 进行设置 ; 使用

    2024年02月10日
    浏览(59)
  • uniapp css使用margin的时候导致出现垂直滚动条问题

    最开始不知道是怎么回事,页面明明还没有到达底部,怎么就出现垂直滚动条了。这里的原因就是最外层或者比较外层的view使用了margin就会出现这样的情况。换成padding不会。这是最简单的原因,你可以试一下下面的结构,必然触发,触发条件非常的简单。 大致结构如下:

    2024年02月11日
    浏览(45)
  • HTML+CSS滚动条样式如何单独给firefox设置 scrollbar-width: none;,而不影响其他浏览器

    要在Firefox中单独设置滚动条样式,你可以使用​ ​@-moz-document​ ​规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。 下面是一个例子,演示如何在Firefox中隐藏滚动条: 在上面的例子中,​ ​@-moz-document url-prefix()​ ​表示只有在URL以空字符串(即所有URL)为前

    2024年02月22日
    浏览(50)
  • 在CSS中,盒模型中的padding、border、margin是什么意思?

    在CSS中,盒模型(Box Model)是用来描述和布局HTML元素的基本概念。它将每个HTML元素看作是一个矩形的盒子,这个盒子包括了内容(content)、内边距(padding)、边框(border)和外边距(margin)这几个重要的部分。这些部分一起决定了元素在页面中的大小和定位。 下面是这些

    2024年02月11日
    浏览(82)
  • CSS查缺补漏之《如何优雅解决margin垂直方向塌陷与合并问题?》

    一:父子元素之间margin垂直方向塌陷问题 在处理margin垂直方向问题时,经常会遇到在给子元素设置margin时,导致效果出现在了父元素上;如下代码所示: 代码原义是想实现三方面: ① 将box1的margin-top调为50px,使其与父元素之间形成空隙; ② 将box2的margin-top调为20px,使其与

    2024年02月10日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包