css小技巧

时间  2019-11-16
标签 css 技巧 栏目 CSS 繁體版
原文   原文链接

前言

在开发项目书写css是必不可少的一部分，写好css可以有助于咱们写js逻辑。我遵循的原则是能用css解决的事情坚定不使用js。如今就把我在项目中的使用技巧分享给你们但愿可以相互学习共同进步。javascript

选择

在处理列表删除的时候，咱们须要选择某一项列表，这时候咱们的页面布局就大体以下css

<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属性例如html

li .active{
	 
    /**样式*/
    ........
}
复制代码

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

$(".checkbox").click(function(){
	$(".checkbox").removeClass("active");
	$(this).addClass("active");
});
复制代码

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

.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是这样的java

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

一句代码便可实现效果。web

伪类

在开发过程当中有时候咱们须要用到单位，好比金钱，温度，等。页面布局大体以下所示浏览器

<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标签内是否要包括“￥”符号呢？我是不会这样作的。我借助伪元素生成这种符号。如：bash

.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呢？

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程