CSS使用高级技巧合集(一)
- 原创经验
- |
- 更新：
- |
想要成为一名软件工程师，对于一些程序语言一定要全面进行了解和掌握，比如基础的代码、CSS样式、数据库等等，这些都是电脑软件工程师需要掌握的基本技能，今天要给大家介绍的是CSS使用高级技巧，下面我们就一起来看看吧。
高级技巧
-
使用CSS复位
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：
*,
*::before,
*::after {
box-sizing: border-box;*
margin: 0;*
padding: 0;*
}
现在元素的 margin 和padding 已为0，box-sizing可以管理您的CSS盒模型布局。
注意：如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。
-
继承 box-sizing
从 html 元素继承box-sizing ：
html {
box-sizing: border-box;*
}
*,
*::before,
*::after {
box-sizing: inherit;*
}
如此在插件或其它组件里改变 box-sizing 变得简单。
-
使用unset而不是重置所有属性
重置元素的属性时，不需要重置每个单独的属性：
button {
background: none;*
border: none;*
color: inherit;*
font: inherit;*
outline: none;*
padding: 0;*
}
你可以用all简写來指定所有元素的属性。 将该值设置为unset会将元素的属性更改为其初始值：
button {
all: unset;*
}
注意： 所有速记在IE11中不被支持，目前正在考虑Edge的支持。 IE11不支持unset。
-
使用 :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，但是 :not() 更加清晰，具有可读性。
注意事项
-
在这里要提醒大家，支持以上这些技巧的情况，都适用于最新版的 Chrome, Firefox, Safari, Opera,Edge, 以及 IE11，作为一名大学生，如果想要从事软件行业，想要成为优秀的软件工程师，那就把以上的CSS使用高级技巧学起来吧。
