搬砖~
块元素
- 块级元素前后会单独换行
- 块级元素可设置width,height,margin,padding属性有效
- 可以容纳行内元素和其他块元素，<form>只能容纳其他块元素
块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。块级元素即使设置了宽度,仍然是独占一行。
原文链接：http://caibaojian.com/inline-vs-block.html
<address>联系方式信息。<article>HTML5文章内容。<aside>HTML5伴随内容。<audio>HTML5音频播放。<blockquote>块引用。<Canvas>HTML5绘制图形。<dd>定义列表中定义条目描述。<div>文档分区。<dl>定义列表。<fieldset>表单元素分组。<figcaption>HTML5图文信息组标题<figure>HTML5图文信息组 (参照<figcaption>)。<footer>HTML5区段尾或页尾。<form>表单。<h1>,<h2>,<h3>,<h4>,<h5>,<h6>标题级别 1-6.<header>HTML5区段头或页头。<hgroup>HTML5标题组。<hr>水平分割线。<noscript>不支持脚本或禁用脚本时显示的内容。<ol>有序列表。<output>HTML5表单输出。<p>行。<pre>预格式化文本。<section>HTML5一个页面区段。<table>表格。<tfoot>表脚注。<ul>无序列表。<video>HTML5视频。
行内元素
行内元素也叫内联元素或者内嵌元素。
- 会在水平方向排列，不能包含块级元素，只能容纳文本或者其他内联元素。
- 设置width、height无效(可以设置line-height)，margin、padding上下无效，但是左右有效
- 宽度高度随文本内容的变化而变化
部分常用的行内元素：
<a>定义超链接
<b>字体加粗
<span>定义在文档中的行内元素
<img>向网页中插入题图像
<input>输入框
<small>小号字体效果
<br>换行
<big>字体加大加粗
<strong>强调的语气
<select>创建单选或多选菜单
<textarea>定义文本域，多行的文本输入控件
行内块元素--inline-block
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
- 不自动换行
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 默认排列方式为从左到右
常见的行内块元素：img input td ;
然而，块级元素和行内元素和行内块级元素可以相互转换的。即通过display属性设置。
{
display:block; //可将行内元素变为块级元素
/*display:inline; //可将块级元素变为行内元素*/
/*display:inline-block;转换为行内块状元素*/
}display
首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline
display常用属性值：
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline-block行内块元素。（CSS2.1 新增的值）既具有block的宽度高度特性又具有inline的同行特性
none此元素不会被显示。ps:
display设置成none不会保留元素本该显示的空间，但是visibility: hidden还会保留。默认情况下，block元素宽度自动填满其父元素宽度；
替换元素
内容不受CSS视觉格式化模型控制，渲染模型不考虑对此内容渲染，拥有固定的尺寸（宽、高）的元素。
或者说浏览器依据元素的标签和属性来决定元素的具体显示内容。
比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。
行内替换元素：如img ，height/width/padding/margin均可用。效果等于块元素。这也解释了为什么有些行内级元素可以设置矿都、高度、和边距。
非替换元素
与替换元素相反，元素的内容直接显示出来，内容包括在文档中的元素，内容都放在本身之中。如<lable>、<p>等；
行内非替换元素：例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。
行内级置换和非置换元素的宽度定义
参考：http://caibaojian.com/inline-vs-block.html
对于行内级非置换元素，宽度设置是不适用的。·
对于行内级置换元素来说，其宽度的设置需遵循以下几点：
- 若宽高的计算值都为
auto且元素有固有宽度，则width的使用值为该固有宽度；典型的例子是：拥有默认宽高的
input当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度 - 若宽度的计算值为
auto且元素有固有宽度，则width的使用值为该固有宽度；例子同上
- 若宽度的计算值为
auto且高度有非auto的计算值，并且元素有固有宽高比，则width的使用值为高度使用值 * 固有宽高比；典型的例子：
img当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置 - 除此之外，当
width的计算值为auto时，则宽度的使用值为300px典型的例子：比如iframe, canvas
其它类型的置换元素，其宽度的定义都参照行内置换元素的定义。
行内级置换和非置换元素的高度定义
对于行内级非置换元素，高度设置是不适用的。
对于行内级置换元素来说，其高度的设置需遵循以下几点：
- 若宽高的计算值都为
auto且元素有固有高度，则height的使用值为该固有高度； - 若高度的计算值为
auto且元素有固有高度，则height的使用值为该固有高度； - 若高度的计算值为
auto且宽度有非auto的计算值，并且元素有固有宽高比，则height的使用值为：宽度使用值 / 固有宽高比； - 若高度的计算值为
auto且上述条件完全不符，则height的使用值不能大于150px，且宽度不能大于长方形高度的2倍。