首页 > 代码库 > 块级元素和行内元素
块级元素和行内元素
块级元素和行内元素的区别
1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度。
行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
2.块级元素是可以设置宽高,而行内元素不可以。
3.块级元素可以设置外边距(margin),内边距(padding).
行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
常见的行内元素:
<a>定义锚
<abbr>缩写
<b>字体加粗
<bdo>更改文字的方向
<big>大号字体加粗
<br>换行
<cite>某个参考文献的引用,比如书籍或者杂志的标题
<em>使文字倾斜
<i>使文字倾斜
<img>向网页中嵌入图片
<input>输入框
<label>标签为
<q>短的引用
<small>呈现小号字体效果
<span>用来组合文档中的行内元素
<select>创建单选或多选的菜单
<strong>使文字加粗
<sub>下标
<sup>上标
<var>定义变量
常见的块级元素
<address>定义地址
<caption>表格标题
<dd>定义列表中定义条目
<div>文档中的分区或节
<dl>定义列表
<dt>列表中的项目
<fieldset>定义一个框架集
<form>html中的表单
<h1>....到<h6>标题
<hr>创建一条水平线
<li>列表项目
<ol>有序列表
<ul>无序列表
<p>段落
<pre>预格式化文本
<table>定义html中的表格
<tbody>表格主题正文
<td>表格中的标准单元格
<tfoot>表格的页脚
<th>表头单元格
<thead>表格的表头
<tr>定义表格中的行
块级元素和行内元素