【面试题】块级元素和内联元素

1. 块级(block)元素

块级元素是指以块(block)的形式显示在页面上的元素。它们通常是页面布局的基本结构，包含一些其他元素，例如段落、标题、图像等，同时它们可以独立于其他元素在页面上占据一整行。

HTML中常见的block元素有：<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form>

block元素的display属性常见取值如下：

属性	作用
display: block	该元素将被显示为块级元素，即独占一行，可以设置宽度和高度，可以包含其他块级元素和行内元素
display: inline-block	该元素将被显示为行内块级元素，即可以像行内元素一样放置在文本中，同时也可以设置宽度和高度
display: none	该元素将被隐藏，不会在页面上占用空间，也不会被渲染
display: flex	该元素将被显示为弹性盒子，可以通过flex属性来设置弹性盒子的布局方式
display: table	该元素将被显示为表格
display: list-item	该元素将被显示为列表项
display: table-cell	该元素将被显示为表格单元格
display: table-row	该元素将被显示为表格行

block元素的特点：

• 默认情况下，它们会在页面上单独占据一行。
• 可以设置宽度和高度，同时还可以设置边框、内边距和外边距等样式属性。
• 可以包含其他block元素或inline元素。
• 可以为一些block元素添加display:inline属性，将其转换为inline元素。

2. 内联(inline)元素

内联元素是指以行内(inline)的形式出现在页面上的元素。它们通常被用于呈现文本内容或文本内的小段落。相较于block元素，inline元素不会占据整个父元素的宽度，而是只占据必要的宽度，同时多个inline元素可以在同一行内排列。

HTML中常见的inline元素有：<a>、<span>、<img>、<input>、粗体<strong>和斜体<em>

inline元素的display属性常见取值如下：

属性	作用
display: inline	将元素呈现为内联元素，默认值
display: block	将元素呈现为块级元素
display: inline-block	将元素呈现为行内块级元素
display: none	将元素完全隐藏，不占据文档流中的任何空间
display: list-item	将元素呈现为列表项（如<li>元素）

inline元素的特点：

• 默认情况下，它们不会再页面上独占一行。
• 无法设置宽度和高度，只能通过CSS属性width和height来控制它们的大小。
• 可以包含其他inline元素，但是不能包含block元素。
• 可以为一些inline元素添加display:block属性，将其转换为block元素。