css样式4 外边距(margin2)

接上节课来讲  本章会对外边距做一个最全面的分析 以及出现的问题 解决方法

如果两个盒子  第一个盒子设置一个下边距   第二个盒子设置一个上边距 会是怎么样的？

没加边距是这样的                                                                                    给第一个div1加了下外边距是这样的                                                 再设置第二个盒子的上外边距是这样的

                                          

 

 

 由此 我们可以发现一个问题  就是外边距会发生合并    但有两个问题  如果i中间隔了一个呢？   合并之后外边距是根据第一个盒子边距还是第二个盒子的边距确定？

比如：

在第一个盒子下面增加一个p 第一个盒子和第二个盒子的外边距设置不一样

这里我要给大家简单说明一下两个属性     display：none； 和 visibility：hidden；

前者是消失  在页面上压根不存在  后者是隐藏 在页面中有空白位置

比如给上述p标签分别加上这两个属性  那么有两种不同效果

 

很明显 中间隔了一个  也就是div1和div2不相邻的情况下 他们是不会发生合并的

但如果把p标签去掉 那边距会是30px 还是50px呢   有什么结论？

先看测试

 

 可以看出  他们边距发生了合并并且为50px

因此  我们不难的出这样一个结论一

垂直相邻的两个块级元素margin会发生合并   取大值， 若不相邻  可以解决这个问题

但是 如果说div1和div2是父子级关系呢？我们来研究一下

 

我们需要给最外层外边距距离顶端30px   上图效果 正确的   但我需要粉色盒子距离绿色盒子顶端30px

如果我们直接给div2设置上外边距30px，

 

发现合并的  达不到我想要的效果 这个问题我们称为margin击穿

归结为；父级元素边距模糊  子级元素找不到边界在哪儿

怎么办    有以下解决问题

办法① 就是上一章我写的  给父元素添加边框（防止击穿）

但是 有一个问题   虽然实现效果了  但是盒子大小发生了变化

办法②添加overf：auto；

 

 但是 同样会出现问题：虽然overf：auto；可以保护击穿  但对于像如果里面有下拉列表 select  option  不可控

办法③加一个伪类元素

 

 这个办法也是目前来讲最专业解决击穿的问题

垂直方向上的margin讨论完了 

我们在看看水平方向上的margin会发生哪些变化

 

 我们不难看出行内块水平方向上的margin不会发生合并

 

 行元素的水平方向的margin也不会发生合并

 

 添加浮动元素水平上的margin也不会发生合并

 

 

 虽然添加定位元素的margin从视觉角度排成一排 后写盖先写 往右边移动了200px  但是margin依然不会发生合并

问题：margin和padding在任何情况下都生效吗？（生效了  又没完全生效）

margin块元素永远生效   行元素margin上下不生效

padding 块元素永远生效  行元素上下padding只对背景区域有作用，但并不会占有真实的结构区域

衍生出来的问题即是块元素大小由谁决定  行元素大小由谁决定

块元素 ：宽度由所在容器决定    高度由内容决定

行元素：宽度由内容长度决定，高度由文本大小决定

 

边距负值问题

当元素的margin减少（margin大于等于0）的时候：margin会向着元素边界的方向发生变化，直至为零

当元素margin减少越过0值的时候：margin会保持在元素边界不动，元素本身会向着正值的反方向发生移动