HTML行内元素与块级元素

小伙伴们,晚上好呀~

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

块级元素

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

块级元素示例

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

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

行内元素

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

行内元素示例

我是行内元素

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

块级元素

行内元素

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

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

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

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

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

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

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

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

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

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

块级元素

行内元素

~,不同级别标题

,HTML锚元素

,HTML文档分区元素

,组合行内元素

,文本的一个段落

,HTML图片标签

,预格式化文本

,HTML文本标签

,HTML表单元素

,HTML文本域

,HTML表格元素

,HTML按钮

//,HTML列表

,表单元素标注标签

,HTML列表项元素

,下拉选项列表

/

/

,强调文本标签

//

,斜体文本标签

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

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

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

今天的内容就到这啦~

小伙伴们,记得要多多练习哦!

下期预告

欲练JS,必先攻CSS

小伙伴们

加苏莱小可爱微信

来领取前端学习资料吧~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180725G1VHRQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券