一、 盒子：

CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。

为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

二、盒子模型：

一个盒子我们会分成几个部分：

内容区(content)

内边距(padding)

边框(border)

外边距(margin)

三、盒子模型：

四、内容区：

内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。

如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大 小。

width和height属性只适用于块元素。

五、内边距：

顾名思义，内边距指的就是元素内容区与边框以内 的空间。

默认情况下width和height不包含padding的大小。 使用padding属性来设置元素的内边距。

例如

： padding:10px 20px 30px 40px

这样会设置元素的上、右、下、左四个方向的内边距。

六、内边距：

padding:10px 20px 30px;

分别指定上、左右、下四个方向的内边距 padding:10px 20px;

分别指定上下、左右四个方向的内边距 padding:10px;

同时指定上左右下四个方向的内边距 同时在css中还提供了padding-top、padding-right、padding- right、padding-bottom分别用来指定四个方向的内边距。

七、边框：

可以在元素周围创建边框，边框是元素可见框的最外部。

可以使用border属性来设置盒子的边框： border:1px red solid; 上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。

和padding一样，默认width和height并包括边框的宽度。

八、边框的样式：

边框可以设置多种样式：

none（没有边框）

dotted（点线）

dashed（虚线）

solid（实线）

double（双线）

groove（槽线）

ridge（脊线）

inset（凹边）

outset（凸边）

九、外边距：

外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。

当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，

所以这行代码margin:0 auto可 以使元素居中。

十、display：

我们不能为行内元素设置width、height、 margin-top和margin-bottom。

我们可以通过修改display来修改元素的性 质。

可选值： block：设置元素为块元素 inline：设置元素为行内元素 inline-block：设置元素为行内块元素 none：隐藏元素（元素将在页面中完全消失）