雜七雜八小知識點 (1)

1、自適應正方形

使用padding-top/bottom的默認屬性：基於父元素的寬度

width: 40%;
padding-top: 40%;
border: 1px solid red;

效果如下：

使用vw、vh單位

相對於視口的寬度。視口被均分爲100單位的vw。
相對於視口的高度。視口被均分爲100單位的vh。

width : 40vw;
height : 40vw;
border: 1px solid blue;

效果如下：

2、去除系統默認appearance的樣式

-weblit-appearance: none常用語IOS下移除原生樣式。

使用padding-top/bottom的默認屬性：基於父元素的寬度

3、js 與 css 未加載成功也能訪問及跳轉

使用text-indent，wihte-space，overflow屬性

代碼如下：

css:
a {
	display: inline-block;
	text-decoration: none;
	color: #424242;
	width: 190px;
	height: 90px;
	background-img: url(...);
	background-size: 190px 90px;
	text-indent: 200px;
	wihte-space: nowarp;
	overflow: hidden;
}

html:
<a href="http://www.taobao.com" target="_blank">淘寶網</a>

使用height，padding，overflow屬性

代碼如下：

css:
a {
	display: inline-block;
	text-decoration: none;
	color: #424242;
	width: 190px;
	height: 0px;
	padding-top: 90px;
	overflow: hidden;
	background-img: url(...);
	background-size: 190px 90px;
}

html:
	<a href="http://www.taobao.com" target="_blank">淘寶網</a>

4、顏色取值單位

rgb()

rgba()

十六進制：#000000

hsl()

hsla()

h : Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值爲：0 - 360
s : Saturation(飽和度)。取值爲：0.0% - 100.0%
l : Lightness(亮度)。取值爲：0.0% - 100.0%
a : Alpha透明度。取值0~1之間