今天小编要跟大家分享的文章是关于Web前端工程师应该知道的CSS专业技巧!熟悉web前端的小伙伴都知道，web前端工作中离不开css的使用。为了帮助大家提高自己的css使用技巧，小编特意为大家准备了这篇文章，下面让我们一起来看一看吧！

1、使用:not()为导航添加/取消边框

很多人会这样给导航添加边框，然后给后一个取消掉：

/*add border*/

.nav li{

border-right:1px solid#666;

}

/*remove border*/

.nav li:last-child{

border-right:none;

}

其实，用CSS的:not()可以简化为下面的代码：

.nav li:not(:last-child){

border-right:1px solid#666;

}

当然，你也可以使用.nav li+li甚至.nav li:first-child~li，但是使用:not()可以使意图更加明确。

2、给body添加line-height属性

你不需要为<p>、<h*>分别添加line-height属性，相反的，只需要添加到body上即可：

body{

line-height:1;

}

这样，文本元素就可以很容易的从body继承该属性。

3、垂直居中

这并不是什么魔法，你可以垂直居中任何元素：

html,body{

height:;

margin:0;

}

body{

-webkit-align-items:center;

-ms-flex-align:center;

align-items:center;

display:-webkit-flex;

display:flex;

}

还需要其他的?水平居中、垂直居中，在任何时间、任何地方?可以看看CSS-Tricks的这篇文章。

注意：flexbox在IE11下存在一些bug。

4、使用逗号分隔列表

使列表看起来像是用逗号分割的：

ul>li:not(:last-child)::after{

content:",";

}

通过:not()伪类去掉后一个元素后面的逗号。

5、使用负的nth-child选取元素

使用负的nth-child在1到n之间选择元素：

li{

display:none;

}

/*选择第1到3个元素并显示它们*/

li:nth-child(-n+3){

display:block;

}

当然，如果你了解:not()的话，还可以这么做：

li:not(:nth-child(-n+3)){

display:none;

}

是不是非常简单?

6、使用SVG作icon图标

没什么理由不使用SVG作icon图标：

.logo{

background:url("logo.svg");

}

SVG对于任何分辨率的缩放效果都很好，并且支持IE9+所有浏览器，所以，放弃使用.png、.jpg、.gif文件吧。

注：以下代码对于使用辅助设备上网的用户可以提升可访问性：

.no-svg.icon-only:after{

content:attr(aria-label);

}

7、文本展示优化

有时候字体并不是对于所有设备都显示为效果，所以使用浏览器来帮忙吧：

html{

-moz-osx-font-smoothing:grayscale;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

}

8、使用max-height实现纯CSS幻灯片

使用max-height与超出隐藏实现纯CSS的幻灯片：

.slider ul{

max-height:0;

overlow:hidden;

}

.slider:hover ul{

max-height:1000px;

transition:.3s ease;/*animate to max-height*/

}

9、继承box-sizing

让box-sizing继承自html：

这使得在插件或者其他组件中修改box-sizing属性变得更加容易。

10、设置表格相同宽度

.calendar{

table-layout:fixed;

}

11、使用Flexbox来避免Margin Hacks

在做多列布局的时候，可以通过Flexbox的space-between属性来避免nth-、first-、last-child等hacks：

.list{

display:flex;

justify-content:space-between;

}

.list.person{

flex-basis:23%;

}

这样，列之间的空白就会被均匀的填满。

12、对空链接使用属性选择器

当<a>中没有文本而href不为空的时候，显示其链接：

a[href^="http"]:empty::before{

content:attr(href);

}

浏览器支持

以上技巧支持大部分现代浏览器，如：Chrome、Firefox、Safari、Edge以及IE11。

以上就是小编讲的大致内容了，还有什么相关问题要问的，达内IT教育涵盖基本行业知识,安排的合理,专业师资,小班授课,费用低,学习快,400咨询热线，24小时答疑。

尊重原创文章，转载请注明出处与链接：http://www.soxsok.com/wnews122314.html 违者必究！ 以上就是关于“南宁web前端线上培训班哪家比较靠谱”的全部内容了，想了解更多相关知识请持续关注本站。