学习-WEB前端快速入门- 10.10.内联元素与块元素

176 阅读1分钟

内联元素与块元素

概念:块元素和内联元素的主要差异是从新的一行开始。而内联元素一般
    显示在一行上。但是可以通过css的display属性将内联元素改变成块元素。
    
内联元素的特点:
1.和其他的元素显示在一行上;
2.内边距和外边距、高度,宽度都是不可以改变的,他的宽度是根据他的显示文本
和图像的宽度。

块元素的特点:
1.总是在新的一行上显示。
2.高度、行高、宽度、内边距、外边距等都是可控制的;

内联(行内)元素:
常用内联元素:a、b、em、span、i、img、input、code、label、strong

块元素:
常用块元素:div、form、h1~h6、p、ul、ol、table、hr

🌰例子
<!--内联函数-->
<a href="#">我是A标签</a>
<span>我是span标签</span>
<i>我是斜体标签</i>

<!--块元素-->
<h1>我是H1标签</h1>
<p>我是p标签</p>

内联函数转换成块元素
<style>
    a{
      display: block;
    }
</style>