HTML元素分类【三种类型】
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML元素分类【三种类型】
在CSS中,html中的标签元素⼤体被分为三种不同的类型:
块状元素、内联元素(⼜叫⾏内元素)和内联块状元素。
块状元素:display:block内联元素:display:inline
内联块状元素:display:inline-block
常⽤的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常⽤的内联元素有:
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常⽤的内联块状元素有:
<img>、<input>
内联(⾏级)标签:标签在⼀⾏内,宽度与⾼度由内容决定,只有在内容超过HTML的宽度时,才会换⾏
块状标签:标签独占⼀⾏,可指定宽、⾼
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在⼀⾏上;
2、元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置
区别:
是否占⼀⾏能否指定⾼宽垂直⽅向的margin 内联否否否块是是是是
(扩展)隐性改变display类型:
有⼀个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之⼀:
1. position : absolute 或 position:fixed
2. float : left 或 float:right
display:inline-block的⽅式显⽰,当然就可以设置元素的 width 和 height 了且默认宽度不占满⽗元素。