CSS3快速入门：四、盒子模型

盒子模型

  盒子模型是我们在CSS网页布局中必不可少的东西。网页中的盒子模型用来存放网页中的各个元素，每一个可见的HTML元素都是一个盒子，这些盒子通过嵌套、叠加或者排列等方式组织在一起，形成我们所看见的页面。
  一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分，而content则是HTML元素的内容。如图：

CSS系列文章目录

1. CSS3快速入门：一、三种CSS导入方式
2. CSS3快速入门：二、CSS选择器
3. CSS3快速入门：三、美化网页
4. CSS3快速入门：四、盒子模型
5. CSS3快速入门：五、浮动
6. CSS3快速入门：六、定位

1. 盒子大小

  width和height属性设置的是其元素内容的宽度和高度，盒子的大小=元素内容大小+内边距大小+外边距的大小+边框宽度，计算方式如下：

盒子宽度=width+padding-left+padding-right+margin-left+margin-right+border-left+border-right
盒子高度=height+padding-top+padding-bottom+margin-top+margin-bottom+border-top+border-bottom

2. 外边距设置

• margin：设置外边距，例如margin：10px;设置外边距为10px；margin：10px 5px 15px 20px;顺时针（上右下左）设置外边距；margin：10px 5px;设置上下外边距为10px，左右外边距为5px;margin：10px 5px 15px;设置上边距为10px，左右外边距为5px，下边距为15px。
• margin-top：设置上边距。
• margin-right：设置右边距。
• margin-bottom：设置下边距。
• margin-left：设置左边距。

3. 内边距设置

  内边距设置方法与外边距类似。

4. 边框设置

• border：设置边框粗细、颜色以及线形，例如：border:1px solid red;设置边框宽度为1px，线形为实线，颜色为红色。
• border-top;：设置上边框。
• border-right：设置右边框。
• border-bottom：设置下边框。
• border-left：设置左边框。
• border-radius：给div元素添加圆角的边框。

5. box-sizing属性

box-sizing: content-box|border-box|inherit;

• content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，默认为content-box。
• border-box：为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit 规定应从父元素继承 box-sizing 属性的值。

（1）标准盒模型

box-sizing: content-box;

  标准盒模型的width组成：content（不包含 padding 和 border）。
（2）IE盒模型

box-sizing: border-box;

  IE盒模型的width组成：content + 2 * padding + 2 * border。

6. box-shadow属性

box-shadow: offset-x offset-y blur spread color inset;

• offset-x：不可缺省属性，水平阴影的位置。允许负值。
• offset-y：不可缺省属性，垂直阴影的位置。允许负值。
• blur：可选，模糊距离，只能取正值。blur-radius可设置阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
• spread：可选，阴影的大小，允许负值。spread代表阴影的周长向四周扩展的尺寸，正值阴影扩大，负值阴影缩小。
• color：可选，阴影的颜色。
• inset：可选，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。inset 只能写在参数的第一个或最后一个，其它位置无效。