HTML内联(行内)元素、块元素(块级元素)、内联块(行内块)元素区别
2018-01-31 14:41
211 查看
零、html元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型:(1)内联元素(行内元素);
(2)块元素(块级元素);
(3)内联块元素(行内块元素)。
一、内联元素(行内元素)——普通内联元素
特点:1、多个行内元素可以同时处于同一行上;
2、元素的高度、宽度不可设置;
3、元素的宽度就是它包含的文字或图片(一般a标签里面可以包图片)的宽度,不可改变。
常见的行内元素如:
<a></a>、<span></span>、<em></em>、<span></span>...
二、块元素(块级元素)
特点:元素最后默认会添加标签。
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
2、元素的高度、宽度可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常见的块级元素如:
<div></div>、<p></p>、<h1-6></h1-6>、<ul></ul>、<li></li>、<hr />...
三、内联块元素(行内块元素)
特点:同时具备行内元素、块状元素的特点。1、和其他行内元素或行内块元素能同时处于同一行上;
2、元素的高度、宽度可设置。
常见的内联块元素如:
<input />、<img />、<button></button>、<textarea></textarea>、<td></td>...
**【注意】**html元素间是可以转换的,可以使用CSS中的display属性实现。
display:inline-block; /*将其他元素转换为行内块元素*/ display:block; /*将其他元素转换为块元素*/ display:inline; /*将其他元素转换为行内元素(一般不将块元素转为行内元素)*/ display:none; /*将元素隐藏*/
具体元素间的转化,自行参见CSS中的相关属性学习吧!
说明:本文章仅做学习笔记使用,如有任何错误,欢迎大佬们指教!!!
相关文章推荐
- html 块元素和内敛元素的区别
- 开始学前端,从行元素和块元素区别开始(第一篇)
- HTML 块元素 行元素的区别
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- HTML中行内元素与块级元素有哪些及区别?
- HTML中元素属性中ID和Name的区别
- HTML中行内元素与块级元素有哪些及区别 (网易博客)
- XML 与 HTML 有什么区别?请写出一个包含个人姓名、年龄、性别的 XML 简单元素。
- HTML常见标签及块级元素同行内元素的区别
- HTML中块级元素与行内元素的区别
- HTML中的标签和元素的区别
- html 内联元素和html 块级元素概述及区别
- 块级元素和内联元素的区别(HTML)
- html块级元素、行级元素、内联块级元素的特点
- html内联元素和块级元素概述及区别
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- html中标签、属性、元素的区别
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
- HTML中的标签和元素的区别详解 及当前需要学习的知识点
- HTML中的标签和元素的区别