9.盒模型使用技巧及相关问题

一。margin技巧1

设置元素水平居中：margin x  auto;----常用

如果使盒子在浏览器中居中，可使用auto这个技巧。

auto 自适应浏览器的宽度方向，不能用在高度方向。

二。margin使用技巧2

margin 负值让元素位移及边框合并 ----常用

针对盒子模型不能贴边的问题，是因为body包含8个元素。想要贴边，必须要减去8个元素。

外边距合并

外边框合并值得是，当两个垂直外边框相遇时，他们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，解决方法如下：

1.使用这种特性

2.设置一边的外边距，一般设置margin-top  为负数

3.将元素浮动或者定位

三。margin-top塌陷

在两个盒子嵌套时候，内部盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1.外部盒子设置一个边框

2.外部盒子设置overflow ：hidden

3.使用伪元素类  ---常用

第一个设置一个边框能够解决塌陷：

第二个设置overflow解决塌陷问题：不常用，有的时候会特意制造这种塌陷场景

第三种解决margin-top塌陷的问题：比较高大上，常用的一种方式

四。CSS元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

1.visible  默认值 。内容不会被修剪，会呈现在元素框之外。

2.hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能。

3.scroll  内容会被修剪，不管是否溢出浏览器都会显示滚动条以便查看其余内容。---不要使用

4.auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，只有纵向滚动条。

5.inherit  规定应该从父元素继承overflow属性的值.