文档流与盒模型

一、文档流（normal flow）

  1、文档流（normal flow）

      网页是一个多层结构，一层摞着一层

            通过CSS可以为每一层来设置样式

            作为用户来讲只能看到最顶上一层

            这些层中最底下的一层称为文档流，文档流是网页的基础

            我们所创建的元素默认都是在文档流中进行排列

       对于我们来说元素主要有两个状态

           ① 在文档流中

           ② 不在文档流中（脱离文档流）

2、元素在文档流中的特点        

        块元素

           块元素会在页面中独占一行

           块元素自上向下垂直排列

           默认宽度是父元素的全部（把父元素填满）

           默认高度是被内容撑开（被子元素撑开）

        行内元素

           行内元素不会独占一行，只占自身大小

           行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素

            则元素会换到第二行继续自左向右排列

            行内元素的默认宽度和高度都是被内容撑开

二、盒模型（box model）

        CSS将页面中的所有元素都设置为了一个矩形的盒子

              将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到了不同的位置

         每一个盒子都由以下几个部分组成：

          内容区（content）

          内边距（padding）

          边框（border）

          外边距（margin）