CSS小计

1：设置图片随窗缩放

使用百分比

width: 100%;

height: 100%;

使用vmin: 将可视区域分为100vmin

width: 100vmin;

height: 100vmin;

2:设置字体颜色与背景色融合

mix-blend-mode: difference 

3: 设置宽度自适应

width:fit-content

4:外边距合并

当两个相领的两个容器都设置了边距时，会合并并取最大一个边距

例如：父div设置margin-top: 20px，内部子div设置margin-top: 10px，这时页面表现margin-top:只有20px

解决：避免相邻，

（1）为父元素定义1像素的上边框或上内边距；

（2）为父元素添加overflow:hidden。

5：元素背面：其实页面元素都是3D，也存在背面的，旋转时候可以设置背面不可见

backface-visibility: hidden 

6：不一样的阴影：图片、或者多个元素合并阴影使用filter: drop-shadow(）

  filter: drop-shadow(2px 2px 20px #b1aeae);

 使用box-shadow的效果如下

使用filter后的效果如下

7：CSS实现瀑布流

TIP：兼容性比较差，目前只有火狐浏览器支持

<style>
	.container{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 10px;
		grid-template-rows: masonry;
	}
	img{
		width: 100%;
		display: block;
	}
</style>
<div class="container">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 100px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 200px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 110px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 120px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 130px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 140px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 150px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 120px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 160px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 190px;" alt="">
</div>

8：使用box-shadow画图（覆合属性）

.item {
  width: 50px;
  height: 50px;
  box-shadow: 50px 0 red, 100px 0 green, 150px 0 blue, 200px 0 rgb(167, 196, 8);
}

 

9: 文字描边text-stroke、text-shadow

text-stroke:描边范围为中间，字体看起来细，看起来也平滑

-webkit-text-stroke: 1px red;

 text-shadow：描边范围为margin，字体看起来比较粗，但是兼容性更好

  text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

10: box-size属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

场景：比如一个div高度100%，并且设置了padding，如果不想出现滚动条，可设置为box-sizing:border-box

标准盒模型
box-sizing: content-box;

标准盒模型的width组成：content（不包含 padding 和 border）

比如：你给一个div的宽度设为200px，那这个div实际的宽度其实是200px再加上padding和border的值（和是大于等于200px的）。

IE盒模型
box-sizing: border-box;

IE盒模型的width组成：content + 2 * padding + 2 * border

比如：你给一个div的宽度设为200px，那这个div内容的宽度其实只有200px减去 padding 和 border 的值。它实际宽度是小于或等于200px的。

对比总结
box-sizing: content-box | border-box | inherit
他们的主要区别其实就是 width、height 包不包含 border 和 padding
box-sizing 默认值是 content-box，即默认是标准盒子模型

11: css黏性定位sticky

类似于通讯录一样，吸附在顶部 （相对父元素）

position: sticky;
top: 0;