CSS元素显示模式详解

元素的显示模式

• 元素（标签）的显示方式，如
  独占一行。
• 主要分类：块元素、行内元素。

块元素

• 常见的块元素：

  ,

  ,

  ,

  ,
  ,
  1. ，其中
     是最典型的块元素。

  2. 特点：

     1. 独占一行。
     2. 可以设置高度、宽度及内外边距。
     3. 默认宽度与父容器相同。
     4. 可作为容器，包含其他元素。

  3. 注意：文字类块元素如

     和

     不允许嵌套其他块元素。

  行内元素（内联元素）

  • 常见的行内元素：,,,等。

  • 特点：

    1. 一行可以显示多个行内元素。
    2. 直接设置宽度和高度无效。
    3. 默认宽度为内容的宽度。
    4. 只能包含文本或其他行内元素。

  • 注意：

    1. 链接内不能嵌套其他链接。
    2. 特殊链接可以包含块级元素，但需通过CSS将其转换为块级模式。

  行内块元素

  • 特殊元素：,,，同时具备块元素和行内元素的特性，称为行内块元素。

  • 特点：

    1. 一行可以有多个行内块元素，但中间可能有空白缝隙。
    2. 默认宽度为内容的宽度。
    3. 高度、行高、外边距和内边距均可控制。

  元素显示模式的转换

  • 当需要一种元素具备另一种元素的特性时，可以通过CSS进行转换。

  • 例如，增加链接的触发范围（使行内元素具备块元素的性质）：

     我是块元素

  • 将块元素转换为行内元素：

     
    我是行内元素

  • 将行内元素转换为行内块元素：

     我既可以指定大小，又可以一行放多个

  小工具推荐

  Snipaste工具的使用

  
  

  • 一款集截图和取色功能于一身的工具。
  • 快捷键：F1截图，F3置顶，Alt取色。

  
  

  小知识

  
  

  • 侧边栏效果的实现：

    代码示例：

    /* 侧边栏样式 */ .sidebar { float: right; width: 200px; }

  
  

  小知识：在列表项中实现垂直居中

  只需设置行高与盒子高度相等即可实现垂直居中。
  代码示例：line-height: 40px;
  行高小于盒子高度，文字会偏上；行高大于盒子高度，文字会偏下。