中软首页
●  教育部授予:“软件工程专业大学生实习实训基地”资质
●  商务部授予:“中国服务外包示范培训中心”资质
●  工信部授予:国家信息技术紧缺人才培养工程“521计划”资格
●  获得腾讯授予:中国IT教育十大影响力品牌

≡ 技术知识库
当前位置:网站首页>技术知识库>>文章内容
10个技巧让你的CSS更专业
作者:   来源:    时间:2017-02-16 14:23:00    字体:[大] [中] [小]




1、使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; }


现在元素的 margin 和 padding 已为0,box-sizing可以管理您的CSS盒模型布局。

注意:如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。


2、继承 box-sizing

从 html 元素继承 box-sizing :

html { 
  box-sizing: border-box;
}

*, *:before, *:after { 
   box-sizing: inherit;
}


如此在插件或其它组件里改变 box-sizing 变得简单。


3、使用 :not() 选择器来决定表单是否显示边框

使用 :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() 更加清晰,具有可读性。


4、为 body 元素添加行高

为body元素添加行高

不必为每一个

元素逐一添加 line-height,直接添加到 body 元素:


body { 
  line-height: 1.5;
}


文本元素可以很容易地继承 body 的样式。


5、垂直居中任何元素

不!这绝不是黑魔法,真的可以垂直居中任何元素:

html, body { 
  height: 100%; 
  margin: 0;
}

body { 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  display: -webkit-flex; 
  display: flex;
}


注意: IE11 对 flexbox 的支持有点 bug。


6、逗号分隔的列表


使列表的每项都由逗号分隔:

ul > li:not(:last-child)::after {
  content: ",";
}


因最后一项不加逗号,可以使用 :not() 伪类。

注意:这一技巧对于无障碍,特别是屏幕阅读器而言并不理想,而且复制粘贴并不会带走CSS生成的内容。



7、使用负的 nth-child 来选择元素

使用负的 nth-child 来选择元素

使用负的 nth-child 可以选择 1 至 n 个元素。

li { 
  display: none;
}

/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}


或许你已经掌握了如何使用 :not()这个技巧,试下这个:

/* 选择第 1 至第 3 个元素并显示出来 */
li:not(:nth-child(-n+3)) {
  display: none;
}


如此简单!



8、使用 SVG 图标

使用SVG图标

没有理由不使用 SVG 图标:

.logo {
  background: url("logo.svg");
}
SVG 在所有分辨率下都可以良好缩放,并且支持所有 IE9 以后的浏览器,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。

注意: 针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:

.no-svg .icon-only:after {
  content: attr(aria-label);
}


9、使用 “形似猫头鹰” 的选择器

使用 “形似猫头鹰” 的选择器

这个名字可能比较陌生,不过通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用,效果非凡:

* + * {
  margin-top: 1.5em;
}


在此示例中,文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em 的样式。



10、使用 max-height 来建立纯 CSS 的滑块

使用 max-height
来建立纯 CSS 的滑块


max-height 与 overflow hidden 一起来建立纯 CSS 的滑块:

.slider {
  max-height: 200px;
  overflow-y: hidden; 
  width: 300px;
}
 
.slider:hover { 
   max-height: 600px;
   overflow-y: scroll;
}


鼠标移入滑块元素时增大它的 max-height 值,便可以显示溢出部分。

这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11,同学们可以试试看哦!




中软国际教育科技微网页二维码
版权所有 © 2008-2014 北京中软国际教育科技股份有限公司 京ICP备09078625号-2 京公安备11010802014778号 隐私声明 | 联系我们 | 网站地图

华东

华南

华中

华北

西北

西南

东北