Question

行内、块级、行内块元素一览

Answer 1

HTML标签常见类型：块元素和行内元素。

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素特点：

Html样式：

<span>行内元素1</span>

<span>行内元素2</span>

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块级元素特点：

Html样式：

<div>块级元素1</div>

<div>块级元素2</div>

普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

行内块元素的特点：

特殊 ：结合行内元素和块级元素的特点

Html样式：

<input type="text" value="行内块元素1">

<input type="text" value="行内块元素2">

为满足各种需求，利用display进行转换。

=》块级元素： display:block;

=》行内元素 ： display:inline;

=》行内块元素： display: inline-block