css中 display block属性的用法

前言

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;
        }

页面样式表现 

四、 总结：

display:block是一个css属性，用于控制元素的显示方式。当元素的display属性设置为block时，元素会以块级元素的方式进行显示。块级元素（block-level element）是指在HTML中以块的形式展示并独占一行的元素。

使用display:block属性还可以改变元素的默认行为。例如，默认情况下，元素是内联元素，点击链接时不会换行。但是通过设置display:block属性，元素可以以块级元素的形式显示，并且点击链接时会换行。

display:block属性还可以与其他CSS属性一起使用，以实现更复杂的布局效果。例如，结合float属性，可以将多个块级元素放置在同一行，并实现水平对齐效果。另外，还可以通过设置display:block属性来创建具有自定义样式的导航菜单、按钮等。