行内元素和块级元素详解
行内元素和块级元素，一般大家都这嘛说，其实有好多细节呢
。你造吗？
一、块级元素和块元素：
1.块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性的：block, list-item, table, flex, grid 值都可以将一个元素设置成块级元素
2.块元素是 display 属性值为 block 的元素，它应该是 块级元素 的一个子集，而不是等同的，一个 块元素 是一个 块级元素，但一个 块级元素 不一定是一个 块元素。
3.怎嘛说呢，比方说某元素是是行内属性，你添加display:block;就是块元素，但是像<li></li>不需要添加display:inline;就可以换行，就叫做块级元素；
二、行内元素和行内级元素：
1.行内级元素是那些不会为自身内容形成新的块。display 属性的：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以将一个元素设置成行内级元素。
2.如同块元素之于块级元素的关系，行内元素仅仅是 display 属性值为 inline 的元素。
三、下边列举一些具体标签是行内级元素还是块级元素：
行内级元素：
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
块级元素:
<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视频。
四、下边说下置换元素：置换元素就归为行内级元素吧
1.一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
2.w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。
3.其实置换元素就是不换行，但是拥有宽，高。类似于inline-block属性。
常见置换元素：<img>、<input>、<textarea>、<select>、<object>
置换元素的高度的设置需遵循以下几点：
- 1.若宽高的计算值都为
auto且元素有固有高度，则height的使用值为该固有高度； - 2.若高度的计算值为
auto且元素有固有高度，则height的使用值为该固有高度； - 3.若高度的计算值为
auto且宽度有非auto的计算值，并且元素有固有宽高比，则height的使用值为：宽度使用值 / 固有宽高比； - 4.若高度的计算值为
auto且上述条件完全不符，则height的使用值不能大于150px，且宽度不能大于长方形高度的2倍。
其它类型的置换元素，其高度的定义都参照行内置换元素的定义。
文章参考：http://caibaojian.com/inline-vs-block.html
http://blog.doyoe.com/
