不按期更新的CSS奇淫技巧（一）

時間 2019-11-05

標籤按期更新 css 技巧欄目 CSS 简体版

原文原文鏈接

1、CSS寫自適應大小的正方形

代碼：

<style type="text/css">
以圖片爲例
background 寫法
	.img{
		width: 100%;
		height: 0;
		padding-bottom: 100%;		//關鍵所在
		overflow: hidden;
		background:url(../res/images/haha.png) center/100% 100% no-repeat;
	}
	.img img{
		width: 100%;
	}
img 寫法
	.img{
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%;		//關鍵所在
		overflow: hidden;
	}
	.img img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>
<div class="img"></div>
複製代碼

效果圖：

原理：

元素的padding的百分比值四個值均根據當前元素的寬度來計算的css

padding只能取top或者bottom，自適應正方形其值要和寬一致，固然其餘不一樣比例的矩形能夠經過設置不一樣比例的padding就能獲得html

2、多列等高

代碼：

<style type="text/css">
	.web_width{
		width: 100%;
		overflow: hidden;			//關鍵所在
	}
	.left{
		float: left;
		width: 20%;
		min-height: 10em;
		background: #66afe9;
		padding-bottom: 2000px;		//關鍵所在
		margin-bottom: -2000px;		//關鍵所在
	}
	.right{
		float: right;
		width: 80%;
		height: 20em;
		background: #f00;
	}
</style>
複製代碼

效果圖：

原理：

padding補償法css3

在高度小的元素上加一個數值爲正padding-bottom和一個數值爲負margin-bottom，再在父級加上overflow: hidden隱藏子元素超出的padding-bottomweb

注：

padding-bottom、margin-bottom之和要等於0（建議值不要太大，夠用就行）
代碼中子元素單位用em是爲了作gif效果更明顯

（在個人筆記裏面翻出來了，用這個解決了不少佈局問題）bash

3、繪製三角形

代碼

<style type="text/css">
.demo {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid red;
}
</style>
複製代碼

效果圖：

原理：

利用盒模型中的border屬性app

注：

當盒模型的width/height爲 0 時，border 邊的形狀是一個三角形，經過只設置三條邊的 border ，並將所繪製的三角形相鄰兩邊的 border 的顏色設置爲 transparent, 最後經過調整border-width的比例繪製本身所須要的三角形

繪製三角形詳解地址wordpress

4、隱藏滾動條（這個算比較無聊的，主要當時有個需求非要隱藏）

代碼

<style type="text/css">
	* {
		margin: 0;
		padding: 0
	}
	
	section {
		width: 300px;
		height: 500px;
		margin: 20px auto;
		overflow: hidden;
	}
	
	div {
		width: calc(100% + 20px);
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	p {
		width: 100%;
		height: 200px;
		background: #999;
		overflow: hidden
	}
	p:nth-child(2n){
		background: #f60;
	}
</style>
<section>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
	</div>
</section>
複製代碼

效果圖：

原理：

父元素超出部分隱藏，將滾動元素的width超出父元素的width，從而達到隱藏滾動條佈局

5、邊框字體同色（2018.06.06）

代碼

<style>
	#app {
		width: 200px;
		height: 200px;
		color: #000;
		font-size: 30px;
		
		/*方案一*/
		border: 50px solid currentColor;
		
		/*方案二*/
		border: 50px solid;
			/*或*/
		border-width: 50px;
		border-style: solid;
	}
</style>
複製代碼

效果圖：

原理：

方案一：CSS3 currentColor 表示當前的文字顏色
方案二：border 的默認值 (initial) 就是 currentColor, 能夠直接寫成 border: 50px solid; 省掉 color 的值

currentColor-CSS3超高校級好用CSS變量字體

6、顯示節點的層次結構（2018.06.11）

這個能夠說是真奇淫技巧了，話很少說，上菜ui

代碼：

/*手動添加*/
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

/*JS添加 在控制檯運行*/
const m_style = document.createElement('style');
const m_style_text = '*{background-color:rgba(255,0,0,.2)}* *{background-color:rgba(0,255,0,.2)}* * *{background-color:rgba(0,0,255,.2)}* * * *{background-color:rgba(255,0,255,.2)}* * * * *{background-color:rgba(0,255,255,.2)}* * * * * *{background-color:rgba(255,255,0,.2)}';
m_style.appendChild(document.createTextNode(m_style_text));
document.getElementsByTagName('head')[0].appendChild(m_style)
複製代碼