第五章 - CSS盒模型

我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。

1. 盒模型

1. 1 看透网页布局的本质

我们在进行网页布局的过程中，需要做以下准备：

• 先准备好相关的网页元素，网页元素基本都是盒子BOX
• 利用CSS设置好盒子样式，然后摆放到相应位置
• 往盒子里面装内容

网页布局的核心本质：利用CSS摆放盒子

1.2 盒子模型组成

所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括边框，外边距和实际内容。

盒模型包括IE盒模型和W3C盒模型，下面就对这两种盒模型进行简单介绍

IE盒模型(怪异盒模型)

根据上图，我们可以清楚的看出IE盒模型的宽度和高度包括content+padding+border。

W3C盒模型(标准和模型)

根据上图，我们清楚的看到W3C盒模型的宽高只有content。 这是W3C盒模型和IE盒模型的区别。

[注]下面讲解都是以W3C盒模型为例进行讲解。

1.3 边框

1.2 节中讲述了盒模型的分类，我们注意观察到，上面两个盒模型图中都包括border，这个border就是边框，这个border由三部分组成，边框宽度，边框样式，边框颜色。

[语法]

border: border-width | border-style | border-color;

属性	作用
border-width	定义边框粗细，单位是px
border-style	定义边框的样式
border-color	定义边框的颜色

一般情况下，我们简写为下面的形式

div {
    border: 1px solid #000;
}

 [注]

在border的连写属性中没有顺序要求，一般按照上述顺序书写

如果分开写，则为