CSS使用高级技巧合集(二)
- 原创经验
- |
- 更新：
- |
想要成为一名软件工程师，对于一些程序语言一定要全面进行了解和掌握，比如基础的代码、CSS样式、数据库等等，这些都是电脑软件工程师需要掌握的基本技能，今天要给大家介绍的是CSS使用高级技巧，下面我们就一起来看看吧。
具体内容
-
为 body 元素添加行高
不必为每一个
，元素逐一添加 line-height，直接添加到 body 元素：
body {
line-height: 1.5;*
}
文本元素可以很容易地继承 body 的样式。
-
为表单元素设置:focus
有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。 使表单元素的焦点脱颖而出，然后与浏览器的默认实现保持一致：
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;*
outline: #000 dotted 2px;*
outline-offset: .05em;*
}
-
垂直居中任何元素
不!这绝不是黑魔法，真的可以垂直居中任何元素：
html,
body {
height: 100%;*
margin: 0;*
}
body {
-webkit-align-items: center;*
-ms-flex-align: center;*
align-items: center;*
display: -webkit-flex;*
display: flex;*
}
...還有CSS Grid:
body {
display: grid;*
height: 100vh;*
margin: 0;*
place-items: center center;*
}
这还不够?垂直方向，水平方向?任何元素，任何时间，任何地点?CSS-Tricks 有篇好文讲到了各种居中的技巧。
注意： IE11 对 flexbox 的支持有点 bug。
-
逗号分隔列表
使列表的每项都由逗号分隔：
ul > li:not(:last-child)::after {
content: ",";*
}
因最后一项不加逗号，可以使用 :not() 伪类。
注意： 这一技巧对于无障碍，特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容,需要注意。
注意事项
-
在这里要提醒大家，支持以上这些技巧的情况，都适用于最新版的 Chrome, Firefox, Safari, Opera,Edge, 以及 IE11，作为一名大学生，如果想要从事软件行业，想要成为优秀的软件工程师，那就把以上的CSS使用高级技巧学起来吧。
