了解CSS显示属性

null

现在是午夜,那个DIV在您的网站上仍然看起来像一个孩子的玩具箱。所有的元素都是乱七八糟的混乱,每次你玩CSS显示财产,他们重新安排自己完全不同的废话。

如果你像我一样,你可能会通过在你的呼吸下嘀咕并通过键盘变得更加积极来解决这个问题。虽然这个策略以前对我有用,但我最近开始寻找一种更好的理解方法显示属性。

事实证明了它的基础知识显示比我原先想象的要简单得多。事实上,他们使用与包装行李箱相同的原则。我要报道显示:块内联块排队。如果你以前有秩序地安排了行李箱,你会看到平行的。如果你是那种随意乱撞你所有衣服的人 - 嗯,我能为你做的事情太多了。

我们的行李箱将包含三种类型的服装:

  • 熟食,就像一件领衬衫
  • 可卷起的T恤
  • 可以塞进缝隙的袜子或内衣

作为参考,如果我们用HTML模拟行李箱,它将如下所示:

顶部的精致物品

The collared shirt sits on a pile of the clothes beneath it.  It is the only item that occupies its own layer

领衬衫坐在它下面的一堆衣服上。它是唯一占据自己图层的项目

显示:块是大多数HTML元素的默认值。这意味着该元素占据其容器内的整个水平空间DIV。如果它与其他同级元素相邻,它将开始一个新行,并且不允许其行上的其他元素。它类似于放在行李箱顶部的精致物品。这些是精致或聪明的文章,如领衬衫。你不希望它们起皱,所以你要确保它们不会被推到其他衣服上。

这带来了最艰难的部分之一显示:块。请注意领衬衫如何不占据行李箱的整个宽度?这并不意味着其他项目会升级到其水平。假设这件衬衫占行李箱宽度的60%;它仍会阻止其他元素加入顶层。

这就是图片中有橙色边框的原因。一个显示:块如果元素不占据整个水平空间,它将自动在其周围添加边距。

整齐的T恤

Here we can see the top and bottom rows of T-shirts, with four shirts in each

在这里,我们可以看到顶部和底部的T恤衫,每件都有四件衬衫

你旅行的大多数行李箱可能都装满了你的其他衣服。为了简单起见,我们将把它简化为T恤。互联网上有关于折叠或滚动是否更有效的争论。我是一个折叠的人。

无论如何,为了适应大多数物品,你可以将你的T恤并排排列。这正是如此显示:内联块是为了。这些元素可以在同一条线上彼此相邻,也可以在旁边显示:内联元素。

不像显示:内联元素,内联块如果元素不适合其包含,则元素将移动到下一行DIV和另一边一起内联块元素。为了让T恤溢出到下一排,你需要将它切成两半并使用剩下的一半来开始新的一行。Inline-block的如果元素不适合在一条线上,则不允许将它们分成两半。

填补空白的袜子

The socks are inline elements, which means they will fill the gaps around the T-shirts

袜子是内联元素,这意味着它们将填补T恤周围的空白

回到最初的HTML,你会发现有一个袜子

八件T恤之间。但是看看右边行李箱的水平视图。如果有一个袜子
,它如何结束中间行并开始下行?这是目的显示:内联

一个排队如果元素超出了宽度,则元素将溢出到下一行DIV(这种方式不同于内联块要么)。自从我们的袜子DIV满是袜子,随意地填入缝隙,它可以很容易地开始填充中间行右侧的缝隙,并溢出开始底行。

为此,不需要将袜子切成两半。这就是他们成为的原因排队,而T恤只能内联块。如果中排的T恤只占宽度的60%,那就是袜子

将向上移动以填充行的其余部分的整个空间。

一路顺风

这是我们行李箱的最终CSS:

.delicate {display:block;宽度:60%; } .tshirt {display:inline-block;宽度:20%; } .socks {display:inline; }

这里有几个替代方案来说明显示的不同用途。如果顶上的熟食有显示:内联块,它们适合搭配T恤。一些T恤会上升到顶线,其余的将相应调整。领衬衫的左右两侧没有舒适的缓冲。

如果每件T恤都有显示块,你会有一大堆T恤在一起,每行一个。如果袜子有显示:内联块,他们都会坐在底排,而不是在两排之间流动。一些T恤会被推到另一排,形成第四条线。中间排T恤的右侧会有一个缺口。

根据我在这里概述的方法,我们最终得到一个整齐的行李箱,充分利用可用空间。

这篇文章最初出现在网络杂志问题289;在这里买

相关文章:



翻译字数超限