Html中行内元素有哪些？

a - 锚点；

abbr - 缩写；

acronym - 首字；

b - 粗体(不推荐)；

bdo - bidi override；

big - 大字体；

br - 换行；

cite - 引用；

code - 计算机代码(在引用源码的时候需要)；

dfn - 定义字段；

em - 强调；

font - 字体设定(不推荐)；

i - 斜体；

img - 图片；

input - 输入框；

kbd - 定义键盘文本；

label - 表格标签；

q - 短引用；

s - 中划线(不推荐)；

samp - 定义范例计算机代码；

select - 项目选择；

small - 小字体文本；

span - 常用内联容器，定义文本内区块；

strike - 中划线；

strong - 粗体强调；

sub - 下标；

sup - 上标；

textarea - 多行文本输入框；

tt - 电传文本；

u - 下划线；

var - 定义变量。

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

行内、块状元素区别：

块级元素会独占一行，其宽度自动填满其父元素宽度,行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。

一般情况下，块级元素可以设置 width, height属性，行内元素设置width,  height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

1.下表列出了内联元素和块级元素的主要区别

块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）

缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）

第一种解决方案：原理bfc相关

2.父子的相邻，父元素的margin-top和子元素的margin-top发生重叠 （重叠之后的值是两个值中的最大值）

关于父子相邻的解决方案：

第一种解决方案.取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。

第二种解决方案，父元素加overflow:hidden属性 -- 原理bfc相关

块元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td

行内元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。

多个行内元素排列在一起，他们之间会出席空格。

行内元素包括：font , span, b , i , u, sub, sup, a ,

标红为常见的块元素和行内元素。

行内块：共享一行，可设置宽高,多个行内元素排列在一起，他们之间会出席空格。可设置margin,padding属性。集合了块和行内的所有优点。

行内块元素包括：img,input

注意：设置两个并排的div.一个width:20%,一个width:80%.用display:inline-block 让两个div并排，会使右侧的div向下排列

效果图：

产生该问题的原因是：div1+div2的宽度：100%.但是display:inline-block 的设置会使两个div之间有空格。width就为100%再加上空格 大于 父级的宽度，所以会折行。

处理方式：将div1和div2之间的空格去掉

text-align这个属性在水平方向上对行内（inline），行内块(inline-block)以及文字都起作用（行内元素或行内块元素设置水平居中用text-align属性）

行内元素：垂直居中用line-height属性

行内块：设置垂直居中，不能line-height会出问题，应该用vertical-align.多个行内块元素并排，同时设置居中

同级中找设置一个最高的行内块元素(这个行内块元素内容为空，仅仅用来做对齐的标尺)，让其他元素向它对齐。

块元素：

块元素水平居中：用margin-left和margin-right设置为auto的方式 类似：margin:0 auto

块元素水平垂直居中：

情况1子级元素定宽定高(宽高各为100px)：

情况2：子级元素宽高不定：

第一种：

第二种：

块元素：display:block

行内：display:inline

行内块：display:inline-block

让块消失：display:none（元素结构还在，但是在页面不显示，也不占位置）

vertical-align属性：垂直方向的对齐方式，对齐依据找到同级别最高的元素，以该元素为参照进行vertical-align的设置。

值：top,middle,bottom

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

---