盒子模型-小了解

前言：

什么是盒子模型？我们可以把所有的html标签都看作一个盒子，这些盒子就像我们生活中的快递，每个盒子都存在 内容（买的物品）、保护层（内边距）、快递盒（边框）、快递之间的距离（外间距）。

所以，盒子模型主要定义了四个区域：内容（content）、内边距（pading）、边框（border）、外间距（margin）。

盒子模型有两种一种是W3C模型，另一种是IE怪异盒子模型。我们常见的盒子模型是W3C盒子模型，这种我们定义的宽、高就是内容的宽、高，而真正盒子的宽高则是 内容宽高+内边距+边框。另一种我们等到最后说，别弄混了。

盒子模型的作用：

方便。将每个标签看作一个盒子，会使我们的页面代码更加的整洁。并且像是给了一个默认的规定一样，当大家看到标签时不约而同的想到盒子模型，这个标签设的内容、保护层、边框、外间距，让人一瞬间既能在复杂的代码区找到其对应的属性，方便了阅读，同时也能使页面更加美观。（我自己写的，别信，答到卷子上未必有分）

盒子模型的四个属性值：

1.内容（content）；这一块我们一般都是定义它的宽高和文本，所以常用的属性是width、height、text等。

2.内边距：使用的属性名是 padding，这个属性名后一般常跟数值。

3.边框：使用的属性名是border，这个属性名可以有三个值，一个用来限定边框宽度的（border-width）、一个用来规定边框样式的（border-style）、一个用来规定边框颜色的（border-color）

4.外间距：使用的属性名是 margin，其后常跟距离数值，表示离别的标签的距离。

下面详细讲解以下每个标签，并说明以下我们在制作网页时常遇到的问题：

padding标签：

用来设定盒子内容到盒子边界的距离，值得注意的是：设定好宽高在设定内间距时，会导致盒子变形。

（padding：0px 0px）

padding后跟两个值，两个值分别表示：上、下间距，右、左间距

（padding：0px 0px 0px）

padding后跟三个值，三个值分别表示：上间距，右、左间距，下间距

（padding：0px 0px 0px 0px）

padding后最多可以跟四个值，四个值分别表示：上间距，右间距，下间距，左间距

对于需要单独表示的右间距，一般都需要设置四个值，或者使用 padding-left 单独设置。其他三个方向同样可以使用这样单独表示的方式：padding-top（上间距）、padding-right（右间距）、padding-bottom（下间距）。

border标签：

为盒子增加一个边框，使界面更有分界感，结构更清晰。

与border相关的属性有：

border-style：规定边框的样式，常用的一般为实线（solid）、虚线（dashed）、点线（dotted）

border-width：边框粗细，用来调节边框的显示效果，后面常跟像素大小

border-color：边框的颜色，可以设定与文本一样的颜色达到隐藏边框的效果，也可以设定不一样的演示来突出我们想要显示的区域。

border-radius:边框圆角，这个属性是用来调整边框四个角的弧度的，当为其添加值（和上面的值一样，通常为xx像素）时，直角就会变成圆弧，值为50%时，正方形变圆，矩形变椭圆。

border，后面是三个值（宽度、样式、颜色），通过使用top、right、bottom、left单独的对一个方向变宽进行样式设计。

border-radius，后面一个值（0px），表示四个角都设置这个大小

border-radius，后面跟两个值（0px 0px；）表示（左上、右下，右上、左下）

border-radius，后面跟三个值（0px，0px，0px），表示（左上，右上、左下，右下）

border-radius，后面四个值（0px，0px，0px，0px）分别对应着左上角、右上角、右下角、左下角。（注意括号里面是分号，还是逗号）

除了上述的表示方式，还有一种定义单个角的方式，例如：border-top-left-radius（左上角）

margin标签：

margin标签用来设定当前盒子与其它标签之间的距离。

由上述可以看出，margin和padding一样都有四个方向，所以它的表示形式也和padding一样，这里就不再过多描述。

使用这些属性需要注意的地方：

1.margin属性使用时，当紧挨的两个模块竖直排列时，他们之间的距离只会取较大那一方的margin值，不会叠加取值。a、b之间的间距 = a的下间距（b的上间距）谁大取谁。

但是当两个模块是水平排列时，都设定左右的间距值，这个时候他们  a、b之间的距离=a物体的右间距+b物体的左间距 这个时候又是可以叠加的了

2.问题描述如下图：

之所以出现这个问题和body标签的特殊性有关。body标签使用margin属性时，margin-bottom会使body里面的内容下移，而不是移动body外的标签。

面对这个问题，给出大家四种解决方案（一般会在body标签下直接出现）：

1.不给子元素添加margin属性，改为对父元素添加padding属性。（例如上述例子中，去掉.logo内的margin元素，改为对.header添加padding）

2.为父元素添加边框，当.header属性拥有边框时，.logo就会根据边框进行下移，不会移动父元素。

3.为子元素添加float浮动，这样也能避免移动出现父边框移动的情况

4.为父元素添加 overflow：auto 属性。（这个属性一般会和凭空出现的滚动条相关）

另一个盒子模型：

IE异构盒子，这个盒子设定的宽度 = 内容宽度+内边距宽度+盒子边框宽度。