文章目录

• CSS的元素显示模式
• • 块元素
  • 行内元素
  • 行内块元素
  • 元素显示模式转换
  • 单位
  • • 绝对单位
    • 相对单位

      CSS的元素显示模式

      作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点可以更好的布局网页

      ---

      元素显示模式就是元素(标签)以什么方式进行显示，比如自己独占一行

      HTML元素一般分为块元素和行内元素两种类型

      块元素

      常见的块元素有

      ~

      ,

      , ,

      ,
      • 等，其中标签是最典型的块元素

        块元素的特点：

        • 自己独占一行
        • 高度、宽度、外边距以及内边距都可以控制
        • 宽度默认是容器（父级宽度）的100%
        • 是一个容器及盒子，里面可以放行内或者块级元素

          注意点：

          • 文字类的元素内不能使用块级元素

          • 标签主要用于存放文字，不能放块级元素

          • ~

            等都是文字类块级标签

            行内元素

            常见的行内元素有有 、、、、、、、、、等，其中 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

            特点：

            • 相邻行内元素在一行上，一行可以显示多个
            • 高、宽直接设置是无效的
            • 默认宽度就是它本身内容的宽度
            • 行内元素只能容纳文本或其他行内元素

              注意点：

              • 链接里面不能再放链接
              • 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

                行内块元素

                在行内元素中有几个特殊的标签 —— 、、，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

                行内块元素的特点：

                • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
                • 默认宽度就是它本身内容的宽度（行内元素特点）。
                • 高度，行高、外边距以及内边距都可以控制（块级元素特点）

                  元素显示模式转换

                  特殊情况下，需要元素模式的转换

                  • 转换为块元素：display:block;
                  • 转换为行内元素：display: inline;
                  • 转换为行内块：display: inline-block;

                    单位

                    绝对单位

                    不随浏览器或设备改变

                    • px（像素）：基于屏幕的最小显示单位
                    • pt
                    • pc
                    • in
                    • cm

                      相对单位

                      • em：相对于元素的字体尺寸，如果用于字体大小，是相对于父元素的字体大小
                      • rem：相对于根元素（html）的字体大小
                      • vm（视口宽度的1%）：当前屏幕的大小
                      • vh（视口高度的1%）
                      • %：相对于父元素的高度或宽度