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

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

        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）实际问题：防止在行内元素时设置宽高度，不生效时应该先检查是否为行内元素，是时先转为块级元素再设置。

人生海海，码途徐徐，在每一段经历中，留下成长的印记，爱自己爱生活爱思考！