HTML中的元素从显示的角度，一般可以分为三种类型：块元素（block）、内联元素（inline）、行内块元素（inline-block），display属性可以实现三者的相互转换，本文以一个简单的HTML入手，介绍了这三种类型元素在具体页面渲染中的效果和特点，最后对内联元素水平放置时之间产生的空隙进行了原因分析，并给出了具体消除的方法。在实际应用中，可根据布局需要作出适当的转换。

这是一个简单的HTML

                   

了解华为云

华为云用在线的方式将华为30多年在ICT基础设施领域的技术积累和产品解决方案开放给客户，致力于提供稳定可靠、安全可信、可持续创新的云服务，做智能世界的“黑土地”，推进实现“用得起、用得好、用得放心”的普惠AI。华为云作为底座，为华为全栈全场景AI战略提供强大的算力平台和更易用的开发平台。

在不加任何CSS样式的情况下，浏览器渲染页面如下

一、块元素 block

可以看到body由三大部分组成：

、

、

，这三个部分有一个特点：每个元素都会占满它的父元素(此处父元素是body)内容的整个宽度，任凭浏览器窗口大小如何变化，如

h1元素（有默认的margin-top和margin-bottom）

p元素（有默认的margin-top和margin-bottom）

div元素

以上三个元素都是块元素，每个块元素会按它在HTML标记中出现的顺序依次流入页面，浏览器会自动在每个新的块元素的前后加入一个换行。

若没有设置width，默认宽度为父元素的100%。

当然，块元素可以设置宽高和内外边距，如

p{width:800px; height:100px; padding:5px; margin:20px;}

效果如下，

从盒模型原理我们知道，width设置的只是块元素内容区的width，块元素的margin-right默认为auto，会根据内容区的width自动调整，使盒子水平方向上始终平铺整个页面。

常见的块元素有：

普通元素：div、p、table、form

标题元素：h1~h6

列表元素：ul、ol、li、dl、dt、dd

二、内联元素 inline

除了h1、p和div之外，p中还包含，div中包含，如、这些称为内联元素。以p中包含的元素为例

内联元素特点是不会自动换行，而是和父元素的文本一起按HTML中的顺序，从左上方流入右下方，p里面的文本可以看做是一种特殊的内联元素（如text1和text2），和其他内联元素（如span）在水平方向上挨着摆放，如果浏览器窗口变窄或设置了width属性，一行放不下，后面的内容就会自动流入下一行，直到所有的子元素都显示在页面上为止。如果父元素p没有设置height，它的height会随浏览器变窄而增高，以保证能放得下所有的内容。

可以设置一下内联元素span的宽和高，看是否有效？

p span{width: 100px; height: 100px;padding: 5px;margin: 10px;}

渲染效果

可以看到，对内联元素span设置width和height无效，margin仅仅左右方向有效，上下无效；padding上、右、下、左都有效，会撑大span所占空间，后面紧跟着的内容依次后移。细看文本"土"被挤到了下一行。

注意：内联元素img和input是个例外，可以设置width和height，padding和margin，且四个方向均有效

如在div标签中插入img标签和input标签

    点击了解更多          

同时给img和input设置宽高和内外边距，验证一下

是否有效，

如下，给和设置了一样的宽高和内外边距

div img,div input{width: 50px;height: 40px;margin: 20px;padding: 5px;}

发现，以上这些属性确实对内联元素img和input有效

三、内联块元素 inlne-block

以上是页面中块级元素和内联元素的简单介绍，还有第三种类型，行内块元素（inline-block），它结合了块元素和行内元素的特性，但又各有取舍。

display属性用于控制元素如何显示，如设置h1,p,div的display属性为inline-block，加个border便于识别

h1,p,div{display: inline-block;width: 400px;border: 1px solid red;}

可以看到，原来的三个块级元素display设置为inline-block之后，可以在一行上显示了，不会自动换行，依然可以识别宽高，按顺序从左至右排列，除非浏览器宽度变窄，一行放不下，就会像内联元素一样被挤到第二行。

但这里有个小问题：

三个元素display设置为inline-block之后，虽然在一行显示，但它们之间有一个小间隙，影响布局效果，那么如何去掉这个小间隙呢？

分析：之所以出现小间隙，是由于HTML文档中标签之间的换行符和空格被浏览器解析为内容，若把空格和换行去掉，间隙自然就会消失了。

去掉元素标签之间空格主要有两种方法：

（一）手动去掉HTML标签之间的空格或者将其注释掉

...

...

...

效果如上，内联元素之间的空隙消失了，以上方法虽然可行，但代码可读性降低，有一定局限性，不推荐！

（二）先在body中将文字大小font-size设置为0，这样，浏览器之间的空隙就消失了。

但元素内的文字也因为设置为0，从页面上不可见了，所以还需要再在各个元素内重新恢复font-size的大小，如此便可以实现和上面方法一样的效果

以上两种方法，均可清除内联元素之间的空隙，推荐使用第二种

实质上，通过设置display属性，block、inline和inline-block这三者能进行相互转换。块元素可以内联元素方式显示，内联元素可变块元素方式显示，块元素和内联元素也可以内联块级元素显示，在实际应用中，可灵活使用。

注：以上为个人在学习过程中的一点总结，难免有疏漏之处，欢迎指正，我们一起学习成长快乐。

软件开发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：前端 学习 笔记

上一篇:【 Vivado 】使用工程模式

下一篇:昇腾CANN开发&运行环境搭建