HTML基本布局结构

html 元素之间的关系————血缘关系
父子关系 父元素 子元素 直接包含在元素内容
子孙关系 子元素 祖籍元素 隔多代的元素
兄弟关系 具有相同父元素

    浏览器解析html元素顺序
    从辈分高的，到辈分低的元素
    相同辈分之间，从上往下解析 
    
    注意：在html元素中；所有【相对】的单位，都是 子元素相对父元素
    
     <!-- 
   	 	浏览器的默认布局方式————流式布局
   	 	先从左往右；在从上往下，子元素在父容器内部的默认布局方式。
    	————> 所有的容器内部都有【流】
    	——————> 容器内部 子元素 在【默认流中】，元素都是【默认特点】

    	产生布局流的主要原因：因为元素本身的特点导致的。
 -->
 
 <!-- 浏览器在解析标签时，同时进行布局 -->

 <!-- 
    根据特点分类o
    块元素(block)：默认宽度为百分之百，高度为0，高度由子元素撑起来
    ——————> div section header  nav  main footer  ul li form p...
    行元素(inline)：不能设置宽度和高度；大小为内容大小
    ———————>  span  a 
    行内块(inlin-block): 可以设置宽度和高度，默认大小为内容大小
    ————————> img    
 -->
 <!-- 
    宽度 100% 高度0
  -->
 <header></header>
 <nav></nav>
 <!-- 宽度高度0 -->
 <span></span>
 <!-- 宽度高度0 -->
 <img src="" alt="">

 <!-- 默认 宽度盖度有内容决定 -->

  <!-- 文本类标签 -->
<p>我是段落标签</p>
<span>我是文本标签</span>
<b>字体变粗</b>
<strong>字体变粗</strong>
<i>斜体</i>
<em>斜体</em>
<sub>上标</sub>
<sup>下标</sup>
<del>删除</del>
<!-- 文本修饰：画斜线等 对所有的文字；都可以进行样式的改变
    大小  粗细  颜色  对齐方式；修饰 ...
-->

<!-- 图像类标签：图像自身有像素，也可以通过CSS 改变突变大小；但是清晰度会发生变化 -->
<img style="width: 200px;height: 100px;"
    src="http://b-ssl.duitang.com/uploads/item/201603/27/20160327212905_cvBTz.jpeg" alt="">
<!-- 图片标签 -->
<figure style="height: 100px;">
    <img style="width: 200px;height: 100px;"
        src="http://b-ssl.duitang.com/uploads/item/201603/27/20160327212905_cvBTz.jpeg" alt="">
    <img style="width: 200px;height: 100px;"
        src="http://b-ssl.duitang.com/uploads/item/201603/27/20160327212905