网页学习之div，span，CSS

最新推荐文章于 2021-08-04 09:23:20 发布

崔博伦

最新推荐文章于 2021-08-04 09:23:20 发布

阅读量917

点赞数 1

分类专栏： Web前端文章标签： css div span

本文链接：https://blog.csdn.net/IstarI/article/details/51734008

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Div

div属于块级元素，使用：<div></div>将内容放到Div层中，这样做的好处就是可以将这些内容作为一个整体进行处理，比如：整体移动，整体隐藏等。

Span

span不同于div的是：span是内联元素，div默认是不和其他内容在同一行，但是可以通过CSS设置在同一行上。同时span默认是可以和其他内容在同一行，也是可以通过CSS设置不在同一行上。此外，div是可以放任何内容，而span一般是用来圈住一段文字，来整体设置文字的样式。

CSS

CSS又叫层叠样式表，是用来美化页面的，可以对页面元素进行更加精细的设置，样式主要是描述元素的字体颜色、背景颜色、边框等。

使用CSS的好处：

（1）外观美化布局

（2）样式表能实现样式与内容分离，方便了团队开发

（3）方便统一定义格式，修改也方便

HTML标签的外观样式比较单一，HTML主要是控制语义的不用于控制外观，并且他控制外观的能力也没有那么强。

下面介绍一个CSS样式来控制外观的例子（其中这些属性都是经常会用到的）：

<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
    <div style="color:Black;
        font-size:50px;
        font-family:华文行楷;
        background-color:Orange;
        width:350px;
        border:10px groove Black;
        cursor :pointer;
        ">
        <p>
        两个黄鹂鸣翠柳
        </p>
        <p>
        一行白鹭上青天
        </p>
        <p>此情若是长久时
        </p>
        <p>
        又岂在朝朝暮暮
        </p>
    </div>
</body></span>

Result：

崔博伦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
网页学习之div，span，CSS

Divdiv属于块级元素，使用：将内容放到Div层中，这样做的好处就是可以将这些内容作为一个整体进行处理，比如：整体移动，整体隐藏等。Spanspan不同于div的是：span是内联元素，div默认是不和其他内容在同一行，但是可以通过CSS设置在同一行上。同时span默认是可以和其他内容在同一行，也是可以通过CSS设置不在同一行上。此外，div是可以放任何内容，而span一般是用来圈住
复制链接

扫一扫