html元素分类及盒子特性分析

分类方式：
一、替换元素和不可替换元素
       （1）替换元素
        浏览器根据元素的标签和属性，来决定元素的具体显示内容。<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。
        例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看HTML代码，则看不到图片的实际内容；
        （2）不可替换元素
         内容直接展示给用户端，如段落<p>，文字内容被全部展示，且html中大多数元素是不可替换元素。

二、显示元素
        （1）行内元素
         左右可以有其它元素，不形成新的内容块，如<a>、<span>、<strong>等。几乎所有的可替换元素都是行内元素，例如<img>、<input>等。display属性等于“inline”的元素也是行内元素。
        （2）块级元素
          默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，独占一行。如<div>、<p>、<h1>到<h6>等。
CSS设定了浮动（由于浮动，其旁边可能会有其他元素的存在）、display设置block或list-item，这些元素都是块级元素。

三、元素的width height margin padding 特性
         （1）块级元素：
width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。例如：div
         （2）行内替换元素：
width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。 例如：img
          （3）行内非替换元素
width、 height不起作用，用line-height来控制高度。padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。margin左右起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高。