HTML学习笔记(三)之CSS样式(3) --盒子模型

一、什么是盒子模型

一个装了小米手机的盒子， html盒子的构成

我的理解：我们可以将“网页元素”（html所要处理的文字，图片，音像等信息）理解为装在盒子里面的小米手机。将盒子模型理解为装手机的这个盒子，而盒子是长宽高等属性构成一个立体的盒子，也就是我们今天要讲的盒子模型。那么在html世界里面，我们如何来构建这个盒子呢？请跟着我来一句一句将其写出来。

例子：

盒子使用样式举例

a.边框：

盒子模式使用例子 盒子模式效果图

二、如何使用盒子的属性美化网页

a.border(盒子的边框)

盒子的边框使用案例

a.1 border color(边框颜色)

border-color边框颜色设定方法

a.2 border-width(边框粗细)

边框的粗细设置方法

a.3 border-style(边框样式)

边框样式（border-styler设置） 盒子样式border样式的缩写

网页外边距例子

外边距

margin:0px  auto; 外边距的妙用

网页居中对齐

网页内边距例子：

内边距