CSS的元素显示模式

什么是元素显示模式：

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

元素显示模式就是元素（标签）以什么方式进行显示，比如 div 自己占一行，比如一行可以放多个span

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

本页面目录：

  • 块元素
    •
  • 行内元素
    •
  • 行内块元素
    •
  • 元素显示模式总结
    •

    1️⃣块元素：

    常见的块元素有h1~h6、p、div、ui、ol、li等，其中 div 标签是最典型的“块元素”

    块级元素的特点：

    ①比较霸道，自己2独占一行

    ②高度、宽度、外边距以及内边距都可以控制

    ③宽度默认是容器（父级宽度）的100%

    ④是一个容器及盒子，里面可以放行内或者块级元素

    下面是小例：

    比较霸道，自己独占一行
    瑟瑟发抖

    块元素注意的几个点:

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

  • p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放 div

  • 同理，h1~h6 等都是文字类块级标签，里面也不能放其他块级元素

    •

    2️⃣行内元素：

    常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中 span 标签是最典型的行内元素。有的地方也将行内元素称为“内联元素”

    行内元素的特点：

    ①相邻行内元素在一行上，一行可以显示多个

    ②高、宽直接设置是无效的

    ③默认宽度就是它本身内容的宽度

    ④行内元素只能容纳文本或其他行内元素

    下面是小例：

    pink老师你怎么穿着品如的衣服呢！ 品如的衣服 pink老师 品如的衣服

    行内元素注意的几个点：

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

    •

    3️⃣行内块元素：

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

    行内块元素的特点：

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

    下面是小例：

    4️⃣元素显示模式总结：


    元素模式 元素排列 设置样式 默认宽度 包含
    块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
    行内元素 一行可以放多个行内元素 不可以直接设置宽度、高度 它本身内容的宽度 容纳文本或则其他行内元素
    行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

    返回标题