在Web前端开发-CSS入门干货01 和Web前端开发-CSS入门干货02介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式。

其中字体、文本、背景等样式的设置可以看作是对元素内容的修饰；而网页的布局是对元素和元素之间关系的修饰，其中重要的手段便是距离，从而引出单个元素的盒子模型，以及元素之间的浮动、定位方式。

1.盒子模型

HTML中所有元素都可以看成一个盒子，从内到外包括实际内容（如100x50占据的空间）、内边距（padding）、边框（border）、外边距（margin）四部分，这些盒子的组成都是元素的样式。

内边距是指实际内容到边框的距离（分为上下左右四个分量），外边距是指元素的边框到另一个元素的边框的距离（也分为上下左右四个分量），边框是线（线也是有宽度的）。

（1）盒子模型对于所有浏览器都是通用的吗？

并不是，实际上CSS中的盒子模型（Box model）分为两种：W3C标准盒子模型和IE标准盒子模型。

大多数的浏览器都采用W3C标准盒子模型，然而IE5.5及更早的版本使用的是IE盒模型，IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准，所以如果浏览器使用IE内核但不是兼容模式下的话，该浏览器采用的还有可能是IE标准盒子模型。

（2）W3C标准盒子模型和IE标准盒子模型的区别

W3C标准盒子模型：元素宽度 = width+padding(内边距)+border(边框)+margin(外边距)；

IE标准盒子模型：元素宽度 = width+margin(外边距)，即width=实际内容宽度+padding(内边距)+border(边框)

（3）如何查看当前浏览器采用的是哪种盒子模型呢？

直接新建一个html文件，在body中新建一个div标签，然后设置其样式如下，通过浏览器查看盒子模型参数，便可以确定在该html文档中采用的盒子模型。

div {
      background-color: chocolate;
      width: 100px;
      height: 100px;
      padding: 10px;
       border: 2px solid red;
 }

（4）如何通过设置样式更改盒子模型呢？

在CSS3中提供了box-sizing样式，

1）box-sizing:content-box; 将采用W3C标准的盒子模型

2）box-sizing:border-box; 将采用IE标准的盒子模型

3）box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

（5）对于块级元素和行内元素，盒子模型是否有区别？

对于块级元素盒子模型各项设置都有效，对于行内元素

1）行内元素可以设置padding，但是垂直方向padding无效

2）行内元素可以设置border，但是垂直方向的border无效

3）行内元素可以设置margin，但是垂直方向的margin无效

2.盒子模型中各项样式

（1）内边距（padding）

1）包括四个属性：左内边距、右内边距、上内边距、下内边距；padding-left、padding-right、padding-top、padding-bottom。

2）内边距样式复合式写法

（2）边框（border）

1）包括三个属性：边框宽度、边框样式、边框颜色；border-width、border-style、border-color。

2）边框样式复合式写法，三个属性没有顺序：

border: 1px  solid   red；

3）边框的四条边单独设置样式

上边框（border-top）、下边框（border-bottom）、左边框（border-left）、右边框（border-right）

4）应用例子

在表格边框中，为避免相邻单元格的边框叠加变粗，与整体样式不符，可以利用border-collasps:collasps样式；其可以将单元格相邻边框进行合并，而只显示一个边框的宽度。

（3）外边距（margin）

1）包括四个属性：左外边距、右外边距、上外边距、下外边距；margin-left、margin-right、margin-top、margin-bottom。

2）外边距样式复合式写法同内边距样式复合式写法

3）典型应用

外边距可以让块级元素水平居中，需要满足两个条件：

a）块级元素需要指定宽度；

b）块级元素左右的外边距都设置为auto，其写法：

margin-left:auto;margin-right:auto;或者margin:auto;或者margin: 0 auto;

对于行内元素或者行内块元素，可以为其父元素设置text-align:center样式。

（4）CSS3中新增的样式

以下在IE9及以上版本中有效

1）圆角边框

语法：border-radius:length;

2）盒子阴影

语法：box-shadow:h-shadow v-shadow blur spread color inset;

3）文字阴影

语法：text-shadow:h-shadow v-shadow blur color

要注意的是html所有元素都可以看作盒子，可以用盒子模型进行理解。