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属性来创建具有自定义样式的导航菜单、按钮等。