最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

[整理]css style中的display

CSS crifan 1958浏览 0评论

How To Detect Which Element Was Clicked, Using jQuery | Metal Toad

中看到的:

  <style>
    .item-list { display: none; }
    .show-list { display: block; }
  </style>

去看看:

css中的display

css display

CSS display 属性

详解css中的display属性(行内元素和块级元素) – trigkit4 – SegmentFault

CSS – “display”属性

“display”属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

<div>

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

</div>

inline

span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。

none

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

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden; 还会保留。

其他 display 值

还有很多的更有意思的 display 值,例如 list-item 和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。

额外加分点

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

[总结]

css中的display作用:

某个元素的显示模式:

常见的值:

  • none:不显示
  • inline:行内元素
  • inline-block:行内块级元素
  • block:块级元素

更多解释:

[整理]CSS,HTML中的Block vs inline

转载请注明:在路上 » [整理]css style中的display

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.174 seconds, using 22.07MB memory