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>
複製代碼