css是网页设计中必不可少的一部分，而display属性是其中比较重要的一个属性。display属性的主要作用是控制元素在网页中的显示方式，包括block，inline，inline-block，flex，grid等几种方式。在本文中，我们将介绍display属性的用法。
- block
block是display属性的默认值。当一个元素被设置为block时，它会在页面上显示为一个块级元素，它会占据一整行，并会自动换行。常见的块级元素包括p、h1~h6、div等。块级元素可以设置宽、高、外边距、内边距等属性，也可以通过display:none隐藏该元素。
示例代码：
立即学习“前端免费学习笔记（深入）”；
效果描述： 简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片，且CSS较为冗余，懒人站长已经做过优化，方便懒人们使用 使用方法： 1、将CSS引入到你的页面中，保证命名不冲突 2、将index.html中代码部分拷贝到你需要的地方即可
我是一个块级元素
- inline
inline是另一种常见的display属性。当一个元素被设置为inline时，它会在页面上显示为一个内联元素，它不会换行，并会在一行内排列。常见的内联元素包括a、span、img等。内联元素的宽度和高度取决于元素的内容，不可以设置外边距和内边距，也不可以通过display:none隐藏该元素。
示例代码：
立即学习“前端免费学习笔记（深入）”；
我是一个内联元素
- inline-block
inline-block是block和inline的结合，当一个元素被设置为inline-block时，它会在页面上显示为一个内联块级元素，它不会占据一整行，但可以有宽、高、外边距和内边距，并且可以设置display:none。
示例代码：
立即学习“前端免费学习笔记（深入）”；
- flex
flex是CSS3中新增加的一种属性，它可以让元素的布局更加灵活。当一个元素被设置为flex时，它会成为一个容器，里面的子元素可以通过设置flex属性来灵活地调整宽高以及布局方式。需要设置display:flex来启用flex属性，可以设置flex-direction、justify-content、align-items、align-content等属性来控制子元素的布局。
示例代码：
立即学习“前端免费学习笔记（深入）”；
- grid
grid是CSS3中另一种新增加的属性，它可以用于创建网格布局。与flex类似，需要设置display:grid来启用grid属性，可以通过grid-template-rows、grid-template-columns、grid-template-areas等属性来控制网格的布局。
示例代码：
立即学习“前端免费学习笔记（深入）”；
123
以上就是display属性的用法，可以根据需要选择合适的属性来控制元素的布局，实现网页设计的效果。
