行级元素和块级元素

块级元素

块级元素会独占一行，其宽度自动填满其父容器宽度，一般情况下，块级元素可以设置 width,height属性一般用来搭建网站架构、布局、承载内容…

它可以包含以下这些标签：

address 、dir、 div 、dl 、 dt、 dd 、fieldset、 form、 h1-h6 、 hr、 menu、 noframes 、ol、 p、 pre、 table、 ul 等

行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会换行，其宽度随元素的内容而变化，行内元素设置width和height无效。一般用在网站内容中的某些细节或者部位，用以" 强调、 区分样式 、上标、 下标、 锚点 "等

下列这些标签属于内嵌元素：

a 、 b 、 big 、small、 br、 cite、 em 、font 、i 、img 、input、 kbd、 label、 select、 span、 strong、 sub 、sup 、textarea 等

块级元素和行级元素区别

块级元素（相当于执行了style=“display: block;”）
1）独占一行
2）宽度和高度都是可控的，如果没有设置其宽度，将默认铺满整行
3）其内可以包括块级和行级元素

 <div>div</div>
 <p>p</p>
 <p style="width: 100px;height: 100px;background: gray;">p</p>

行级元素 （相当于执行了style=“display: inline;”）
1）不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行
2）宽度和高度是不可控的
3）其内只能包含行级元素

 <strong>strong</strong>
 <span>span</span>
 <span style="width: 100px;height: 100px;background: gray;">span</span>

块级元素转行级标签display: inline

<!-- 块级元素转行级标签 -->
    <p style="width: 100px;height: 100px;background: gray;display: inline;">块级元素转行级标签</p>

行级元素转块级标签display: block

<!-- 行级元素转块级标签 -->
	<span style="width: 100px;height: 100px;background: gray;display: block;">行级元素转块级标签</p>

​