块状元素和内联元素的区别

块状元素（block-level elements）和内联元素（inline elements）是 HTML 中常见的两种元素类型，它们在布局和样式上有一些区别。

1. 布局：块状元素通常会独占一行，从新行开始，并且会自动撑满父容器的宽度。而内联元素则不会独占一行，它们会在同一行内水平排列，根据内容的大小决定宽度。

2. 默认尺寸：块状元素的默认宽度是其父容器的100%，默认高度是根据内容和样式来确定的。内联元素的默认宽度和高度则根据内容来确定。

3. 盒模型：块状元素可以设置宽度、高度、内边距和边框等样式属性，并且会影响周围元素的布局。内联元素只能设置水平方向的内边距、外边距和边框，不能设置宽度和高度。

4. 内容模型：块状元素可以包含其他块状元素和内联元素，并且可以嵌套。内联元素通常只能包含其他内联元素或者文本节点，不能嵌套块状元素。

常见的块状元素有：<div>、<p>、<h1>-<h6>、<ul>、<li>等。
常见的内联元素有：<span>、<a>、<img>、<strong>、<em>等。

需要注意的是，可以通过 CSS 的 display 属性来改变元素的显示模式，将块状元素转换为内联元素或反之。