CSS 3

文档流

网页是多层结构 但用户只能看到最顶一层
最下一层为文档流 是网页基础 所创建元素默认都在文档流中排列
元素在文档流中的特点：

• 块元素
  -在页面中独占一行 默认宽度是父元素的全部
  -默认高度被子元素撑开
  -行内元素
  -不会独占页面一行 只占自身的大小

盒模型

CSS将页面中所有元素设置为一个矩形盒子 布局就是将不同的盒子摆放到不同位置
每个盒子由以下几个部分组成：
内容区

• 元素中所有子元素和文本内容在其中排列
• width宽度
• height高度
  边框
• 宽度 border-width
• 颜色 border-color
• 样式 border-style

内边距padding

• 内容区和边框之间的距离是内边距
• 一共有四个方向的内边距
  padding-top
  padding-right
  padding-bottom
  padding-left
  -内边距的设置影响盒子大小
  -背景颜色会延伸到内边距上

外边距（margin）

• 不影响可见框的大小
• 但影响盒子位置
• 共有四个方向的外边距
  margin-top
  上外边距 设置一个正值 元素会向下移动
  margin-left/-bottom

margin的简写属性
margin可以同时设置四个方向的外边距 用法和padding一样

若将一个宽度和一个外边距设置为auto 则宽度会调整到最大 设置为auto的外边距会自动为0
如果将三个值都设置为auto 则外边距都是0 宽度最大