CSS标签元素解读（块级元素、内联元素、内联块元素）

CSS标签元素

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素

块级元素

块级元素是独占一行显示的，它的兄弟元素必定不会与其在同一行中，一般是其他元素的容器元素，能容纳其他块元素或内联元素

常见的块级元素：

<div>、<p>、<h1~h6>、<form>、<ul>、<li>、<ol>、<dl>、<table>、<address>、<blockquote>
就是块级元素

设置display：block就是将元素显示成块级元素，例如：a{display:block} 就是将内联元素a转为块级元素，从而使a元素具有块元素的特点

块元素特点：

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
• 支持全部样式

内联元素（行内元素）

内联元素和它的兄弟元素之间一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行

常见的内联元素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>在html中·，<span>、<a>、<label>、<strong>、<em>就是典型的内联元素（行内元素）（inline）元素。

当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。

div{ display:inline; }

内联元素的特点

• 和其他元素都在一行上
• 元素的高度、宽度、行高和顶部、底部边距不可设置
• 元素的宽度就是它包含的文字或图片的宽度，不可改变
• 支持部分样式，如margin的左右值
• 子元素是内联元素
• 父元素可以用text-align属性设置子元素水平对齐方式
• 父元素可以用line-height属性值设置垂直对齐方式

内联块元素

内联块元素（inline-block)就是同时具备内联元素、块元素的特点，

代码display:inline-block就是将元素设置为内联块状元素。

常见的内联块元素

<img> <input>

内联块元素的特点

• 和其他元素在一行上

• 元素的高度、宽度、行高以及顶和底边距都可设置。

• 支持全部样式

• 如果没有设置宽高，宽高由内容决定

• 子元素是内联块元素

• 父元素可以用text-align属性设置子元素水平对齐方式

• 父元素可以用line-height属性值设置子元素垂直对齐方式