css小技巧

小小坤發表於2017-10-25
CSS

前言

在開發專案書寫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;
}
複製程式碼

css小技巧
參考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>
複製程式碼

渲染效果

css小技巧
有空白間隙。這些空白間隙就是虛擬空白節點。想要解決這個問題最簡單的方式是：

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

相關文章