一        DIV+CSS布局优势
        ①    表现和内容分离
        ②    代码简洁，提高代码解析速度
        ③    易于维护和改版
        ④    提高搜索引擎对网页的搜索效率

二        布局相关概念
        1. 盒子模型
            内容、填充、补白、边界
        2.    块级元素和行内元素
            2.1.    块级元素
                ①总是在新行上开始；
                ②高度，行高以及外边距和内边距都可控制；
                ③宽度缺省是它的容器的100%，除非设定一个宽度。
                ④它可以容纳内联元素和其他块元素
            2.2.    行内元素
                ①    和其他元素都在一行上
                ②    高、行高、内外边距不可变
                ③    宽只与内容有关系
                ④    只可以容纳文本或其他行内元素
        3. 无意义的块级元素div 和 无意义的行内元素span
        4. 盒子区块的浮动
        5.    盒子区块的定位

三        布局相关的属性
        1.    尺寸
            width
            min-width
            max-width
            height
            min-height
            max-height
        2.    外补白
            margin
            margin-top
            margin-right
            margin-bottom
            margin-left
        3. 内补白
            padding
            padding-top
            padding-right
            padding-bottom
            padding-left
        4.    布局
            display
            visibility
            overflow
            overflow-x
            overflow-y
            float
            clear
        5. 定位
            position
            left
            right
            top
            bottom
            z-index
            float

四        布局设计
        1.    居中
        2.    浮动布局
            2.1    两列浮动
            2.2     三列浮动
        

五        行内元素与块级元素
    块级元素列表
        <address>    定义地址
        <caption>    定义表格标题
        <dd>    定义列表中定义条目
        <div>    定义文档中的分区或节
        <dl>    定义列表
        <dt>    定义列表中的项目
        <fieldset>    定义一个框架集
        <form>    创建 HTML 表单
        <h1>    定义最大的标题
        <h2>    定义副标题
        <h3>    定义标题
        <h4>    定义标题
        <h5>    定义标题
        <h6>    定义最小的标题
        <hr>    创建一条水平线
        <legend>    元素为 fieldset 元素定义标题
        <li>    标签定义列表项目
        <noframes>    为那些不支持框架的浏览器显示文本，于 frameset 元素内部
        <noscript>    定义在脚本未被执行时的替代内容
        <ol>    定义有序列表
        <ul>    定义无序列表  记住
        <p>    标签定义段落  记住
        <pre>    定义预格式化的文本
        <table>    标签定义 HTML 表格
        <tbody>    标签表格主体（正文）
        <td>    表格中的标准单元格
        <tfoot>    定义表格的页脚（脚注或表注）
        <th>    定义表头单元格
        <thead>    标签定义表格的表头
        <tr>    定义表格中的行
    行内元素列表
        <a>    标签可定义锚   记住
        <abbr>    表示一个缩写形式
        <acronym>    定义只取首字母缩写
        <b>    字体加粗
        <bdo>    可覆盖默认的文本方向
        <big>    大号字体加粗
        <br>    换行
        <cite>    引用进行定义
        <code>    定义计算机代码文本
        <dfn>    定义一个定义项目
        <em>    定义为强调的内容
        <i>    斜体文本效果
        <img>    向网页中嵌入一幅图像
        <input>    输入框
        <kbd>    定义键盘文本
        <label>    标签为 input 元素定义标注（标记）
        <q>    定义短的引用
        <samp>    定义样本文本
        <select>    创建单选或多选菜单
        <small>    呈现小号字体效果
        <span>    组合文档中的行内元素
        <strong>    语气更强的强调的内容
        <sub>    定义下标文本
        <sup>    定义上标文本
        <textarea>    多行的文本输入控件
        <tt>    打字机或者等宽的文本效果
        <var>    定义变量
        可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
        <button>    按钮
        <del>    定义文档中已被删除的文本
        <iframe>    创建包含另外一个文档的内联框架（即行内框架）
        <ins>    标签定义已经被插入文档中的文本
        <map>    客户端图像映射（即热区）
        <object>    object对象
        <script>    客户端脚本

六、行内元素与块级函数的三个区别
    1.行内元素与块级元素直观上的区别
        行内元素会在一条直线上排列，都是同一行的，水平方向排列
        块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
    2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
    3.行内元素与块级元素属性的不同，主要是盒模型属性上
        行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding有效

七、行内元素转换为块级元素
        display:block (字面意思表现形式设为块级)