HTML行内元素与块级元素

小伙伴们，晚上好呀~

学习了这么久的HTML，大家知不知道，HTML中大部分元素都是行内元素或块级元素呢？今天我们来深入了解一下两者的用法与区别吧！

块级元素

在HTML中，块级元素的高度为其内容的高度，宽度会扩展到与父容器同宽。默认情况下，块级元素会独占一行，并且元素前后行留空。如图所示。

块级元素示例

我是块级元素，我独占一行

我也是块级元素，我会另起一行竖直排列

行内元素

在HTML中，行内元素的高度为其内容的高度，宽度会收缩包裹其内容，并尽可能的包紧。默认情况下，行内元素只占据它对应标签的边框所包含的空间，而不会另起一行。如图所示。

行内元素示例

我是行内元素

接下来，我们总结一下块级元素与行内元素的区别吧~

块级元素

行内元素

默认情况下，另起一行左右撑满垂直排列

默认情况下，和其他元素水平排列在一行

高度，行高以及外边距和内边距都可设置

padding/margin只有左右有效，上下无效

默认情况下宽度是它本身容器宽度的100%

宽高就是它内容区域的宽高，不可改变

可以容纳行内元素和其他块级元素

只能容纳文本或者其他行内元素

小伙伴们，想要验证上述结论是否准确无误，可以自己动手操作一下，写完后记得在浏览器中打开调试模式，进行核实哦~

最后，苏莱给大家列举一些常见的行内元素与块级元素，以后你们会经常见到它们的。

块级元素

行内元素

~，不同级别标题

，HTML锚元素

，HTML文档分区元素

，组合行内元素

，文本的一个段落

，HTML图片标签

，预格式化文本

,HTML文本标签

，HTML表单元素

，HTML文本域

，HTML表格元素

，HTML按钮

//，HTML列表

，表单元素标注标签

，HTML列表项元素

，下拉选项列表

/

/

，强调文本标签

//

，斜体文本标签

还有一些，苏莱在这里就不一一列举啦~

有兴趣的小伙伴可以自己继续查阅资料，

等我们学了CSS后，苏莱会继续给大家分享行内元素与块级元素间的转化方法哦。

今天的内容就到这啦~

小伙伴们，记得要多多练习哦！

下期预告

欲练JS，必先攻CSS

小伙伴们

加苏莱小可爱微信

来领取前端学习资料吧~