难度级别:初级及以上 提问概率: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>
目录
产生问题的原因
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>
通过上图可知,添加一个空白元素的方式,使得标题元素和父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>
通过为 .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>
虽然为 .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>
为父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>
如上图,这种方法并没有改变父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,由于影响因素较多,并不会百分百出现影响父元素的情况。所以想要回答好这类题目,除了日常工作中细心总结外,能够利用业务时间多学习并把所学知识实践到项目中是很重要的。
类似考点文章来源:https://www.toymoban.com/news/detail-844611.html
这类题目属于不经意类型的考点,意思就是日常工作中并不会百分百的出现,而想要完美的回答面试题,就需要说出其原理与多个解决方案。面试官还可能会问,例如你遇到过z-index失效的情况吗?例如你是否用CSS选择器查找过父元素?你知道两个相邻的行内元素之间为什么会有空隙吗等。文章来源地址https://www.toymoban.com/news/detail-844611.html
到了这里,关于CSS - 你遇到过子元素设置margin-top,影响父元素的情况吗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!