一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <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>定义变量 块级元素: <address>定义地址 <caption>定义表格标题 <dd>定义列表中定义条目 <div>定义文档中的分区或节 <dl>定义列表 <dt>定义列表中的项目 <fieldset>定义一个框架集 <form>创建 HTML 表单 <h1>定义最大的标题 <h2>定义副标题 <h3>定义标题 <h4>定义标题 <h5>定义标题 <h6>定义最小的标题 <hr>创建一条水平线 <legend>元素为 <fieldset>元素定义标题 <li>标签定义列表项目 <noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部 <noscript>定义在脚本未被执行时的替代内容<ol>定义有序列表 <ul>定义无序列表 <p>标签定义段落 <pre>定义预格式化的文本 <table>标签定义 HTML 表格 <tbody>标签表格主体(正文) <td>表格中的标准单元格 <tfoot>定义表格的页脚(脚注或表注) <th>定义表头单元格 <thead>标签定义表格的表头 <tr>定义表格中的行 二.然后我们再来看看行内元素和块级元素的区别: 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同,主要是盒模型属性上 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 三.行内元素和块级元素的转化: 把块级元素转换成行内元素:display:inline; 将行内元素转换成块级元素:display:block; 行内块元素:display:inline-block;
|