超爱学习网
css入门
一级目录
基础使用
面试题
二级目录
目录
基础
语法
选择器
引入方式
尺寸
注释
!important
@media
counter
color
宽高
z-index
Viewport
基本元素
文本
字体
背景
鼠标
伪类
伪元素
特别元素
链接
列表
表格
盒子模型
盒子模型简介
外边距margin
边框border
填充padding
轮廓outline
定位、显示、布局
position:static----定位
position:relative--定位
position:fixed---- 定位
position:absolute-定位
position:sticky--- 定位
display:none-----显示
display:block-----显示
display:inline-----显示
display:inline-block示
display:grid------布局
display:flex------布局
visibility--------- 显示
overflow-----溢出处理
float-------------浮动
效果、动画
透明度
圆角
阴影
渐变
2D转换
3D转换
过渡transition
动画keyframes

display: block 的基本概念

在 CSS 中,'display' 属性用于决定一个元素如何在页面中显示。'display: block' 表示元素将作为块级元素显示。块级元素通常独占一行,其宽度默认填满其父元素的宽度,可以设置宽度和高度。常见的块级元素包括
,

,

,
    ,
      等。

块级元素的特点

块级元素的主要特点包括:
1. 默认占据全部可用宽度。
2. 可以控制宽度和高度。
3. 可以设置 margin 和 padding。
4. 每个块级元素后会有一个换行符,因此下一个元素会显示在新的一行。

案例:使用 display: block

以下是一个简单的 HTML 和 CSS 结合的案例,展示了如何使用 'display: block'。
<div style="display: block; background-color: lightblue;
width: 300px; height: 100px; margin: 10px; padding: 5px;">
  这是一个块级元素
</div>
这是一个块级元素