盒子模型oooo

盒子模型

盒子由content内容、border边框线、padding组成。

content内容区域

•  内容区域：一般包括高度、宽度、背景颜色等属性

• border边块线

  盒子的边框线，一般的，区域和区域间都有边框线，目的是区分块，默认情况下，border会将四边均加边框，可以通过border-left/right/top/bottom来自定义某些边。

• padding内边距

  页面间的内容一般情况下是不会和某个块（盒子）定紧紧相挨着的，会留部分空白

• margin外边距

• 一般情况下，为了页面美观，块与块之间会留有距离

 border-style：solid-实线边框，dashed-虚线边框，dotted-点线边框

内边距

padding: 10px 60px 90px;

/* 上，左右，下 */

padding: 10px 30px 60px 90px;

/* 上 右 下 左 */

 

 当我们给盒子指定padding值之后，发生了2件事情:

1.内容和边框有了距离，添加了内边距。
2.padding影响了盒子实际大小。

外边距 

外边距可以让块级盒子水平居中，但是必须茜足两个条件:

①盒子必须指定了宽度(width )。
②盒子左右的外边距都设置为auto 。

例子

. header{ width: 960px; margin: 0 auto; }

清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
        padding:0;/*清除内边距*/
 
        margin : 0;/*清除外边距*/
 
}
注意:行内元素为了照预兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

外边距塌陷

什么叫盒子模型塌陷

•  当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。

解决盒子模型塌陷的方法：

1.给父容器设置上边线 

border: 1px solid red;

 2.给父元素设置内边距

padding: 5px;