CSS中值得记牢的1些技能

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

Box-sizing

虽然box-sizing在CSS3中才被引进,其有1个值是border-box,让元素的高和宽包括了填充和边框。

CSS Code拷贝內容到剪贴板
  1. .div {   
  2.      width150px;   
  3.      height100px;   
  4.      border1px solid #ccc;   
  5.      box-sizing: border-box;   
  6. }  

Chrome 31+, IE8+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+等都适用该特性。


z-index和精准定位

假如元素沒有精准定位特性,如static/absolute/relative/fixed,改特性将被忽视

CSS Code拷贝內容到剪贴板
  1. positionrelative;   
  2. z-index: 100;  

禁用1个元素

可使用pointer-event特性的1个none值来合理的禁用元素。无论是JQuery還是JavaScript,点一下恶性事件都不容易被开启

CSS Code拷贝內容到剪贴板
  1. .bricked {   
  2.      pointer-events: none;   
  3. }  

Chrome 31+, IE11+, Firefox 31+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.1+适用该特性


长连接换行

阻拦长连接外溢父元素

CSS Code拷贝內容到剪贴板
  1. a {   
  2.      word-wrap: break-word;   
  3. }  


用新闻媒体查寻检验Retina显示信息屏

能够用下面的新闻媒体查寻检验Retina显示信息屏

CSS Code拷贝內容到剪贴板
  1. @media   
  2.      (min-device-pixel-ratio: 2),    
  3.      (min-resolution: 192dpi) {    
  4.           /* Retina CSS */  
  5.      }  

过虑

除IE,filter特性被普遍的适用,但将会会被Spartan适用。在接下来的几10年,它会是1个大恶性事件。

CSS Code拷贝內容到剪贴板

    1. .blur {      
    2.      filter: blur(30px);      
    3. }    
    Chrome 31+, Firefox 35+, Safari 7+, Opera 27+, iOS Safari 7.1+ and Android Browser 4.4+等适用该特性


用省略号减少文字

能够在1个元素选用省略号来减少长文字

CSS Code拷贝內容到剪贴板
  1. .whatever {   
  2.      overflowhidden;   
  3.      text-overflow: ellipsis;    
  4. }  

让1个空元素听从宽度

有时你必须1个空元素去遵照它的宽度特性,能够这样做:

CSS Code拷贝內容到剪贴板
  1. .whatever {   
  2.      min-height1px;   
  3. }  

@supports

@supports查寻和@media查寻相近,若访问器适用,则给定的CSS可能显示信息。现阶段,IE和Safari不适用该特性,但没多久后就会更改。Spartan服务承诺适用该特性,值得希望

CSS Code拷贝內容到剪贴板
  1. @supports (display: flex) {   
  2.      /* flexbox CSS */     
  3. }   
  4.   
  5. @supports not (display: flex) {   
  6.      /* CSS for no flexbox */      
  7. }  

Chrome 31+, Firefox 31+, Opera 27+ and Android Browser 4.4+等适用该特性。