📦 归档笔记 — 原创建于 WizNote,仅作归档展示;观点以当年为准,非最新。

CSS display 属性

创建时间2019-05-13最后修改2019-05-14原位置/程序员成长之旅/HTML+css网页学习/笔记/字数581图片/附件1
目录:程序员成长之旅/HTML+css网页学习/笔记

# CSS display 属性

  • display是CSS中最重要的用于控制布局的属性.每个元素都有默认的一个display,具体是什么值就和元素的类型有关.对于大多数元素他们的默认值通常是blockinline.一个block元素被叫做块级元素,一个inline元素通常被称作行内元素.

block

div

会重开一行并且会尽可能的盛满容器

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 pform 和HTML5中的新元素: headerfootersection 等等。

inline

可以在段落中包裹一些文字而不会打乱段落的布局

span就是一个标准的行内元素.一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局.a元素就是最常用的行内元素,它可以被用作连接.

nono

可以隐藏或显示元素

另一个常用的display值是nono.一些特殊的默认display值是它,例如script.display:nono通常被JavaScript用来不删除元素的情况下隐藏或显示元素.

其他

还有很多的更有意思的 display 值,例如 list-itemtable这里有一份详细的列表。之后我们会讨论到 inline-blockflex

额外加分点

可以随时随地的重写它

就像我之前讨论过的,每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它!虽然“人为制造”一个行内元素可能看起来很难以理解,不过你可以把有特定语义的元素改成行内元素。常见的例子是:把 li 元素修改成 inline,制作成水平菜单。

附件