1、常见块元素：div h1 h2 h3 h4 h5 h6 p ul li ol form tr th 。
特点：块元素display：block 独占一行 默认宽度父级宽度的100%，默认垂直显示，可设置宽高、padding、margin。
2、常见行内元素：span a i br。
特点：行元素display：inline 宽度自适应，靠内容撑开（以内容的大小为大小），水平显示，在一行之内。不能写宽高，可改变display:block不支持垂直方向的margin和padding,但左右方向的margin和padding是可以设置的。
3、常见行块元素：img。
特点：display：inline-block 对外表现为行级，对内表现为块级支持宽高，支持垂直方向的margin和padding。
若想要使行元素块元素之间相互转换可设置display属性。
它们的区别主要有以下几点：
1、CSS有个属性叫做display，其取值可以为inline-block。W3CSchool中说display 属性规定元素应该生成的框的类型。
2、display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性。
3、元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
4、块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
5、display其中块级元素对应display：block，行内元素对应display：inline。可以通过修改元素的display属性来切换行内元素和块级元素。
css 行内元素有哪些：* a - 锚点、* dfn - 定义字段、* em - 强调、* i - 斜体、* img - 图片、* strike - 中划线、* strong - 粗体强调、* sub - 下标、* sup - 上标、* textarea - 多行文本输入框、* tt - 电传文本、* form - 交互表单。
行内元素有哪些：a、b、span、img、input、strong、select、label、em、button。
一、块级元素：block element
每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级，也可以包含行级元素。
DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
二、行内元素：inline element
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
