本文主要包含css布局技巧,css hack技巧,div css布局技巧,css命名技巧,css使用技巧等相关知识,u013067420的博客希望在学习及工作中可以帮助到您
转载自:http://www.cnblogs.com/jintaostudy/p/5218088.html,感谢这位作者
-
使用:not()去除导航上不需要的边框
-
为body添加行高
-
垂直居中任何元素
-
逗号分离的列表
-
使用负nth-child选择元素
-
使用SVG图标
-
文本显示优化
-
在纯CSS幻灯片上使用max-height
-
继承box-sizing
-
表格单元格等宽
-
使用Flexbox摆脱边界Hack
-
使用属性选择器选择空链接
使用:not()添加/去除导航上不需要的边框
添加边框…
/* 添加边框 */
.nav li {
border-right: 1px solid #666;
}
…然后去除最后一个元素的边框…
/* 移除边框 */
.nav li:last-child {
border-right: none;
}
…使用伪类 :not() 将样式只应用到你需要的元素上：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
当然，你可以使用.nav li + li 或者 .nav li:first-child ~ li， 但是使用 :not() 的意图特别清晰，CSS选择器按照人类描述它的方式定义边框。
为body添加行高
你不需要分别为每一个 <p>, <h*> 等元素添加行高，而是为body添加:
body {
line-height: 1;
}
这种方式下,文本元素可以很容易从body继承。
垂直居中任何元素
不，这不是黑魔法，你的确可以垂直居中任何元素：
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items