元素的分类

主要分为三大类

• 块级（区块）元素
• 内联元素
• 块级内联元素

块级（区块）元素

特点

• 每个元素独占一行
• 不设置宽高时，宽度等于父元素宽度，无内容时高度为0，有内容时高度由内容撑开
• 支持所有样式

2.常见块级元素

div(盒子）、ul(无序列表）、ol(有序列表）、dl（定义列表）、li(列表的项）、p(段落)、h1~h6（网页中的标题，从大到小）、table(表格)、form(表单)、pre(源代码）、hr(分割线)

<div>盒子</div>
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
     <li>有序列表</li>
     <li>有序列表</li>
</ol>
<dl>
    <dt>html</dt>
    <dd>html是超文本标记语言</dd>
</dl>

<p>段落</p>
<h1>标题</h1>
<table></table>
<form></form>
<pre></pre>
<hr/>

css样式设置为块级元素

display:block;

内联元素

特点

• 1.一行非空时，非区块元素在同一行显示
• 2.宽高完全由内容撑开
• 3.不支持宽高样式，margin、padding使用时会出现问题，只有margin-left 、margin-right 、padding-left 、padding-right有效果

常见内联元素

span（行间元素）、a（超链接）、b（加粗）、i（斜体）、em（着重）、sub（下标）、sup（上标）、ins（插入）、del（删除）、label（表单标记）、br（换行）

<span>行间元素</span>
<a>超链接</a>
<b>加粗</b>
<i>斜体</i>
<em>着重</em>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入</ins>
<del>删除</del>
<label>表单标记</label>
<br />

css样式设置为内联元素

display:inline

内联块级元素

特点

• 一行非空时，非区块元素在同一行显示
• 不设置宽高时完全由内容（文字图片)撑开
• 支持所有样式

常见：内联块元素

iframe（框架）canvas（画布）video（视频）audio（音频）img（图片）input（表单项）

<iframe></iframe>
<video></video>
<audio></audio>
<img />
<input />
<textarea></textarea>
<canvas></canvas>

css样式设置为内联块级元素

display:inline-block;

改变元素种类方法

• 1.用样式display的值修改样式：block（块级元素）、inline（内联元素）、inline-block（内联块级元素）、none（不占位元素，即隐藏）
• 2.float浮动：无论是块级元素还是行内元素被设置为float之后，都会默认添加属性display:inline-block（行内块级元素），也就是说浮动会让元素变为拥有块级属性的行内元素

空元素（单标签）

常见空元素

<input />
<img />
<br />
<hr />