Web前端自学记录（三）（Layout布局）

Layout布局基础

1.文档流

文档流（normal flow）

网页是一个多层结构，一层压一层，通过CSS可以为每一层设置样式，作为用户只能看到最顶上的一层
这些层中最底下的一层称为文档流，是网页的基础，我们所创建的元素默认都是在文档流中进行排列

对于我们来说元素主要有两个状态：在文档流中
			                 不在文档流中，脱离文档流

元素在文档流中的特点

块元素
   块元素会在页面中独占一行
   默认宽度是父元素的宽度
   默认高度是被内容（子元素）撑开的高度
行内元素
   行内元素不会独占一行。只占自身的大小
   行内元素在页面中自左向右水平排列，如果一行中不能容纳下所有的行内元素，会自动换到第二行继续自左向右排列
   行内元素的默认宽度和高度都是被内容撑开的宽度和高度

2.盒子模型

盒子模型（box model）

CSS将页面中的所有元素设置成一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
            内容区(content)
            内边距(padding)
            边框(border)
            外边距(margin)

内容区(content)

元素中所有的子元素和文本内容都在内容区排列
内容区的大小由width和height两个属性设置

边框(border)：盒子的边缘