文档流

  所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。<br />       当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。

HTML元素分类

• 块级元素－display: block;

  １.　每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
  ２.　元素的高度(height)，宽度(width)，行高(line-height)以及顶和底边距(margin,padding)都可设置。
  ３．元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
  常用的块元素有：<div>,<p>,<h1>…<h6>,<ul>,<ol>,<dl><table>,<address>,<blockquote>,<form>
  ４.　设置display:block，可以将元素转换块级元素。

• 内联元素 - display: inline;

1. 和其它元素都在一行上；
2. 元素的高度，宽度及顶部和底部边距不可设置；
3. 元素的宽度就是他包含的文字和图片的宽度，不可改变。
4. 常用的内联元素有：<a>,<span>，<br>,<strong>,<em>
5. 设置display:inline；可以将块级元素转换为内联元素

• 内联块元素

  内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素 设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。
  inline-block元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置

盒模型

什么是盒子模型?

网页上的每一个标签都是一个盒子,每个盒子都有四个属性

• 内容（content）
  盒子里装的东西,网页中通常是指文字和图片
  
• 填充（padding，内边距）
  比如说是我们买酒,怕酒在物流过程中损坏，而添加的泡沫或者其它抗震的辅料
  
• 边框（border）：盒子本身
  
• 边界（margin，外边距）
  盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
  
• 标准的盒子模型图 (注意:它和IE浏览器的标准不同):
  
  
  

  盒子模型几个属性的介绍

1. 内容属性
   
   
   

2. 内边距
   
   
   

   注意内边距的书写格式需要掌握,它和iOS中设置内边距一样(注意是:上右下左,而且参数之间是没有逗号的)
   
   
   

3. 边框
   
   
   

注意 : 设置圆角有几种方式,详情可以去看官网

1. 设置外边距

    注意 :设置外边距也有几种方式,需要去官网上了解一下,和内边距一样,需要知道外边距的几种写法所表示的什么意思.<br />

   
   
   

盒模型分为两类：标准盒子模型和怪异盒子模型。

标准盒子模型就不用说了，就是很规范的盒模型。如下图所示：

从上图可以看到标准盒子模型包括margin，border，padding和content，并且content部分不包含其他部分。
怪异盒模型又称为IE盒子模型。如图所示：

很多人不能理解觉得上面两个图没有区别啊。其实有一些区别的，它也包括margin，border，padding，content。但是它的content部分包含了border和padding。