2020年3月15日
video标签加载视频有声音却黑屏
摘要： 问题 昨天用户上传了一个 "视频文件" ，然而发现虽然有声音但是黑屏。 解释 因为原视频的编码是用 mp4v 格式的，它需要专用的解码器。而 chrome 并不支持，所以无法播放。 然后如果用转码功能转成用 H.264 编码，就可以播放了。 上图的 AVC 实际上是 H.264 协议的别名。自从 H 阅读全文
posted @ 2020-03-15 11:24 Ever-Lose 阅读(2172) 评论(0) 推荐(0)
html5 中高级选择器 querySelector
摘要： 简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法，其中，querySe 阅读全文
posted @ 2020-03-15 10:39 Ever-Lose 阅读(686) 评论(0) 推荐(0)
2020年3月14日
css3 scale 缩放出现 1px 问题
摘要： 问题描述 先来一段html代码 此刻效果是正常的一倍效果 接着加入container缩放 则会出现极细致的一条白色边，原因大概就是.parent元素的border和.son的height经过缩放后不会是整数，两个数值的小数点被省去不渲染，导致两者叠加起来和真正要的效果差1px，而让.parent的背 阅读全文
posted @ 2020-03-14 18:56 Ever-Lose 阅读(1296) 评论(2) 推荐(0)
去除 inline-block 元素间距
摘要： 案例重现 布局时经常能发现inline元素和inline block元素水平呈现的元素间，会存在着一些意想不到的间距，举例： 由于换行和空格分割符的存在，行内元素间将被渲染为一个小间距了。 解决办法1 元素间移除空格和换行 这样看着仍旧不太舒服，尤其是项目里缩进层级深的时候 解决办法2 父元素设置 阅读全文
posted @ 2020-03-14 18:54 Ever-Lose 阅读(190) 评论(0) 推荐(0)
css 一行自适应等比例布局
摘要： 一、浮动布局+百分比 该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个JS来调整了。 二、行内元素（inline block）+百分比 三、display:table + display:table cell 我们知道表格可以根据内容进行划分，CSS也 阅读全文
posted @ 2020-03-14 18:42 Ever-Lose 阅读(1507) 评论(0) 推荐(0)
background-attachment 制造视差滚动效果案例
摘要： 简介 background attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个： scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background 阅读全文
posted @ 2020-03-14 18:39 Ever-Lose 阅读(448) 评论(0) 推荐(0)
等宽字体的妙用-loading 点点点动画
摘要： 原理 ch等宽字体 + text indent 动画负缩进 显示效果如 loading... 代码 阅读全文
posted @ 2020-03-14 18:33 Ever-Lose 阅读(179) 评论(0) 推荐(0)
BFC块级格式上下文介绍
摘要： 块级格式上下文（Block formatting context） 什么是BFC? 块格式化上下文（block formatting context） 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文 BFC是一个容器，在这个容器中的元素不 阅读全文
posted @ 2020-03-14 18:20 Ever-Lose 阅读(137) 评论(0) 推荐(0)
css3 HSLA 颜色制造半透明效果
摘要： 简介 HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础 阅读全文
posted @ 2020-03-14 18:00 Ever-Lose 阅读(424) 评论(0) 推荐(0)
css reset 代码
摘要： 直接抄 "postcss css reset" 代码吧。 pc mobile 阅读全文
posted @ 2020-03-14 17:40 Ever-Lose 阅读(367) 评论(0) 推荐(0)