CSS 分类

BFC note

By hiluluke on

前几天和别人交流的时候,让实现这么一个布局:

双栏图片布局

大概就是上面这个样子。左边是一个图片,右边是文字区域。然后我给的大概实现方式是,左边图片高度宽度固定左浮动,然后右边div框起来左外边距等于图片宽度。

然后这个大兄弟马上说,图片高度宽度不知。我想了想,想起来了overflow:auto可以实现,就这样说了。大兄弟马上问我为啥,我懵逼了。

大兄弟一脸高深的告诉我:知道BFC不?(大兄弟人还是挺好的)

本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。

1、border-radius 有“/”的语法

首先,下面这个你信或则不信它都是一条border-radius的正确的代码:

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你没见过,可能会有些困惑,下面是一些介绍:

如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。