块级元素
1.块级元素独占一行,之后的元素也只能另起一行,相邻的两个块级元素不能共用一行。
2.块级元素其元素的高度,宽度,行高和顶部底部边距都是可以设置的。
3.元素的宽度如果不设置的话,默认为父元素的宽度。
4.块级元素对应的属性为display:block
常见块级元素有:
<address> <article> <p>
<aside>//定义内容之外的内容.可作为标题的解释内容或副标题. 不会自动缩进
<audio>//音频标签 <blockquote> 定义较长的引用内容,有首行缩进。
<canvas>//绘图标签 。
<caption>定义表格标题,
<dd>表格中的项目描述 <div> 定义文档流中小结,盒子模型标签 。<dl>定义列表标签。<dt>定义列表中的项目标题
<details>定义元素的细节 <fieldset>定义单中元素的边框 <figcaption>定义figure元素的标题,<figure>定义媒介内容的分组,以及标题。
<footer> 定义section 或page的页脚 <form> 表单 <h1> -<h6>定义html标题 <header> <hr>定义水平线
<legend>定义fieldset元素的标题 <li>定义列 <menu> 定义列表或菜单 //所有主流浏览器均不支持 menu 元素。
<meter>定义预定义范围内的度量 <nav>定义导航 <noframes>定义针对不支持的框架的用户的替代内容
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<ol> 定义有序列表,<output> 定义输出的一些类型
<pre>预格式标签 <section> 部分段落标签 <table>表格 <tbody>表格主内容 <td>表格列 <tfoot> 脚注标签 <th>表格表头标签
<thead> 表格表头内容标签 <time> 日期标签 <tr> 表格行标签 <ul>无序列表标签
行级元素
1.可以与其他元素共用一行,不必另起一行。
2.行级元素的高度,宽度,顶部,底部的边距不能设置。
3.元素的宽度就是它包含的文字图片的宽度,不可改变。
4.行内元素对应的属性为display :inline
常见的行级元素:
<a> <abbr> 缩写标签 <acronym>定义只取首字母的缩写 <b>加粗 <bdo>文字方向
<big>大号文本 <br>简单的折行 <button>按钮 <cite>引用
<code> 代码标签 <command> 命令按钮 <dfn> 项目描述标签//尽量少用 <del> 定义删除文本
<em> 定义强调文本 <i>斜体 <img>定义图像 <input>定义输入 <kbd>定义键盘 <label>input的标注
<mark>定义有记号的文本 <pregress>定义任何类型的任务的进度 <q>定义短应用 <samp> 计算机代码样本
<select> 下拉列表 <small> 小号文本 <span> 文档节 <strong> 强调文本标签 <sub> 定义下标文本 <sup>上标文本
<textarea> 文本框
行级元素和块级元素的相互转换
display:inline 可以将块级元素转换为行级元素,display:block可以将行级元素转换为块级元素。
display:inline-block可以将元素设置为块-行级元素。