课程咨询 :0551-65959799

合肥web前端培训

合肥web培训 > 达内新闻 > 前端工程师须知的CSS小技巧
  • 前端工程师须知的CSS小技巧

    发布:合肥web培训      来源:达内新闻      时间:2016-05-25

  • 合肥达内web培训专家发现,一些CSS技巧可以帮你web开发更高效。

    1、使用: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选择器按照人类描述它的方式定义边框。

    2、为body添加行高

    你不需要分别为每一个 <p>, <h*> 等元素添加行高,而是为body添加:

    body {
         line-height: 1;
    }

    这种方式下,文本元素可以很容易从body继承。

    3、垂直居中任何元素

    你的确可以垂直居中任何元素:

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

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

    4、逗号分离的列表

    让列表看起来更像一个真正的逗号分离列表:

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

    使用伪类:not() ,这样最后一个元素不会被添加逗号。

    5、使用负 nth-child 选择元素

    在CSS使用负nth-child选择1到n的元素。

    li {
       display: none;
    }

    /* 选择1到3的元素并显示 */

    li:nth-child(-n+3) {
       display: block;
    }

    或者,你已经学习了一些关于 使用 :not(),尝试:

    /* select items 1 through 3 and display them */

    /* 选择1到3的元素并显示 */

    li:not(:nth-child(-n+3)){
      display: none;
    }

    6、使用SVG图标

    没有理由不使用SVG图标:

    .logo {
      background: url("logo.svg");
    }

    SVG对所有分辨率类型具有良好的伸缩性,IE9以上的所有浏览器都支持。所以放弃.png,.jpg或gif-jif等任何文件。

    7、文本显示优化

    有些字体在所有的设备上并不是最优显示,因此让设备浏览器来帮忙:

    html {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    8、在纯CSS实现的内容滑块上使用max-height,同时设置overflow hidden:

    .slider ul {
      max-height: 0;
      overlow: hidden;
    }

    .slider:hover ul {
      max-height: 1000px;
      transition: .3s ease; /* animate to max-height */
    }

    9、继承box-sizing

    从html继承box-sizing:

    html {
      box-sizing: border-box;
    }

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

    这让插件或使用其他行为的组件能很容易地改变box-sizing。

    10、表格单元格等宽

    使用table-layout:fixed来保持单元格相同的宽度:

    .calendar {
      table-layout: fixed;
    }

    11、使用Flexbox摆脱边界Hack

    当使用列约束时,可以抛弃nth-,first- 和 last-child的hacks,而使用flexbox的space-between属性:

    .list {
      display: flex;
      justify-content: space-between;
    }

    .list .person {
      flex-basis: 23%;
    }

    现在列约束总是等间隔出现。

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

    显示没有文本值但是 href 属性具有链接的 a 元素的链接:

    a[href^="http"]:empty::before {
      content: attr(href);
    }

    这样做很方便。

    推荐文章

上一篇:web开发之DOM探索

下一篇:聊聊Ajax的优缺点

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-65959799     全国服务监督电话:400-111-8989
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56