一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
本文将介绍几种超好用的CSS技巧，掌握它会让你事半功倍！！继续看下来吧！
会不定时更新哦，大家可以收藏，日后来看~
一、 图片长宽不确定，在DIV中不裁剪，不拉伸，长边始终撑满DIV并且居中
效果图：
办法：
有的小伙伴们可能会想到用元素居中（flex等），但是图片的长宽不确定，DIV长宽固定大小，中间的图片可能长 > 宽，可能宽 > 长，想要他撑满div且居中显示，我们是要设置他的width还是height为100%呢？下面我将介绍两个办法：
1. 初级办法：给div设置背景图
div {
background-image: url(https://testImg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
2. 高级办法：给图片设置object-fit属性，DIV中加img标签，该属性加给img标签
img {
width: 100%;
height: 100%;
object-fit: contain;
}
二、 用CSS实现字母大小写切换
效果图：
（图1）
（图2）
（图3）
办法:
- 使用text-transform属性
span {
text-transform: uppercase; //字母全部大写，如图1
text-transform: capitalize; //首字母大写，如图2
text-transform: lowercase; //字母全部小写，如图3
}
三、 正方形div根据页面大小按比例缩放
效果图：
办法：只要三个css属性即可！！
div {
width: calc(25% - 15px);
height: auto;
aspect-ratio: 1/1;
}
- 宽度根据需求自定义，高度需要设置为auto，最重要的是aspect-ratio，然后就可以实现啦~
四、 div不使用浮动，但是始终在最右边或者最左边
效果图：
方法：
- 当然使用浮动，或者position也可以实现，但是似乎有些大材小用了，只要把当前div设置
width，并且加上：margin-left：auto即可实现div始终在最右边，同理想要他在最左边使用：margin-right：auto即可! - 这么一看是不是很熟悉，
margin: auto就是div居中，哈哈
div {
width: 100px;
margin-left: auto;
}
四、 display:inline-block时缝隙处理办法
效果图：
（图1）
（图2）
大家可以看到图1中，两个div我设置的样式都是一样的，但是发现中间有一个缝隙
有没有遇到相同问题的小伙？快来看看如何解决吧
方法：
father-div {
font-size: 0px;
}
只需要给这两个div的父级div设置font-size: 0px;即可。
五、如何让点击事件透过某个DIV去触发
效果图：
大家可以看到图中效果，第一个div我设置了一个透明色，并且图层在click这个div的上一层，导致click的链接始终点击不了，这要怎么办呢？
方法：
div {
pointer-events: none;
}
这时pointer-events就登场了，只需要在上一层，不需要获取到点击事件的div上加上这个属性即可，可以让点击事件穿透这个元素。
这次的分享就到这里结束啦，日后还会不定时更新哦，大家可以收藏，日后来看~
