CSS样式的display: block

听海边涛声

已于 2024-05-23 09:59:11 修改

阅读量489

点赞数 9

文章标签： css javascript 前端

于 2024-05-23 09:57:59 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139138672

版权

display: block
该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。

示例：下面代码中将span显示为block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: block;
        }
    </style>
</head>

<body>
    <p>这是一个新闻页面<span>今日要闻</span></p>
</body>

</html>

展示效果：
在这里插入图片描述

作为对比，下面示例中没有将span作为block：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>这是一个新闻页面<span>今日要闻</span></p>
</body>

</html>