内容简介：display 属性规定元素应该生成的框的类型。以下是一些关于display比较常用的属性值：其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。
display 属性规定元素应该生成的框的类型。
以下是一些关于display比较常用的属性值：
| 值 | 描述 |
|---|---|
| none | 元素不会显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| line-block | 行内块元素。（CSS2.1 新增的值）[IE6/7不支持] |
| list-item | 此元素会作为列表显示。 |
| inline-table | 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 |
| table | 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 |
| table-row | 此元素会作为一个表格行显示（类似 tr）。 |
| table-cell | 此元素会作为一个表格单元格显示（类似 td 和 th）. |
| inherit | 规定应该从父元素继承 display 属性的值。 |
其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。
二、display:none
- 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。
三、display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
- block元素可以设置margin和padding属性；
- block元素可以设置width、height属性。
- 块级元素即使设置了宽度，仍然是独占一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行。
块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，如下图所示：
块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行，如下图所示：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
