启福

昨天折腾某主题时发现，两列的相册和一列的相册，右端对不齐。我当然忍不了，于是看了一下它的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”这些简单的选择器，所以今天简单分享一下哈。