行内元素、块级元素、空元素的理解

简介: 行内元素、块级元素、空元素的理解

一、什么是行内元素?块级元素?空元素?


       1)行内元素也称行内标签或内联元素或内嵌元素,一个行内标签通常会和其他行内标签显示在同一行中,它们不占有独立的区域,仅仅靠自身的文本内容大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。


       2)块级元素也称为块标签,在页面中以区域块的形式出现,其特点是,每个块元素通常都会独自占据一行或多行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。


       3)空元素指在html中没有内容的html元素。


二、哪些是行内元素、块级元素、空元素?


       1)常见的行内元素:<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等,其中<span>标签最典型的行内元素。


       2)常见的块级元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。


       3)常见的空元素:<br/> 换行 ;<hr> 分隔线 ;<input>文本框;<img> 图片; <link>外链 <meta>。


三、编码中的注意点与实际问题?


       1)行内元素与块级元素的区别:


               a、行内在同一行而不在同一列,块级相反;


               b、块级元素内可以放置行内元素及其他块级元素,相反行内元素不能放置块级元素但可以放置其他行内元素和文字;


               c、行内元素与块级元素属性不同,行内元素设置width无效,height无效(可以设置line-height);


       2)行内元素(inline)与块级元素(block)之间的相互转化:


               a、行内元素转到块级元素:设置display:block;


               b、块级元素转到行内元素:设置display:inline;


       3)实际问题:防止在行内元素时设置宽高度,不生效时应该先检查是否为行内元素,是时先转为块级元素再设置。


相关文章
|
1月前
|
前端开发
什么是块级元素和内联元素?
【5月更文挑战第24天】什么是块级元素和内联元素?
32 4
|
21天前
|
前端开发 Ruby
行内元素有哪些?块级元素有哪些?行内块元素有那些?
行内元素有哪些?块级元素有哪些?行内块元素有那些?
9 0
|
1月前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
30 1
|
1月前
|
Java
块元素、行内元素、行内块元素
块元素、行内元素、行内块元素
|
7月前
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
169 0
|
前端开发
前端总结:块级元素和行内元素及其区别
前端总结:块级元素和行内元素及其区别
103 0
前端总结:块级元素和行内元素及其区别
|
前端开发
一文搞懂行内元素、块元素、行内块元素
一文搞懂行内元素、块元素、行内块元素
257 0
一文搞懂行内元素、块元素、行内块元素
|
前端开发 容器
CSS中 块级元素、行内元素、行内块元素区别
CSS中 块级元素、行内元素、行内块元素区别
177 0
|
程序员 前端开发
行内元素居中
行内元素居中,通用处理办法 给父元素添加一个行内块级元素,高度100%,且vertical-align设置为middle; 所有的子元素vertical-align都设置为middle; ...
892 0
|
容器 前端开发
内联元素垂直居中方法汇总
1. 让 line-height 与 height 相等 .container { width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.
1645 0