16个常用css技巧收集整理(三)

2019-03-30173次阅读css3css

能用css解决的就不要用JavaScript。16个常用css技巧收集整理(一)中收集了animation-fill-mode、calc()计算值、box-sizing、currentColor,16个常用css技巧收集整理(二)中收集了caret-color、scroll-behavior、::selection、-webkit-overflow-scrolling: touch,本文继续其它收集的css技巧。

object-fit

object-fit只针对替换元素有作用,指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-fit属性由下列的值中选择一个关键字来指定。

  • fill:被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。也就是说不保证保持原有的比例,也是object-fit的默认值。
  • contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象可能会在容器内留下空白。
  • cover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应即部分区域不可见。
  • none:被替换的内容尺寸不会被改变。
  • scale-down:内容的尺寸就像是指定了none或contain,最终呈现的是尺寸比较小的那个。

例如下方这张图片原尺寸为212*148,当通过css设置img元素宽和高就是其框的宽高为200*200时
浏览器兼容性:

关于object-fit使用场景实例移步到这里

@supports

此CSS规则使您能够在使用之前检查浏览器是否支持某些属性(或属性/值组合)。

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

您可以使用以下多个属性:

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

该var()属性是使用CSS自定义属性的一部分。

CSS变量由作者定义,表示可在文档中多次使用的特定值。该var()函数可以用作任何属性的值,但不能用作属性或选择器。函数的第一个值是自定义属性的名称; 第二个是可选的回退值,如果第一个参数无效,则使用该值。

我们来看看语法:

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color);
}

具有后备值:

body {
  color: var(--primary-color, #cccccc);
}

遗憾的是,IE11,Edge 14和Opera mini 不支持自定义属性。Edge 15将获得部分支持。

position: sticky

在浏览网站时,通常会看到HTML元素(如横幅和导航)滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟,因此事先在HTML结构上,不要忘了给这个元素添加一个父元素写上高度占位,不然滚动到一定位置时就会出现页面抖动。

MDN很好地解释了position:sticky:

粘性定位是相对和固定定位的混合体。该元素被视为相对定位,直到它超过指定的阈值,此时它被视为固定位置。

注意:混合体,混合体,混合体哟,我还是担心抖动的问题,自己试一把吧

<div style="background:#f60;height:80px"></div>
<div style="height:60px;background-color:#666;position:sticky;top:-1px;">position: sticky标题</div>
<div style="background-color:#000;height:1000px;color:#fff">检查文字是否像position:fixed一样有抖动</div>


漂亮,确实是相对和固定定位的混合体。

浏览兼容性

关于position:sticky使用场景实例移步到这里

上一篇: 16个常用css技巧收集整理(二)  下一篇: 16个常用css技巧收集整理(四)  

16个常用css技巧收集整理(三)相关文章