如何将子盒子垂直居中于父盒子？新手可能会想到使用margin，
但是子盒子设置margin-top后，会作用于父盒子，如图1
.father{ width: 300px; height: 300px; background-color: pink; }
.son{ width: 200px; height: 200px; background-color: orange; margin-top:10px}
图1
造成这个现象的原因是：
1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加。
2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。
解决办法如下？
方法一：为父元素设置border
方法二：为父元素添加overflow：hidden；样式
方法三：为父元素或者子元素声明浮动
方法四：为父元素或者子元素声明绝对定位
如何将子盒子垂直居中于父盒子？新手可能会想到使用margin， 但是子盒子设置margin-top后，会作用于父盒...
当为子盒子添加margin-top：10px;## 子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子...
(1)margin-top和margin-bottom不能正常显示： 父盒子中的子盒子使用margin-top不管...
1、水平垂直居中 子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50...
1、margin：盒子与盒子之间的距离 给灰色盒子设置margin时，会吧父级红色盒子带下来，这时要给红色盒子设置...
子盒子margin-top后，父亲跟着往下边移动，解决方法 解决方法： （1）为父盒子设置border，为外层添加...
1.上下margin传递（子传父） 系统默认是你想给父元素设置。 1.1 margin-top传递 一个大盒子里面...
清除浮动的方法 给父盒子直接设置固定高度, 父盒子不再由子盒子撑起缺点：需要提前算好父盒子的高度，实际开发很多时候...
当连个盒子嵌套时，给里面一个盒子设置margin-top属性时，外面一个盒子会被顶下来。但是在body中设置一个盒...
HTML中给一个被父盒子包裹的 div 设置 margin-top 时，会出现属性传递的问题： 解决方法： 1、边...
本文标题：给子盒子设置margin-top时，会作用于父盒子的解决办法
本文链接：https://www.haomeiwen.com/subject/jcjwhftx.html
网友评论