白痴做Web应用之02：从Div 和 Span开始

最新推荐文章于 2024-09-19 17:23:08 发布

Sherry_Pei

最新推荐文章于 2024-09-19 17:23:08 发布

阅读量1.2k

点赞数

分类专栏： Java Web 文章标签： div web html

本文链接：https://blog.csdn.net/Sherry_Pei/article/details/7210640

版权

Java Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、一般情况下，Div是Block元素，Span是Inline元素。

Block元素占一整行，而inline元素会在同一行排列直到到达行尾后换行。

例如：

code-1

<!DOCTYPE html>
<html>
<head>
    <title>Div</title>
    <style type="text/css">
        div {
            padding: 10px;
        }
        div#div0 {
            background: purple;
        }
        div#div1 {
            background: red;
        }
        div#div1_1 {
            background: yellow;
        }
        div#div1_2 {
            background: green;
        }
        div#div1_2_1 {
            background: blue;
        }
    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1">
        <div id="div1_1"></div>
        <div id="div1_2">
            <div id="div1_2_1"></div>
        </div>
    </div>
</body>
</html>

渲染之后是

pic-1

可以看到，sibling之间是按先后顺序每个div节点占一整行，依次向下排列的；而Parent完全包围着Child。

而又例如：

code-2

<!DOCTYPE html>
<html>
<head>
    <title>Span</title>
    <style type="text/css">
        span {
            padding: 10px;
        }
        span#span0 {
            background: purple;
        }
        span#span1 {
            background: red;
        }
        span#span1_1 {
            background: yellow;
        }
        span#span1_2 {
            background: green;
        }
        span#span1_2_1 {
            background: blue;
        }
    </style>
</head>
<body>
    <span id="span0"></span>
    <span id="span1">
        <span id="span1_1"></span>
        <span id="span1_2">
            <span id="span1_2_1"></span>
        </span>
    </span>
</body>
</html>

渲染之后则是

pic-2

可以看到，sibling之间是按先后顺序每个span依次向右在同一行排列的；而Parent并不完全包围着Child，似乎上下并没有响应padding的10px。我的理解是，做为inline元素，span并不对垂直方向的布局负责。

2、“不一般”的情况下，Div不按Block元素展示，Span也可以不按Inline元素展示。

2.1、将div inline：

如果把code-1中

div {
    padding: 10px;
}

变成

div {
    padding: 10px;
    display: inline;
}

那么，它渲染之后会与pic-2所展示的span渲染图一致；

2.2、将span block：

如果把code-2中

span {
    padding: 10px;
}

变成

span {
    padding: 10px;
    display: block;
}

那么，它渲染之后会与pic-1所展示的div渲染图一致；

2.3、问题：

然后我就不明白了，如果inline的div和span、block的span和div是一样的，为啥不去掉一个，只用一个通用的，例如叫做<area>，然后用diplay: block/inline来控制呢？

P.S 找到一个资料，貌似不错噢。

HTML 系列教程

Sherry_Pei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录