杂七杂八小知识点 (1)

最新推荐文章于 2022-06-29 15:40:38 发布

ping_biubiubiu

最新推荐文章于 2022-06-29 15:40:38 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/weixin_42915204/article/details/85317693

版权

web前端的小知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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之间