详解css中的display属性

在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例讲解方法来学习和了解DIV CSS display。 CSS中的`display`属性是一个非常重要的样式属性，用于定义元素的布局方式。它规定了元素应该生成的框的类型，从而影响元素的显示效果和周围的元素如何排列。在CSS布局中，`display`属性通常与`block`、`none`、`inline`以及`inline-block`等值一起使用。 1. `display: block` - `block`值使得元素以块级元素的形式显示。这意味着元素会占据一整行，并且可以设置宽度、高度、内边距（padding）和外边距（margin）。块级元素通常包括`<div>`、`<p>`、`<h1>`-`<h6>`等。 - 示例：`.block`类在HTML中的应用，元素会呈现为绿色的方块，并且独占一行。 2. `display: inline` - `inline`值使元素以内联元素的方式显示。内联元素只占据其内容的宽度，不接受宽度和高度的设置。它们可以与其他内联元素在同一行显示，如`<span>`、`<a>`元素。 - 示例：`.inline`类中的元素，尽管设置了宽度和高度，但实际效果只会显示内容的大小，因为内联元素不响应宽度和高度。 3. `display: inline-block` - `inline-block`是结合了`block`和`inline`特性的值，允许元素具有块级元素的宽度和高度属性，同时保持内联元素的同行显示。这对于需要设置尺寸但不想让元素独占一行的情况非常有用。 - 示例：`.inline-block`类的元素，会显示为蓝色的方块，并且与其他内联元素在一行内显示，但保留了设置的宽度和高度。 4. `display: none` - `none`值会使元素完全不可见，并且不占用任何空间。与`visibility: hidden`不同，后者只是隐藏元素但保留其在页面上的位置。 除了这些常见的值，`display`属性还有其他一些不太常用但仍然重要的值： - `list-item`：将元素显示为列表项，如`<li>`元素。 - `run-in`：元素会根据上下文作为块级或内联元素显示，但在实际应用中支持度较低。 - `compact`和`marker`：这两个值在CSS2.1中已被删除，因为缺乏广泛支持。 - `table`、`inline-table`、`table-row-group`、`table-header-group`、`table-footer-group`、`table-row`、`table-column-group`、`table-column`、`table-cell`和`table-caption`：这些值用于创建表格布局，允许更精细的控制表格元素的显示。 理解并熟练掌握`display`属性的不同值对于创建复杂的网页布局至关重要。它可以用来实现各种布局模式，如流式布局、网格布局、 Flexbox 或者 CSS Grid。通过灵活运用`display`属性，开发者能够创建出响应式和适应性强的现代网页设计。