Web前端学习笔记_块元素、内联元素和内联块元素
HTML中的元素从显示的角度，一般可以分为三种类型：块元素（block）、内联元素（inline）、行内块元素（inline-block），display属性可以实现三者的相互转换，本文以一个简单的HTML入手，介绍了这三种类型元素在具体页面渲染中的效果和特点，最后对内联元素水平放置时之间产生的空隙进行了原因分析，并给出了具体消除的方法。在实际应用中，可根据布局需要作出适当的转换。
这是一个简单的HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块元素和内联元素</title> </head> <body> <h1>了解华为云</h1> <p>华为云用在线的方式将华为30多年在ICT基础设施领域的技术积累和产品解决方案开放给客户，<span>致力于提供稳定可靠、安全可信、可持续创新的云服务，</span>做智能世界的“黑土地”，推进实现“用得起、用得好、用得放心”的普惠AI。华为云作为底座，为华为全栈全场景AI战略提供强大的算力平台和更易用的开发平台。</p> <div><a href="https://www.huaweicloud.com/about/index.html">点击了解更多</a></div> </body> </html>
在不加任何CSS样式的情况下，浏览器渲染页面如下
一、块元素 block
可以看到body由三大部分组成：<h1>、<p>、<div>，这三个部分有一个特点：每个元素都会占满它的父元素(此处父元素是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中还包含<span>，div中包含<a>，如<span>、<a>这些称为内联元素。以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标签
<div> <a href="https://www.huaweicloud.com/about/index.html"/>点击了解更多</a> <img src="images/hwy.png" alt="photo"/> <input type="text"> </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标签之间的空格或者将其注释掉
<h1>...</h1><p>...</p><div>...</div>
效果如上，内联元素之间的空隙消失了，以上方法虽然可行，但代码可读性降低，有一定局限性，不推荐！
（二）先在body中将文字大小font-size设置为0，这样，浏览器之间的空隙就消失了。
但元素内的文字也因为设置为0，从页面上不可见了，所以还需要再在各个元素内重新恢复font-size的大小，如此便可以实现和上面方法一样的效果
<style>
body{ border: 1px solid black; font-size: 0;}
h1,p,div{display: inline-block;border: 1px solid red;border: 1px solid red;width: 400px;font-size: 16px;}
h1{font-size: 32px;}
div img,div input{width: 50px;height: 40px;margin: 20px;padding: 5px;}
</style>
以上两种方法，均可清除内联元素之间的空隙，推荐使用第二种
实质上，通过设置display属性，block、inline和inline-block这三者能进行相互转换。块元素可以内联元素方式显示，内联元素可变块元素方式显示，块元素和内联元素也可以内联块级元素显示，在实际应用中，可灵活使用。
注：以上为个人在学习过程中的一点总结，难免有疏漏之处，欢迎指正，我们一起学习成长快乐。
- 点赞
- 收藏
- 关注作者
评论（0）