• 今天才知道css hack是什么


    先来个冷笑话:一晚下班回家,一民警迎面巡逻而来。突然对我大喊:站住! 民警:int类型占几个字节? 我:4个。 民警:你可以走了。 我感到很诧异。 我:为什么问这样的问题? 民警:深夜还在街上走,寒酸苦逼的样子,不是小偷就是程序员

    作为一个后端程序员,之前知道的css都是皮毛,因为有专业的美工帮我们做静态页面,我们只需要做好页面数据填充,专心写逻辑代码。现在有一种想去从事web前端开发了,尽管知道一些js的主要概念,原型,原型链,上下文,闭包之类的,但貌似都不是很深入,想想还是先从css开始吧,有时候很简单的某些样式却总是写的很痛苦。所以今天就看了css手册,点滴积累吧。

    什么是css hack

      我自己的理解定义,就是针对不同的浏览器在对某些css属性做解析的时候出现的差异,我们去coding css这些差异的过程。看了css hack知道有

      1.条件hack

    1 <!--[if <keywords>? IE <version>?]>
    2     HTML代码块
    3 <![endif]-->
    <keywords>取值有
      

      lt 小于
      gt  大于
      gte 大于或等于
      lte 小于或等于
      ! 非
    <version>取值有
    可以是6/7/8/9...

    例如 以下表示浏览器是小于ie7的:
    1 <!--[if lt IE 7]>
    2 <style>
    3     .test2{width:100px;height:100px;background:blue}
    4 </style>
    5 <![endif]-->
    以下例子是ie7的,这个是有效果的:
    <!--[if IE 7]>
    <style>
        .test{color:red;}
    </style>
    <![endif]-->
    2.属性级hack
    代码如下:
    #test{
        color:#c30; /* For Firefox */
        color:red; /* For Opera */
        color:yellow9; /* For IE8+ */
        *color:blue; /* For IE7 */
        _color:#ccc; /* For IE6 */
    }
    3.选择符级hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */
    .test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */
    .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
    还有一点小知识是让一个内联元素可以设置宽高 目前知道有display:block/inline-block 或者设置position:absoulte或者设置float等
    最后 -music

      白天总是很忙
      晚上总很慌
      都说前面有光
      谁能给谁方向
      看起来他和她似乎都很风光
      低头承认渺小不如坚强上场

      每天问问自己
      是否尽全力
      不学百般心机
      过程是奖励
      你一直站在光能照到的地方
      只要相信自己其实每个人都一样

      多一个人和你分享
      少一点难自己肩扛
      我们都是笨小孩但不忘挺起胸膛
      多一个人和你分享
      少一点难自己肩扛
      相信自己迟早会发光发亮

      每天问问自己
      是否尽全力
      不学百般心机
      过程是奖励
      你一直站在光能照到的地方
      只要相信自己其实每个人都一样

  • 相关阅读:
    面试常考知识点——Java(JVM,JDK,JRE)
    使用CSS transform属性的skewX、skewY沿X、Y轴倾斜元素
    视觉设计应用
    小程序
    小程序获取用户的登录头像和用户名
    整站建设
    2018-05-05(在小程序中使用图标)
    2018-05-03(PHP)
    webpack
    简历
  • 原文地址:https://www.cnblogs.com/miniyk/p/3734664.html
Copyright © 2020-2023  润新知