块级元素(block level):
块级元素:元素呈现“块”状,有自己的宽度和高度,也就是可以设置宽(width)和高(height),除此之外,独自占据一行高度(float浮动除外),一般可以作为其他容器使用,可容纳块级元素和行内元素。块级元素有以下特点:
- 每个块级元素都是独自占一行。
- 元素的高度(height)、宽度(width)、行高(line-height)和边距(margin、padding)都是可以设置的。
- 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%)。
常见块级元素:
<body>、<address>、 <caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>~<h6>、<hr>、 <legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
注意:块级元素内能嵌套块级元素、行内元素。但是h1-h6、p、dt这几个块级元素不能嵌套块级元素。
行内元素(inline):
行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。行内元素有以下特点:
- 每一个行内元素可以和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行。
- 行内元素的高度(height)、宽度(width)、行高(line-height)及内、外边距的底和顶边距(margin-top、padding-top、margin-bottom、padding-bottom)不可设置。
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
常见行内元素有以下:
<a> //标签可定义锚
<abbr> //表示一个缩写形式
<acronym> //定义只取首字母缩写
<b> //字体加粗
<bdo> //可覆盖默认的文本方向
<big> //大号字体加粗
<br> //换行
<cite> //引用进行定义
<code> // 定义计算机代码文本
<dfn> //定义一个定义项目
<em> //定义为强调的内容
<i> //斜体文本效果
<img> //向网页中嵌入一幅图像
<input> //输入框
<kbd> //定义键盘文本
<label> //标签为 input 元素定义标注(标记)
<q> //定义短的引用
<samp> //定义样本文本
<select> // 创建单选或多选菜单
<small> //呈现小号字体效果
<span> //组合文档中的行内元素
<strong> //加粗
<sub> //定义下标文本
<sup> //定义上标文本
<textarea> //多行的文本输入控件
<tt> //打字机或者等宽的文本效果
<var> // 定义变量注意:行内元素内只能嵌套行内元素,不能够嵌套块级元素。
行内块级元素 inline-block:
行内块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元素宽度和高度,也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素,它可以设置高宽以及一行多个。具体特点如下:
- 和其他行内或行内块级元素元素放置在同一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置。
注意:img和input元素虽然属于行内元素,但是又可以细分为行内替换元素。所以它表现的像行内块级元素一样。