CSS+div美化和布局_div美化标题

作者：你好赵伟 | 2024-06-28 21:57:34

踩

div美化标题

1、<div>标记与<span>标记

<div>(division)是一个区块容器标记，即<div>与</div>之间可以容纳段落，标题、表格、图片、乃至章节、摘要等各种HTML元素。

因此可以把<div>与</div>的内容视为一个独立对象，用于CSS控制。

<span>作为容器标记来讲，与<div>区别不大；二者作用都是独立出各个区块。

区别：<div>是一个块级元素，包围的元素会自动换行；

<span>是行内元素，不换行，没有结构上的意义，纯粹是应用样式。

<body>


            <p>div标记不同行</p>
            <div><img src="jpg1"></div>
             <div><img src="jpg2"></div>
                                          //两张图片自动换行
             <p>div标记不同行</p>
             <span><img src="jpg1"></span>
             <span><img src="jpg2"></span>

                                         //两张图片在同一行
</body>

此外，<div>可以包含<span>,反之则不行。

<div>用于大区块；

<span>用于需要单独设置样式的小元素，eg:一个单词、图片、超链接等。

2、盒子模型

盒子模型是CSS控制页面时一个重要概念。只有很好的掌握盒子模型以及每个元素的用法，才能真正地控制页面中各元素的位置。

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。

盒子的实际宽度（或高度）= content+border+padding+margin

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/767425

CSS+div美化和布局_div美化 标题

CSS+div美化和布局_div美化标题