行内元素和块级元素

在 HTML 中，元素根据其在页面中的呈现方式可以分为两类：行内元素和块级元素。这两类元素在布局和显示上有一些重要的区别。

行内元素（Inline Elements）：

1. 不独占一行： 行内元素不会强制换行，它们会尽可能地在同一行内显示，直到行的结尾。

2. 只占据内容的宽度： 行内元素的宽度仅仅取决于其内容的大小，不会独占一整行的宽度。

3. 不支持宽高属性： 行内元素的宽度和高度属性设置会被忽略，例如设置 width 或 height 不会影响行内元素的显示。

4. 支持水平方向的 margin 和 padding： 行内元素支持设置水平方向的外边距（margin）和内边距（padding）。

5. 支持文字相关的 CSS 属性： 行内元素通常会支持文字相关的 CSS 属性，如 color、font-size、text-decoration 等。

块级元素（Block Elements）：

1. 独占一行： 块级元素会在页面上独占一整行，会强制换行，并且会在上下创建额外的空间。

2. 独占整行的宽度： 块级元素会占据整个可用的宽度，无论其内容有多少。

3. 支持宽高属性： 块级元素支持设置宽度和高度，可以使用 width 和 height 属性来调整其尺寸。

4. 支持垂直方向的 margin 和 padding： 块级元素支持设置垂直方向的外边距和内边距。

5. 常用于布局： 块级元素通常用于页面的主要结构和布局，如 <div>、<p>、<h1> 等。

需要注意的是，HTML5 中引入了更加语义化的元素，例如 <header>、<nav>、<article> 等，这些元素在布局和样式上也会有类似于块级元素的行为。理解行内元素和块级元素的区别对于正确的布局和样式设计非常重要。

display 的 block、inline 和 inline-block 的区别

display 是 CSS 中一个重要的属性，它用于控制元素在页面中的显示方式。其中 block、inline 和 inline-block 是三个常见的 display 值，它们有不同的特点和应用场景。

1. display: block;：

   • 元素以块级元素的方式显示，独占一行，会强制换行。
   • 默认情况下，宽度会占据父元素的100%。
   • 可以设置宽度、高度、内外边距等属性。
   • 常用于页面主要布局结构，如 <div>、<p>、<h1> 等。

2. display: inline;：

   • 元素以行内元素的方式显示，不会独占一行，会尽可能在一行内显示。
   • 宽度仅取决于内容的大小，不支持宽度、高度等设置。
   • 不支持设置垂直方向的内外边距。
   • 常用于文本和行内元素，如 <span>、<a>、<strong> 等。

3. display: inline-block;：

   • 元素以行内元素的方式显示，但可以设置宽度、高度、内外边距等属性。
   • 可以在一行内显示，同时支持设置尺寸和内外边距，适合在一行内呈现块级元素。
   • 常用于需要既具备块级元素特性又能在一行内显示的情况，如按钮、图像等。

综合来说，block 用于独占一行的块级元素，inline 用于行内元素，而 inline-block 结合了两者的特性，既能设置尺寸和内外边距，又能在一行内显示。正确使用这些 display 值可以更好地控制元素的布局和显示方式。