css是网页设计中必不可少的一部分，而display属性是其中比较重要的一个属性。display属性的主要作用是控制元素在网页中的显示方式，包括block，inline，inline-block，flex，grid等几种方式。在本文中，我们将介绍display属性的用法。
- block
block是display属性的默认值。当一个元素被设置为block时，它会在页面上显示为一个块级元素，它会占据一整行，并会自动换行。常见的块级元素包括p、h1~h6、div等。块级元素可以设置宽、高、外边距、内边距等属性，也可以通过display:none隐藏该元素。
示例代码：
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
立即学习“前端免费学习笔记（深入）”；
<div>我是一个块级元素</div>
- inline
inline是另一种常见的display属性。当一个元素被设置为inline时，它会在页面上显示为一个内联元素，它不会换行，并会在一行内排列。常见的内联元素包括a、span、img等。内联元素的宽度和高度取决于元素的内容，不可以设置外边距和内边距，也不可以通过display:none隐藏该元素。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<a href="#">我是一个内联元素</a>
- inline-block
inline-block是block和inline的结合，当一个元素被设置为inline-block时，它会在页面上显示为一个内联块级元素，它不会占据一整行，但可以有宽、高、外边距和内边距，并且可以设置display:none。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>
- flex
flex是CSS3中新增加的一种属性，它可以让元素的布局更加灵活。当一个元素被设置为flex时，它会成为一个容器，里面的子元素可以通过设置flex属性来灵活地调整宽高以及布局方式。需要设置display:flex来启用flex属性，可以设置flex-direction、justify-content、align-items、align-content等属性来控制子元素的布局。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;"> <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span> <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span> <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span> </div>
- grid
grid是CSS3中另一种新增加的属性，它可以用于创建网格布局。与flex类似，需要设置display:grid来启用grid属性，可以通过grid-template-rows、grid-template-columns、grid-template-areas等属性来控制网格的布局。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;"> <div style="grid-row: 1/3;grid-column: 1/3;">1</div> <div style="grid-row: 1/2;grid-column: 3/4;">2</div> <div style="grid-row: 2/3;grid-column: 3/4;">3</div> </div>
以上就是display属性的用法，可以根据需要选择合适的属性来控制元素的布局，实现网页设计的效果。
