小伙伴们,晚上好呀~
学习了这么久的HTML,大家知不知道,HTML中大部分元素都是行内元素或块级元素呢?今天我们来深入了解一下两者的用法与区别吧!
块级元素
在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽。默认情况下,块级元素会独占一行,并且元素前后行留空。如图所示。
块级元素示例
我是块级元素,我独占一行
我也是块级元素,我会另起一行竖直排列
行内元素
在HTML中,行内元素的高度为其内容的高度,宽度会收缩包裹其内容,并尽可能的包紧。默认情况下,行内元素只占据它对应标签的边框所包含的空间,而不会另起一行。如图所示。
行内元素示例
我是行内元素
接下来,我们总结一下块级元素与行内元素的区别吧~
块级元素
行内元素
默认情况下,另起一行左右撑满垂直排列
默认情况下,和其他元素水平排列在一行
高度,行高以及外边距和内边距都可设置
padding/margin只有左右有效,上下无效
默认情况下宽度是它本身容器宽度的100%
宽高就是它内容区域的宽高,不可改变
可以容纳行内元素和其他块级元素
只能容纳文本或者其他行内元素
小伙伴们,想要验证上述结论是否准确无误,可以自己动手操作一下,写完后记得在浏览器中打开调试模式,进行核实哦~
最后,苏莱给大家列举一些常见的行内元素与块级元素,以后你们会经常见到它们的。
块级元素
行内元素
~,不同级别标题
,HTML锚元素
,HTML文档分区元素
,组合行内元素
,文本的一个段落
,HTML图片标签
,预格式化文本
,HTML文本标签
,HTML表单元素
,HTML文本域
,HTML表格元素
,HTML按钮
//,HTML列表
,表单元素标注标签
,HTML列表项元素
,下拉选项列表
/
/
,强调文本标签
//
,斜体文本标签
还有一些,苏莱在这里就不一一列举啦~
有兴趣的小伙伴可以自己继续查阅资料,
等我们学了CSS后,苏莱会继续给大家分享行内元素与块级元素间的转化方法哦。
今天的内容就到这啦~
小伙伴们,记得要多多练习哦!
下期预告
欲练JS,必先攻CSS
小伙伴们
加苏莱小可爱微信
来领取前端学习资料吧~
领取专属 10元无门槛券
私享最新 技术干货