magin塌陷和合并，浮动，定位

目录

1 margin 塌陷问题

2 margin 合并问题

3.处理内容溢出

4.隐藏元素方式

5.布局技巧

6.元素之间的空白问题

7.行内块的幽灵空白问题

8.元素浮动后会有哪些影响

9.解决浮动产生的影响（清除浮动）

定位

常用布局

---

1 margin 塌陷问题

什么是 margin 塌陷？

        第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

       方案一： 给父元素设置不为 0 的 padding 。

       方案二： 给父元素设置宽度不为 0 的 border 。     

       方案三：给父元素设置 css 样式 overflow:hidden

---

2 margin 合并问题

什么是 margin 合并？

      上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？ 

      无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

---

3.处理内容溢出

---

4.隐藏元素方式

---

5.布局技巧

---

6.元素之间的空白问题

---

7.行内块的幽灵空白问题

---

8.元素浮动后会有哪些影响

---

9.解决浮动产生的影响（清除浮动）

---

定位

---

常用布局

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页 的版心。

版心的宽度一般是 960 ~ 1200 像素之间。

版心可以是一个，也可以是多个。