Html第11集：div、span、div 盒子模型

赵彦军

已于 2022-10-09 14:42:07 修改

阅读量1.8k

点赞数

分类专栏：前端学习笔记文章标签： html 前端 css

于 2022-10-09 10:58:43 首次发布

本文链接：https://blog.youkuaiyun.com/zhaoyanjun6/article/details/127222347

版权

前端学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML中的div和span元素的区别及用法，包括它们在布局中的作用、如何通过CSS进行样式设置，以及div的盒子模型、自动调整、水平居中和子元素溢出等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请标明出处：http://blog.youkuaiyun.com/zhaoyanjun6/article/details/127222347
本文出自【赵彦军的博客】

前言

div、span 是没有语义的。他们就是一个盒子（容器），用来装内容。

1、在功能方面：div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其它元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
2、在使用方面：span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。span可以通过css声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span可以很好解决这些问题
3、div 有宽度 width 、高度 height 。如果不设置宽高、那么 div 的宽度和高度则由它所包含的内容决定。

div

html 中的 div (division) 标签是一个块级元素，浏览器通常会在div元素前后放置一个换行符。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
     
        .red {
            background: coral;
            color: red;
        }

    </style>

</head>
<body>


<div class="red">

    <p>我是一个p</p>
    <p>我是一个p</p>

</div>
</body>

在这里插入图片描述

span

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
     
        .red {
            background: coral;
            color: red;
        }

        .blue {
            background: blue;
        }

    </style>

</head>
<body>


<div class="red">

    <p>我是一个p <span class="blue"> 我是一个span </span> </p>
    <p>我是一个p</p>

</div>

</body>

在这里插入图片描述

div 盒子模型

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>


        .red {
            background: black;
            color: red;
            float: bottom;

            width: 250px;
            height: 70px;

            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 10px;
            padding-right: 10px;

            margin: 20px;

            border: 2px solid #ff0000;
            border-left: 10px solid #2c3e50;
            border-bottom:  10px solid coral;
            border-radius: 8px;
            border-top-left-radius: 20px;
        }

    </style>

</head>
<body>


<div class="red">

    <p>我是一个p</p>
    <p>我是一个p</p>

</div>

</body>

在这里插入图片描述

auto 自动调整

div 的宽度默认是 auto

<head>
   
    <style>


        .red {
            background: black;
            color: red;
            width: auto;
        }

    </style>

</head>
<body>


<div class="red">

    <p>我是一个p</p>
    <p>我是一个p</p>

</div>

</body>

在这里插入图片描述

水平居中

如果 margin-left: auto; margin-right: auto; 那么控件将会水平居中显示

<head>

    <style>

        .red {
            background: black;
            width: 300px;
            height: 100px;
        }

        .child {
            width: 100px;
            color: red;
            margin-left: auto;
            margin-right: auto;
        }

    </style>

</head>
<body>


<div class="red">

    <p class="child">我是一个p</p>

</div>

</body>

在这里插入图片描述
小技巧： margin: 0 auto; 表示上下边距为 0 ，左右边距为 auto

子元素溢出 overflow

处理子元素超出父元素的处理情况，在父元素添加 overflow 属性

overflow: scroll;
overflow-x: scroll;
overflow-y: scroll;

overflow有以下这些属性：

visible 默认值。内容不会被修剪，会呈现在div之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，scroll 会出现横向、纵向滚动条
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，auto 会自动根据实际情况添加滚动条。
inherit 规定应该从父元素继承 overflow 属性的值。（注：所有IE浏览器都不支持inherit属性）

在这里插入图片描述