CSS
1、页面平滑滚动
问题：
需要在滚动到顶部的时候有缓慢滚动的动画效果
方案：
scroll-behavior: 规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转
凡是需要滚动的地方都加一句scroll-behavior:smooth 来提升滚动体验！
html, body { scroll-behavior:smooth; }
引申知识点：
scroll-behavior属性值
| 属性 | |
|---|---|
| auto | 默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。 |
| smooth | 允许在滚动框内的元素间平滑的“滚动效果” |
| initial | 将此属性设置为其默认值。参阅 initial |
| inherit | 从其父元素继承此属性。参阅 inherit |
2、绘制三角形
问题：
如何用css写出一个三角形
方案1：
利用边的宽度和transparent透明形成三角形，不需要宽高。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform: rotate(90deg); // 旋转角度，顺时针
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
结果：
image.png
image.png
方案2：
利用clip-path进行裁剪。可以做到边框颜色和背景颜色不一致的三角形
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形</title>
<style>
.triangle {
height: 50px;
width: 50px;
background-color: red;
border: 2px solid black;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="triangle""></div>
</body>
</html>
结果：
image.png
image.png
引申知识点：
clip-path 属性使用裁剪方式创建元素的可显示区域。（IE是完全不支持，尽量使用webkit内核）
区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
.clip-me {
clip-path: inset(); // 定义一个 inset 矩形。
clip-path: circle(); // 定义一个圆形（使用一个半径和一个圆心位置）。
clip-path: ellipse(); // 定义一个椭圆（使用两个半径和一个圆心位置）。
clip-path: polygon(); // 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
}
-
inset是矩形的剪切
-
circle是圆形的剪切
-
ellipse是椭圆的剪切
-
polygon是多边形的剪切。
-
在polygon的（）里是我们在平面中定位的点，系统会自动地把这几个点按照顺序连接起来，并剪切。
image.png
3、对话气泡框
问题：
如何写出一个背景色和边框色不一致的对话气泡框
方案：
利用上述绘制三角形的方案2完成，inherit就是可以保证和父元素一致
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形</title>
<style>
.box {
position: relative;
background: #fff;
border: 2px solid black;
height: 200px;
width: 400px
}
.triangle {
position: absolute;
top: calc(50% - 25px);
left: -26px;
height: 50px;
width: 50px;
background-color: inherit; /* 继承父元素 */
border: inherit; /* 继承父元素 */
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(45deg);
}
</style>
</head>
<body style="padding: 100px"">
<div class="box">
<div class="triangle""></div>
</div>
</body>
</html>
结果：
image.png
HTML
1、视频首图设置
问题：
一个视频未播放时展示的是空白，希望可以展示出第几分钟的画面
方案1：
利用video的poster属性，设置第几分钟画面的图片为视频首图
<video
class="video"
controls
:autoplay="false"
poster="../assets/images/landingPage/video_image.png">
<source src="../assets/images/landingPage/landing_page_video.mp4" type="video/mp4">
</video>
方案2：
利用video的poster属性，使用OSS视频截帧功能（计费）
<video
class="video"
controls
:autoplay="false"
poster="http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_10000,m_fast">
<source src="http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4" type="video/mp4">
</video>
引申知识点：
-
OSS内置提供了视频截帧功能，视频需要在oss存储中
-
调用方式：
-
通过传入x-oss-process参数的方式来实现
-
url?x-oss-process=video/snapshot,t_10000,m_fast
-
最简单的使用方式：直接在public的object(公共的不加密的)的url后面拼接处理字符串
-
如果对private的object(本地或加密的)调用视频截图，需要使用SDK进行鉴权，接口和OSS图片服务的调用接口一致。
-
目前OSS只支持视频编码为h264的视频文件的处理，视频格式本身没有限制。
-
调用参数
-
使用视频截帧时，按视频截帧截取的图片数量计费。有关计费详情的更多信息，请参见数据处理费用。
-
仅支持对视频编码格式为H264和H265的视频文件进行视频截帧。
-
OSS默认不保存视频截帧的图片，视频截帧的图片需手动下载并保存至本地。
-
参数说明
-
操作分类：video
-
操作名称：snapshot
| 参数 | 描述 | 取值范围 |
|---|---|---|
| t | 指定截图时间。 | [0,视频时长]单位：ms |
| w | 指定截图宽度，如果指定为0，则自动计算。 | [0,视频宽度]单位：像素（px） |
| h | 指定截图高度，如果指定为0，则自动计算；如果w和h都为0，则输出为原视频宽高。 | [0,视频高度]单位：像素（px） |
| m | 指定截图模式，不指定则为默认模式，根据时间精确截图。如果指定为fast，则截取该时间点之前的最近的一个关键帧。 | 枚举值：fast |
| f | 指定输出图片的格式。 | 枚举值：jpg和png |
| ar | 指定是否根据视频信息自动旋转图片。 | 枚举值：auto、h和w各枚举值说明如下：* auto：指定在截图生成之后根据视频信息进行自动旋转。* h：指定在截图生成之后根据视频信息强制按高大于宽的模式旋转。* w：指定在截图生成之后根据视频信息强制按宽大于高的模式旋转。 |
移动端
elementUI
el-select
1. 在ios移动端需要点击两次才能选中
问题：
在移动端用了elementUI的el-select的组件，苹果手机下拉框选项需要点击两次才能选中切换。
方案：
在app.vue里面，（注意是在app.vue里，不是在页面或者组件里！！），加上一段css代码。
.el-scrollbar {
> .el-scrollbar__bar {
opacity: 1 !important;
}
}
html
1、移动端输入框输入放大
问题：
input输入框在移动端输入唤起键盘的时候，页面整体放大
方案：
在meta中加入maximum-scale=1.0，表示屏幕最大可以到1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
引申知识点：
meta标签 的viewport申明
| width | 网页的布局layout宽度，控制 viewport 的大小，可以指定的一个值(默认单位px)或者特殊的值：width=960, initial-scale=0.33（960是页面layout的宽度,这里设width意思是将其它缩小到大约1/3，这样正好可以在320像素的手机设备上看到整个网页）width=device-width (设备的宽度,通用写法) |
| height | 和width用法相同，指定高度 |
| target-densitydpi | 一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。属性取值范围：device-dpi: 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi: 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi: 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density. low-dpi: 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。 |
| initial-scale | 初始缩放。即页面打开时默认的初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 |
| maximum-scale | 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。 |
| minimum-scale | 最小缩放，用法同maximum-scale相同 |
| user-scalable | 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。 |
注意：所有的缩放值都必须在0.01–10的范围之内。
网友评论