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