css小技巧

小小坤
1,803 阅读5分钟

前言

在开发项目书写css是必不可少的一部分，写好css能够有助于我们写js逻辑。我遵循的原则是能用css解决的事情坚决不使用js。现在就把我在项目中的使用技巧分享给大家希望能够相互学习共同进步。

选择

在处理列表删除的时候，我们需要选择某一项列表，这时候我们的页面布局就大致如下

<ul class="ul">
	<li class="list"><span class="checkbox"></span>数据1 金额：<span class="money">100</span></li>
	<li class="list"><span class="checkbox"></span>数据2 金额：<span class="money">200</span></li>
	<li class="list"><span class="checkbox"></span>数据3 金额：<span class="money">300</span></li>
	<li class="list"><span class="checkbox"></span>数据4 金额：<span class="money">400</span></li>
</ul>

span checkbox 代表多选按钮，一般人书写css肯定会是这样。给span 书写active css属性例如

li .active{
	 
    /**样式*/
    ........
}

最后是通过js获取checkbox，给它添加删除active。目前为止，我们书写js大致是这样的。

$(".checkbox").click(function(){
	$(".checkbox").removeClass("active");
	$(this).addClass("active");
});

如果上述，每次jQuery都有获取checkbox去逐个移除active，然后在添加到当前checkbox上面。假设已经选中，依旧会执行此操作。可见这样的操作是多余的。 我会这样写css

.ul{
 	background-color: #F2F2F2;
}
.ul li{
	border: 1px solid #00CC99;
	line-height: 35px;
	list-style: none;
	margin: 10px 0;
	padding-left: 10px;
}
.checkbox{
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50px;
	background-color: #666666;
	vertical-align: -3px;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
}
.ul .active .checkbox:before{
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	left: 5px;
	top: 5px;
	border-radius: 50px;
	background-color: #F50909;
}

通过css控制li的active来控制checkbox的选择。至于不了解css优先级的同学请自行学习。 然后的书写的js是这样的

$(".list").click(function(){
	$(this).addClass("active").siblings("").removeClass("active");
});

一句代码即可实现效果。

伪类

在开发过程中有时候我们需要用到单位，比如金钱，温度，等。页面布局大致如下所示

<ul class="ul">
	<li class="list"><span class="checkbox"></span>数据1 金额：<span class="money">100</span></li>
	<li class="list"><span class="checkbox"></span>数据2 金额：<span class="money">200</span></li>
	<li class="list"><span class="checkbox"></span>数据3 金额：<span class="money">300</span></li>
	<li class="list"><span class="checkbox"></span>数据4 金额：<span class="money">400</span></li>
</ul>

很简单，明了。金额单独用span包裹。如果我们每次渲染时候拼接dom或者直接用vue v-for 或者其他框架渲染时，span标签内是否要包括“￥”符号呢？我是不会这样做的。我借助伪元素生成这种符号。如：

.list .money{
	color: #D40000;
}
.list .money:before{
	content: "￥";
}

这样做的原因是，假设某一天你要获取span内的金额时，你获取的肯定是数值，不包含“￥”符号。

三角形tips

三角形的实现网上教程很多，实现的效果也就几种。设置div宽度高度为0px，设置border为solid设置boder-width:为固定数值，最后设置border颜色。

.triangle{
	width: 40px;
	height: 40px;
	border: 20px solid;
	border-color: red blue orange yellow;
}
.triangle1{
	width: 0;
	height: 0;
	border: 20px solid;
	border-color: red transparent transparent transparent;
}

参考demo http://sandbox.runjs.cn/show/fdtnihiu

div不定宽垂直居中

兼容性很好。IE7以上浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>不定宽高-水平居中</title>
		<style type="text/css">
            html,body{
            	text-align: center;
            	height: 100%;
            	margin: 0;
            }
            .layers-box{
            	height: 100%;
            }
            .layers{
            	padding: 15px;
            	display: inline-block;
            	max-width: 60%;/**可以设置可以不设置--兼容性【IE7+】--**/
            	vertical-align: middle;
            	background-color: #717FA5;
            	color: #E4E8F1;
            }
            .layers-i{
            	display: inline-block;
            	height: 100%;
            	vertical-align: middle;
            }
            #btn{
            	position: absolute;
            	right: 5px;
            	top: 5px;
            }
		</style>
	</head>
	<body>
		<button id="btn">更改文字</button>
		<!--
        	作者：java-script@qq.com
        	时间：2017-12-06
        	描述：不定宽高水平居中--盒子--star
        -->
		<div class="layers-box">
			<!--
	        	作者：java-script@qq.com
	        	时间：2017-12-06
	        	描述：不定宽高水平居中--要居中的元素--star
	        -->
			<span class="layers" id="layers">
			 测试文字
		    </span>
		    <!--
	        	作者：java-script@qq.com
	        	时间：2017-12-06
	        	描述：不定宽高水平居中--要居中的元素--end
	        -->
	        
	        
		    <!--
	        	作者：java-script@qq.com
	        	时间：2017-12-06
	        	描述：不定宽高水平居中--辅助元素--star
	        -->
		    <i class="layers-i"></i>
		    <!--
	        	作者：java-script@qq.com
	        	时间：2017-12-06
	        	描述：不定宽高水平居中--辅助元素--end
	        -->
		</div>
		<!--
        	作者：java-script@qq.com
        	时间：2017-12-06
        	描述：不定宽高水平居中--盒子--end
        -->
        
        
        
        <!--
        	作者：java-script@qq.com
        	时间：2017-12-06
        	描述：我创建了一个web前端技术群
        	          想入群的童鞋可以添加。
        	          群号码：   198303871  
        -->
		<script type="text/javascript">
			var i=0;
			btn.onclick=function(){
				if(!i){
					document.getElementById("layers").innerText="好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！好多测试文字！";
				    i=1;
				}else{
					document.getElementById("layers").innerText="很少的测试文字!";
					i=0;
				}
				
			}
		</script>
	</body>
</html>

参考链接：sandbox.runjs.cn/show/w4djxr…

奇怪的间隙

平时在开发的时候我们使用display：inline-block; 例如：

/*--css代码--*/
.ul{
	margin-left: 60px;
}
.ul-li{
	display: inline-block;
	width: 20px;
	background-color: #fff;
	color: #4B546C;
	text-align: center;
}
<!--html代码-->
<ul class="ul">
	<li class="ul-li">a</li>
	<li class="ul-li">b</li>
	<li class="ul-li">c</li>
	<li class="ul-li">d</li>
	<li class="ul-li">e</li>
	<li class="ul-li">f</li>
</ul>

渲染效果

有空白间隙。这些空白间隙就是虚拟空白节点。想要解决这个问题最简单的方式是：

<!--html代码-->
<ul class="ul">
   <li class="ul-li">a</li><!--
 --><li class="ul-li">b</li><!--
 --><li class="ul-li">c</li><!--
 --><li class="ul-li">d</li><!--
 --><li class="ul-li">e</li><!--
 --><li class="ul-li">f</li>
</ul>

总结

在书写css时，我们应该考虑我们对接数据时书写js，这样有目的是书写css会在你对接数据的时候书写js事半功倍。依旧是那就话能用css处理的何必动用js呢？

avatar
文章
阅读
粉丝