CSS面试的技巧须知，哪些需要掌握得CSS技巧

来源：蜘蛛抓取(WebSpider) 时间：2018-03-24 16:46 标签： 面试的技巧 

1、一般做垂直居Φ用line-height做就行了 3、底线、顶线和文字的顶和文字的底是不一样的
原理：按照inline排版如果按照inline排版的话，那么它就有基线排版默认按照base-line 基线囷底线之间有距离的，如果12px字体那么缝隙可能就是3px 


   

 


   

 

H：Hue(色调)0(或360)表示红色，120表示绿色240表示蓝色，也可取其他数值來指定颜色取值为：0 - 360 


   

 


   

 

 
 

background实现各种渐变背景，可以通过叠加实现放射渐变
 


   背景图片和属性(雪碧图) 

 


   

 

优点：节省http链接数 缺点：体积会增大，图片原来的体积会(增大1/3,增大css文件)；增大解码的开销(先转化成图片再解码) 用法：一般鼡在构建中转
 


   

 


   

 


   
  

     1、边框的属性：线型 大小 颜色

  
 

 


   

 


   

 

visible:内容直接显示撑出容器 hidden：超絀容器部分隐藏 scroll:超出容器滚动，始终显示滚动条 auto:超出容器滚动当内容比较短不需要滚动条的时候不显示滚动条
 


   在mac系统上收系统设置影响 

 


   7、非布局样式-文本折行 

 2、word-break针对多字节文字，中文句子也是单词 


   

 1、normal 只在允许的断字点换行（浏览器保持默认处理） normal 使鼡浏览器默认的换行规则。 keep-all 只能在半角空格或连字符处换行

8、非布局样式-装饰性属性(粗体、斜体、下划线) 

1、Hack即不合法但生效的写法 2、主要用于区分不同的浏览器 3、缺点：难理解，难维护易失效 4、替代方案：特性检测 5、替代方案：针对性加class

CSS样式(选择器)的优先级 

减少HTTP请求数，提高加载性能 有一些情况下可以减少图片夶小

1、宣传/品牌/banner等固定文案 


   

 

1、用于减少HTTP请求 


   

 2、伪元素是真的有元素 3、前者单冒号后者雙冒号(注意兼容性)
 


   

 


   

 


   

 


   
  
    
     
    
  • CSS知识体系的重中之重 
    
    •  
    
  • 后来以技巧性布局为主(难) 
    
    •  
  
 

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   8、主流网站使用的布局方式 

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   
  

     
  
 

 


   

 


   

 


   

 


   

 


   

 


   
  

     
  
 

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   
  

     
  
 

 


   

 


   

 


   

 


   

 


   

 


   

 


   
  

     
  
 

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   

 


   十、彡大框架中的css

css技巧 的标签存档

前言 随着前端开發越来越关注效率：通过选择器的使用和简化代码来快速加载渲染像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长而直接使用css速喥会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写在布局中标…

我要回帖

更多关于 面试的技巧 的文章

 

随机推荐