CSS中那些实用又小众的技术

最新推荐文章于 2024-09-02 20:34:02 发布

tl15658112801

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量309

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/tl15658112801/article/details/79483527

版权

0 篇文章 0 订阅

订阅专栏

 
 1.猫头鹰选择器 

 
 由来：通用选择器 * 和 相邻兄弟选择器 + 一起使用，像个猫头鹰一样 

  * + * { 

  margin-top: 5px; 

}

  li + li { 

  border-top: .5px solid gray; 

}

  应用：分页，列表，标签margin,padding,border(兼容IE8及以上) 

 
 2.区间选择器 || 前N个元素（后N个元素）选择器 

  前N个:nth-child(-n+3) 

  后N个:not(:nth-child(-n+3)) 

  中间N个:not(:nth-child(-n+3)):not(:nth-child(-n+3)) 

  应用：回帖里面的前两个热门回帖 

  兼容IE8及以上 

  坑：before和after和子元素选择器一起使用时必须按:nth-child(n):before的顺序写，否则不生效 

 
 3.background-image url设置备胎图片 

  background-iamge: url(...),url(默认图url); 

  应用：默认图 

 
 4.使用padding-bottom设置固定宽高比 

  需求过来的时候告诉你要做一个16:9或4:3的图片，你还去一个一个的计算宽高吗，用不着! 

  padding-bottom: 百分比 

  4:3 padding-bottom: 75%; 

  16:9 padding-bottom: 56.25%; 

  在less/sass/stylus里面直接使用分数表示 

  适用于IE9及以上 

 
 5.div垂直居中的各种奇淫技巧 

  背景图垂直居中 

  .bg { 

  background-image: url(...); 

  background-repeat: no-repeat; 

  background-size: cover; 

  background-position: center; 

}

  父元素设置display:table（不推荐） 

  负数margin 

 
 .element 
  {  
 position 
 : 
   
 relative 
 ;  
 top 
 : 
   
 50% 
 ; margin-top: -元素的高度; 

}

  利用动画效果，即使不知道子元素的高度也可以使用 

 
 .element 
  {  
 position 
 : 
   
 relative 
 ;  
 top 
 : 
   
 50% 
 ; transform 
 : 
  translateY( 
 -50% 
 );} 

 
 不适用于使用了transition属性的元素 

  flex布局 

 
 .father 
  { 

 
  display: flex; 

 
  align-items: center; 

}

关注