css中 display block属性的用法

news2024/12/22 18:43:58

前言

display:block是一个css属性，用于控制元素的显示方式。当元素的display属性设置为block时，元素会以块级元素的方式进行显示。

块级元素（block-level element）是指在HTML中以块的形式展示并独占一行的元素。与块级元素相对的是内联元素（inline element），内联元素不会独占一行，可以与其他元素在同一行显示。

设置display:block属性的元素会以独立的块级盒子进行显示。这意味着元素会自动换行，并占据父元素的整个宽度（如果没有设置宽度）。此外，block元素可以设置宽度、高度、外边距（margin）和内边距（padding）等样式。

一、含义：

“display: block”指定一个元素将以以下方式显示：

占据整个水平宽度，从左到右延伸
在其他块级元素上方或下方开始新的一行
具有自定义高度和宽度（除非另有指定）

二、什么时候使用 Display Block

“display: block”通常用于以下元素：

标题（）
段落（
）
列表（）
表格（）
div 和 span 等容器元素

三、代码示例：

<p class="p1">我是一个段落</p>
<br>

<div class="div1"></div>
<br>
<div class="div2"></div>
<span class="span1">我是一个span标签元素</span>

以下 CSS 样式将元素以块级方式显示：

.p1 {
            display: block;
            background-color: red;
        }
        .div1 {
            height: 100px;
            border: 1px solid red;
            display: block;
            background-color: yellowgreen;
        }
        .div2 {
            width: 300px;
            height: 100px;
            border: 1px solid red;
            display: block;
            background-color: #838eff;
        }
        .span1 {
            /*display: block;*/
            background-color: red;
        }

页面的样式表现：

span标签加 display: block;属性

        .p1 {
            display: block;
            background-color: red;
        }
        .div1 {
            height: 100px;
            border: 1px solid red;
            display: block;
            background-color: yellowgreen;
        }
        .div2 {
            width: 300px;
            height: 100px;
            border: 1px solid red;
            display: block;
            background-color: #838eff;
        }
        .span1 {
            display: block;
            background-color: red;
        }

页面样式表现