随笔分类 - html/css
摘要：背景：兄弟元素或父子元素同时设margin边距时，会导致margin边距会按照最大的那个边距展示，解决方案，行程 BFC，块级格式化上下文，来消除该问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h
阅读全文
摘要：答案：对于 min-width， max-width 这种，是左右边界值都包含的。 如果下一个写的媒体查询的区间包含了上一个的区间，以后写的为准，覆盖前一个，所以顺序也会影响媒体查询。 例如 以下是先写了 720-730 宽度的判断，后写的 480-720 的判断，所以以后写的为准，背景色为红色 @
阅读全文
摘要：背景 在视频平台看剧的时候，总会发现各家都已实现在有人物出现的时候，弹幕会藏在背后的情况，关键是，虽然弹幕被藏在背后，但是点击被遮挡的弹幕位置依然可以点赞成功，真是感觉特别神奇。 网上找到了一个网友发的解决方案，感觉基本符合需求，但是具体各家怎么实现的还待探究。 参考链接 demo 实现 <!DOC
阅读全文
摘要：关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型(DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。 在解析 HTML 时会创建文档对象模型。HTML 可以请求 JavaS
阅读全文
摘要：看了很多方案，使用伪元素的方案最合理，简单，容易理解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
阅读全文
摘要：一、做好效果如下 二、思路分析 主要实现方法： transform: rotate(xxdeg) 实现圆环，如果单通过一个圆环来实现，则整个圆环上的颜色无法实现部分动，这时候就需要遮罩 左右各一个矩形区域，设置 overflow: hidden; 里面放一个圆，两个举行的总宽度为一个圆的直径 每个矩
阅读全文
摘要：浏览器渲染路径，先构建 DOM 树，再构建 CSSOM 树，DOM 树再与 CSSOM 树合并为渲染树，之后再进行布局、绘制，完成渲染过程。 其中，html、css、js 的加载都会影响页面的渲染速度，而渲染树必备要素为 html 和 css ，所以要尽可能让他们提前渲染，js 则尽可能滞后加载。
阅读全文
摘要：前言 Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作，真的提升开发效率之利器。 所有的操作都是按下tab键即可瞬间完成。 一、相关语法 1. 用.来生成类名 div.aaa 按tab后生成如下： <di
阅读全文
摘要：优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html 目前常见移动端适配方案 1、媒体查询 通过写媒体查询，在不同的分辨率下写对应不同的样式，这样带来以下几点缺点： 开发上的繁琐，需要针对不同设备下写对应适配的样式； 在不
阅读全文
摘要：问题 项目为多页面应用，每个页面中都引入同一份公共样式less文件导致编译打包后有多份样式，我使用的是less预编译器。 解决 网上找到即为大佬的解决方案，真的非常好用，这里备忘一下。 主要解决方案为，使用less本身支持的 import的时候前面加（reference），只在入口js文件中引入一份
阅读全文
摘要：背景 artTemplate模版是腾讯开源的一个模版引擎，具体文档参考：https://aui.github.io/art-template/docs/syntax.html#Template-inheritance 根据文档，artTempate模版继承父模版之后再引入子模版，发现不生效？ 解决
阅读全文
摘要：一、背景 弹性布局使用了很久了，一直停留在基本的用法，比如横向布局，竖向布局，垂直居中，水平居中，着实非常好用，当然，超低版本安卓有一些兼容性问题，但是总会出现一些奇奇怪怪的问题，比如横向排列的时候，其中的一个icon 元素会被截断，因为没有设固定宽度，之前是通过设定min-width，max-wi
阅读全文
摘要：video设置静音，在ios8,io9发现都无法静音，得出结论如下： 1、如果默认给video标签加muted属性，调试获取到的为true，但是依然有声音，即：即使设置为true，也是有声音；2、通过js改变muted是无法改变ios8下的值的，改变了之后打印依然为改变之前的；3、网上看到其他的一个
阅读全文
摘要：正常我们写一个左右两列，左侧一列放置图片的html，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ background-col
阅读全文
摘要：参考链接：https://blog.csdn.net/qq_20777797/article/details/77916029 https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html 需求是一共有两个，1、单张竖图持续
阅读全文
摘要：注意，display:flex 一定要写在display:-webkit-flex;的后面 ，否则webview以及浏览器等都是webkit的内核会默认走
阅读全文
摘要：在移动设备上设置overflow-x:scroll，大部分机型都是展示正常的，在安卓哦5.0系统上，无论怎么样滚动条都不会生效，终于找到了解决办法：
阅读全文
摘要：外层盒子如果设置了左右margin，外层盒子设置对应比例的时候，是按外层盒子的宽+两边的margin算做横向总长度的，不是只算宽度的。
阅读全文
摘要：css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下： 注意三点： 1、宽高比一定是比值的形式，不能直接写小数，宽/高 2、在less中直接写宽高比也不会生效，因为less会编译成小数，可以在比值前面加一个 ~ 完美解决 3、避免样式覆盖，
阅读全文
