随笔分类 - HTML+CSS
摘要：实现思路 原生的audio标签，controls属性用于控制是否显示一个默认的播放器，这个播放器的样式是浏览器决定的，如果使用默认播放器，在不同的浏览器中呈现的样式会不一样。要实现自定义播放器样式，就不要去设置control（因为controls默认值为false）。 通过监听原生audio标签的事
阅读全文
摘要：fastclick简介 fastclick是一款为了解决移动端300ms点击延迟而诞生的插件。 在移动端，如果对页面没有做任何处理，点击一个元素，触发的事件流程可简单理解为：touch -> 经过300ms延迟 -> click。 fastclick的原理大致如下： 监听touchend事件，在to
阅读全文
摘要：实现思路 渐变效果采用linear-gradient实现，但是它只能设在background-image属性上 background-clip的含义是背景图片切割，当值设为text时，背景图片将根据文字轮廓进行切割 切割完成后，切割好的新背景图片被挡在文字下方，将文字的颜色设为透明即可让根据文字轮廓
阅读全文
摘要：预期效果 最近我在朋友圈看到一篇文章，关于疫情结束，点亮一张张图片的过程，图片由黑白逐渐变得色彩缤纷，看起来效果非常不错。 实现方式 实现方式非常简单，不难推断出用filter和transition可以完成这一效果，filter 用于控制颜色和明亮度，而 transition 则控制这一变化的过渡效
阅读全文
摘要：主角是谁 在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。 痛点在哪里 在之
阅读全文
摘要：用CSS的border可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px solid orange; }
阅读全文
摘要：flex布局绝对是我们平常在布局中用的最多的一个属性，我们来看看它在can i use中的浏览器支持度：（截止到2019/11/16） 挖藕，凹森！支持度居然这么好，好到连ie也能支持大部分的flex布局的属性，那接下来我们就看看它的三大招式吧。 基本概念 任何一个元素，无论块级元素还是行内元素，都
阅读全文
摘要：Object-fit 我们有时候浏览一些网站的时候，偶尔会遇到这种情况： 明显它喵的形变了，尤其是这种这么业余的失误，还是出现在一个专门做图片的网站上。 产生这种现象的原因是：图片写了固定的宽高，这个宽高形成了一个固定的比例，然而图片本身不可能总是按照你规定的比例上传上来，只要比例有一点不对，就会产
阅读全文
摘要：1，margin/padding。 （演示仅为margin，padding同理，需注意的是padding没有auto） 2.background。 background: [background-color] [background-image] [background-repeat] [backg
阅读全文
摘要：以前我在面试中遇到过这个问题，当时没答上来，现在回答一下： 1.设置三个属性： overflow:hidden （超出部分隐藏） white-space:nowrap （强制不换行） text-overflow:ellipsis （文本超出用三个省略号代替） 2.代码部分截图： 3.最终效果：
阅读全文
摘要：响应式布局能通吃pc端和移动端？ 不能。从排版上来说：pc端和移动端一般布局和显示方式差异十分巨大。 （同一个页面在pc端和移动端的呈现方式和风格迥异） 另外从事件响应上来说：pc端主要是mouse事件，而移动端则是touch、tap、swipe等事件。两者的事件响应机制完全不同。单单是这两点，就足
阅读全文
摘要：为什么用rem不用px? 主流：各大网站的移动版绝大多数都是用的rem。 移动端屏幕分辨率差别太大：最低适配的iPhone6，分辨率仅为750*1334。而现在市面上大多数手机，都达到了1080*1920或1080*2340（全面屏）。 所有元素都要用rem吗？ 大部分时候都是如此，但也有一些例外，
阅读全文
摘要：效果图： 思路: 内容容器需要一个before伪类，负责引用跟背景容器相同的背景图，还需要一个after伪类，用来加上半透明的白色背景。这两个伪类的层级需都为-1，而内容容器本身的层级为1，这样做可以使内容在毛玻璃上层。而之所以不把背景图和背景颜色都写在一个伪类中是因为我们只需要对图片做模糊处理，而
阅读全文
摘要：1.伪元素 常用的伪元素：before（在元素之前添加内容），after（在元素之后添加内容）； 不常用的伪元素：first-letter（向文本的第一个字母添加特殊样式），first-line（向文本的首行添加特殊样式）； 使用场景：活动类名的附加效果。这个活动类名可能是伪类带来的，也可能是js动
阅读全文
摘要：语义 命名 容器 wrapper/container 页头 head/header 页脚 foot/footer 页面主体 main 侧栏 sidebar 首页 homepage 菜单 menu 二级菜单 submenu 导航 nav 二级导航 subnav 选项卡 tab 列表 list 信息介绍
阅读全文
摘要：1.线性渐变（linear-gradient） 基础用法：background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释下这几个参数： angle是渐变角度，不写则默认从上到下，也就是to bottom,当然其他类似的直
阅读全文
摘要：1.模糊（blur）。 用法：给相应元素设置高斯模糊，传入的px数值越大越模糊。 2.亮度（brightness）。 用法：给元素设置亮度，0%为全黑，100%为元素原始亮度，>100%表示会比元素原始亮度更亮。 3.饱和度（saturate） 用法：设置元素的颜色饱和度,0%为无色，100%为原始
阅读全文
摘要：结论： 1，X,Y的都是属于点击位置的，width、height、left、top都是属于DOM的。 2，涉及的所有位置只与document或DOM内部有关，与DOM如何定位，周围有没有其他占位HTML元素，DOM有没有父级元素等统统无关。 说明：每次点击都是点击绿色方块的中心点，绿色方块的CSS代
阅读全文
摘要：有一次我们说到掷骰子那个游戏，当时是用了一个steps属性+雪碧图来制作帧动画，这当然颇为不错，但其实一开始我想的不是这样的，我想的是用真的3d和动画去做，这个方案涉及到不少空间的知识，今天来给大伙好好说说，这css 3d到底怎么玩。 先上效果图： 基本思路：三层结构：视角容器>>载体>>具体3d图
阅读全文
摘要：有时候在一个宽高固定的容器中，需要加载“更多内容”，如果设置了overflow:auto，加载更多内容时，子元素的大小超过父容器，就会出现滚动条。而滚动条的突然出现，会让子元素统统“向左抖了一下”。效果如下： 先来复习一下overflow的几个概念： overflow:visible //默认属性，
阅读全文
