CSS中的calc()以及nth-of-type()

昨天折腾某主题时发现,两列的相册和一列的相册,右端对不齐。我当然忍不了,于是看了一下它的css文件,发现原来是主题的原作者数学不好,最大宽度算错了,而且宽度width小于最大宽度max-width,他这逻辑也是可以了……

不过在css文件中,还是学到了一点东西的,比如“calc()”,括号里面可以填写表达式,表达式里面允许使用“+、-、*、/、()”。

在通常的css属性比如宽度中,指定百分比“%”或者像素“px”就够了,但是使用calc()可以更加灵活。比如,一行有三个div,它们的外边距margin都是固定的10px,那么每个div的宽度如何设置,才可以保证在响应式页面中,无论父元素宽度怎么变化,始终可以刚刚好填满呢?设置“width: 33.3%;”?由于外边距的存在,三个div的总宽度显然会超出父元素的宽度。设置小一点比如“width: 30%;”?那么当父级宽度大于600px时,则填不满;小于600px时,则超出。

在这种情况下,就可以设置“width: calc(100% / 3 – 20px);”,完美解决以上问题。当然,为了兼容性,通常需要把带浏览器前缀的一并写上,如下:

.div-123{
    margin:10px;
    width:27%;
    //向不支持calc()的浏览器妥协,该百分比保证父级最小宽度为320px时不超出;或者将margin修改为百分比形式!
    width:    -moz-calc(100% / 3 - 20px);
    width: -webkit-calc(100% / 3 - 20px);
    width:         calc(100% / 3 - 20px);
}

大部分浏览器都可以支持了,除非很老的,那就要尝试其它css属性值或者用js了。需要注意的是,表达式中的加减号,前后必须有空格,否则识别错误。

还有一个css选择器“:nth-of-type(N)”,它可以用来选择【其父元素的特定类型的第N个子元素】,里面的N可以写数字,表示第几个;可以是关键词比如odd或even,表示所有的奇数或者偶数;还可以是表达式比如3n,表示所有3的倍数(n代表自增的整数)。还是以上述div举例,假如每行有三个div,有很多行,我希望给每行的最后一个div设置一个橙色的右边框,怎么办?如下:

.div-123:nth-of-type(3n){
    border-right:1px solid orange;
}

当然,还有个与它类似的“:nth-child(N)”,用法大体相似,它可以用来选择【其父元素的第N个子元素,不论元素的类型】。简单总结一下就是N在计数时,“:nth-child(N)”把父元素的所有子元素全数一遍,而“:nth-of-type(N)”只数与“:”前面的标签相同的子元素。

之前只用过“first-child”、“last-child”这些简单的选择器,所以今天简单分享一下哈。

随便看看

本文共有26条评论

你好,哪位? 填写