能使用CSS3取代JS的一些小技巧

最新推荐文章于 2022-06-07 14:22:58 发布

置顶 qq236710052

最新推荐文章于 2022-06-07 14:22:58 发布

阅读量459

点赞数 1

分类专栏：前端 CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq236710052/article/details/106651756

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

1、vw和vh（1vw等于视口宽度的1%，1vh等于视口高度的1%，以此类推）
过去我们要将某个元素满屏或者按一定的比例展示，可以将宽度设为100%，但高度100%是不行的，需要借助JS来获取window的高度赋值给它，有了vh就方便很多了，如做遮罩层就可以：

<div class="mask"></div>
<style>
.mask{width:100vw;height:100vh;position:fixed;background:rgba(0,0,0,0.5);}
</style>

2、flex-grow，子集设为flex-grow: 1;表示宽度平分，如果某个设为flex-grow: 0-N;则为其他的倍数。

<div class="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
<style>
.main {width: 350px;height: 100px;border: 1px solid #c3c3c3;display: flex;}
.main div:nth-of-type(1) {flex-grow: 1;}
.main div:nth-of-type(2) {flex-grow: 3;}
.main div:nth-of-type(3) {flex-grow: 1;}
.main div:nth-of-type(4) {flex-grow: 1;}
.main div:nth-of-type(5) {flex-grow: 0.5;}
</style>

3、弹性盒子Flex布局，display:flex;可以让子节点继承父节点的高度，也可以做垂直居中等多种对齐方式，还可以改变方向等等。

<div class="father">
	<div class="child">我是子节点</div>
</div>
<style>
.father{width:200px;height:200px;background:#09F;box-sizing:border-box;padding:20px;display:flex;align-items:center; justify-content:center;}
.child{width:100px;height:100px;background:#0F3;display:flex;align-items:center; justify-content:center;}
</style>

4、calc() 函数，用于动态计算长度值，支持 “+”, “-”, “*”, “/” 运算。

<div class="box"></div>
<style>
.box1{width:calc(100px - 50px);height:calc(200px - 50px);}
</style>

5、transition 过渡效果，JS写动画可能因阻塞导致闪烁或JS太多影响上下文执行，不妨试试它！

<div class="box"></div>
<style> 
.box{width:100px;height:100px;background:yellow;transition:height 2s;}
.box:hover{height:0px;}
</style>

6、var() 函数，用于插入自定义的属性值，如果一个属性值在多处被使用那就可以用这个方法。

<div class="box">CSS3的var()函数</div>
<style>
body{--black:#000000;--white:#ffffff;}
.box{background:var(--black);color:var(--white);}
</style>

7、column分栏布局，可做瀑布流，但是缺陷是按垂直方向排序。

<div class="box">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>
</div>

<style>
.box{ column-count:4;column-gap:10px;column-rule:1px solid #000;}
.item{ width: 100%; height: 400px;  text-align: center; margin-bottom: 10px;}
.item:nth-child(1){ background: #ff0000;}
.item:nth-child(2){ background: #f600ff;height: 60px; line-height: 50px;}
.item:nth-child(3){ background: #00e4ff;}
.item:nth-child(4){ background: #24ff00;height: 150px;}
.item:nth-child(5){ background: #ff0000;}
.item:nth-child(6){ background: #f600ff;height: 80px;}
.item:nth-child(7){ background: #00e4ff;}
.item:nth-child(8){ background: #24ff00;height: 100px;}
.item:nth-child(9){ background: #ff0000;}
.item:nth-child(10){ background: #f600ff;}
.item:nth-child(11){ background: #00e4ff;height: 250px;}
.item:nth-child(12){ background: #24ff00;}
</style>

8、@media 媒体查询，可以做响应式网站。

<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<div class="container"></div>
<style>
	//默认尺寸
	.container{width:1200px;height:500px;margin:0 auto;background: #24ff00;}

	/*大于1024px，注意：默认从最大开始写，没特殊用途不需这段*/
	@media screen and (min-width:1024px){
		
	}
	
	/*320px-768px*/
	@media screen and (min-width:340px) and (max-width:768px) {
		.container{width:96%;}
	}
	
	/*小于320px*/
	@media screen and (max-width:340px) {	
		.container{width:98%;}
	}
</style>