CSS 属性篇(七):Display属性

栏目: CSS · 发布时间: 6年前

内容简介: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

  1. 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样,也就是说它所占据的空间消失了。元素的内容也会消失。

三、display:block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度;
  2. block元素可以设置margin和padding属性;
  3. block元素可以设置width、height属性。
  4. 块级元素即使设置了宽度,仍然是独占一行。块级元素在设置宽度的情况下,是通过自定义margin-right来自动填满一行,这个时候你设置margin-right是无效的;块级元素在没有设置宽度的时候,margin-right会生效,块级元素的width通过自定义在自动填满一行。

块级元素在设置宽度的情况下,是通过自定义margin-right来自动填满一行,这个时候你设置margin-right是无效的,如下图所示:

CSS 属性篇(七):Display属性

块级元素在没有设置宽度的时候,margin-right会生效,块级元素的width通过自定义在自动填满一行,如下图所示:

CSS 属性篇(七):Display属性

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序设计艺术(第1卷)

计算机程序设计艺术(第1卷)

[美] Donald E. Knuth / 清华大学出版社 / 2002-9 / 80.00元

第1卷首先介绍编程的基本概念和技术,然后详细讲解信息结构方面的内容,包括信息在计算机内部的表示方法、数据元素之间的结构关系,以及有效的信息处理方法。此外,书中还描述了编程在模拟、数值方法、符号计算、软件与系统设计等方面的初级应用。此第3版增加了数十项简单但重要的算法和技术,并根据当前研究发展趋势在数学预备知识方面做了大量修改。一起来看看 《计算机程序设计艺术(第1卷)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具