[HTML] div 和 span 标签

最新推荐文章于 2023-01-07 21:32:06 发布

小公鸡卡哇伊呀~

最新推荐文章于 2023-01-07 21:32:06 发布

阅读量769

点赞数

分类专栏： Other 文章标签： css

本文链接：https://blog.csdn.net/ftell/article/details/102761731

版权

Other 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

<div> 是存粹的流内容的容器，HTML Document Division Element 即HTML 文档分区元素，本质上不代表任何东西，只是为了组织元素。如果其他具有语义的元素(如<article>或<nav>等)全都不适用时才用这个元素。

与<div>类似，使用<span>的目的是为了对文本添加样式。

两者区别：
<div> 是 block element，前后都有换行。
<span>是 inline element，没有换行。
在这里插入图片描述

也就是说<span>前后都没有换行。
不能将块级元素放到行内元素内。
<div>Some <span>text that <div>I want</div> to mark</span> up</div> 非法！

总而言之，<div>和<span>是两个没有任何实际含义的标签，只是为了方便组织元素，抓取内容。

display 属性

<div> 默认 display 属性为 block，
<span> 默认 display 属性为 inline，
<img>默认 display 为 inline-block.

当 display 属性为 inline-block 时，支持设定 width 和 height, 相反inline 不支持 width 和 height。
<div> 默认会占用整行，<span> 会尽可能少占空间，

当 display 为 none 时，显示效果等同于删除，如同从来不存在。而 visibility: hidden; 只是使得元素看不见，但元素仍然在那里，影响布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div-1 {
        display: block;
        background-color: red;
      }
      #span-1 {
        display: inline;
        background-color: cyan;
      }
      #img {
        display: inline-block;
        width: 150px;
        height: 150px;
      }
      #span-2 {
        display: inline;
        background-color: purple;
      }
      #div-2 {
        display: block;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="div-1">This is a div</div>
    <span id="span-1">This is a span</span>
    <img src="images/5.JPG" alt="" id="img" />
    <span id="span-2">This is another span</span>
    <div id="div-2">This is another div</div>
  </body>
</html>