2021-03-11css 在父元素和子元素之间得应用（重难点）

2.2、在父元素和子元素之间得应用（重难点）

1、父子之间水平距离
在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。margin-right同理也是

image.png

在子元素中设置垂直方向得margin
-----问题:没有效果和父元素一块下来了

image.png

原因：实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug–父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。
解决办法

 /*方法一：给父元素添加 缺点：增加1px误差*/  /*padding-top: 1px;*/
/*    方法二：给父元素添加   缺点：增加1px误差*//*    border: solid 1px;*/
/*    方法四：给父元素或者子元素声明浮动float*   没有必要/
/*    overflow: hidden;*//*    方法三：给父元素添加 没有误差*/
/*    方法五：使父元素或子元素声明为绝对定位：position:absolute;*/
/*    方法六：给父元素添加属性 overflow:auto; positon:relative；（注：此方法为后续添加，感谢博友@小精灵Pawn提供此方法）*/