在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;
}