CSS - 块状元素、内联元素和内联块状元素

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素(block)、内联元素(又叫行内元素,inline)和内联块状元素(inline-block)。

1. 常用的块状元素有：

<div>、<p>、<h1>...<h6>、
<ol>、<ul>、<dl>、<table>、
<address>、<blockquote> 、<form>

2. 常用的内联元素有：

<a>、<span>、<br>、<i>、
<em>、<strong>、<label>、<q>、
<var>、<cite>、<code>

3.常用的内联块状元素有：

<img>、<input>、<td>

4. 块级元素(block)特点

（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

5. 内联元素(inline)特点

（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

6. 内联块状元素(inline-block )元素特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

7. 例子

1.将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{
    display:block;
}

2. 将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div {
     display:inline;
 }

3. 将内联元素a转换为内联块状元素，从而使a元素具有内联块状元素特点。

a{
    display:inline-block;
}

转载于:https://www.cnblogs.com/allen2333/p/8854832.html