2024年网页设计行内元素 篇1
什么是行内元素和块级元素？行内元素：又称为内联元素。是html中的规范，它和其他行内元素都是在同一行从左到右排列，不会单独占据一行。块级元素：和行内元素对应，也是html中的规范，它总是在新的一行开始，各个块级元素之间单独占据一行，向下垂直排列。要想水平方向排列，可以利用布局或者浮动来实现。区别：行内元素不占据新行，而块级元素都是从新的一行开始。行内元素不可以设置高度和宽度，可以设置行高。同时行内元素的外边距margin和内边距padding都是上下无效，左右生效。而块级元素对于宽度高度和内外边距都生效，随意设置。相互转换两者通过修改css属性display属性可以互相转换，在行内元素上设置display：block可以让它转换成块级元素，其实本质是让它换行而已。同理在块级元素上设置display：inline可以让它转换成行内元素。
下面截图是例子：
这段代码在标签<hr>前面没有设置转换，默认<a>、<input>标签都是行内元素，而<h1>标签是块级元素。他们显示效果如下图：
可以看到水平线之前超链接和输入框在同一行，而一堆大黑字和水平线在下面一行，这是因为默认<a>、<input>标签都是行内元素，而<h1>、<hr>标签都是块级元素。图中水平线下面可以发现超链接单独一行，因为我设置了它是块级元素，而大黑字和输入框在同一行是因为我给大黑字<h1>标签设置成了行内元素，见第一图代码。
写到这里相信您应该明白了行内元素和块级元素了吧。