css3（四）盒子模型

• 什么是盒子模型
  所有HTML元素可以看作盒子，无论是div、span、还是a都是盒子
  但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己 就是自己的内容。
  一个盒子中主要的属性就5个：width、height、padding、border、margin
  width和height：内容的宽度、高度（不是盒子的宽度、高度）。
  border：边框。
  padding：内边距。
  margin：外边距。

• 边框
  border-color：边框颜色
  border-width：边框粗细
  border-style：边框样式
  
  边框粗细和样式的用法和颜色的用法一致
  示列

border-top-width:5px; 
border-top-style:solid; 

边框样式常用属性solid（实线）dashed（虚线）
简写（没有顺序）

border: 1px #F00 dashed ;

• padding 内边距
  写法与边框一致
  示列

padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

• margin外边距
  用法与内边距相同
  示列

margin-top: 1 px;
margin-right : 2 px;
margin-bottom : 2 px;
margin-left : 1 px;
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

网页居中对齐

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

• 盒子模型的尺寸

• 标准文档流
  网页在解析的时候的一个“默认”状态。，html元素排版布局过程中遵循于从上向下，从左向右的一个顺序，由窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。