HTML 块级元素和内联元素详解：区别、嵌套和 CSS 应用

HTML 中的元素可以分为块级元素和内联元素。下面是它们的区别：

块级元素（Block-level Elements）：
- 占据一整行或多整行的空间，自动换行。
- 默认情况下，宽度会填充其父元素的宽度。
- 可以设置宽度、高度、内外边距等属性。
- 常见的块级元素有 <div>、<p>、<h1>-<h6>、<ul>、<li> 等。
内联元素（Inline Elements）：
- 只占据它所包含内容的宽度，不会独占一行。
- 不会自动换行，除非强制设置了换行。
- 不能设置宽度和高度，只能设置水平方向的内外边距。
- 常见的内联元素有 <span>、<a>、<strong>、<em>、<img>、<input> 等。
块级元素和内联元素的嵌套规则：
- 块级元素可以包含内联元素和其他块级元素。
- 内联元素只能包含其他内联元素，不能包含块级元素。
CSS 中的 display 属性可以用来修改元素的显示方式：
- display: block; 可将元素强制设置为块级元素。
- display: inline; 可将元素强制设置为内联元素。
- display: inline-block; 可将元素设置为同时具有内联元素和块级元素的特性。

总结：块级元素和内联元素在布局和样式上有很大的区别，了解它们的特性有助于正确使用和组织 HTML 元素。