HTML元素分类 块级元素 内联元素 块级内联元素
概述
HTML中存在许多元素,如<h1>
,<p>
,<a>
,<block>
,<image>
,这些元素可分为三类,依次是块级元素,内联元素,块级内联元素。
每种元素都有着各自的特点:
块级元素特点
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
- 元素的高度(
height
),宽度(width
),行高(line-height
)以及顶和底边距(margin
,padding
)都可设置。 - 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)
常用的块元素有:
<div>
,<p>
,<h1>
...<h6>
,<ul>
,<ol>
,<dl>
,<table>
,<address>
,<blockquote>
,<form>
设置display:block,可以将元素转换块级元素。
内联元素特点
- 和其它元素都在一行上;
- 元素的高度,宽度及顶部和底部边距不可设置;
- 元素的宽度就是他包含的文字和图片的宽度,不可改变。
常用的内联元素有:
<a>
,<span>
,<br>
,<strong>
,<em>
设置display:inline;可以将块级元素转换为内联元素
内联块级元素特点(同时具备内联元素、块状元素的特点)
- 和其他元素都在一行上;
- 元素的高度、宽度、行高及顶和底边距都可设置。
常用的内联块状元素有:
<img>
,<input>
display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素
![](http://upload-images.jianshu.io/upload_images/10556447-f36efd658cdabee4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)