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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值