杂七杂八小知识点 (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之间