1. 内容横向滚动的代码 .ul { display: box; display: -webkit-box; width: 250px; background: yellow; overflow-y: hidden; overflow-x:auto; } .li { flex-shrink:0; -webkit-flex-shrink: 0; width: 100px; height: 50px; background: red; margin-right: 5px; } <div class="ul">…

前言 页面显示到浏览器上的过程： 1.1、生成一个DOM树。 浏览器将获取到的HTML代码解析成1个DOM树，包含了所有标签，包括display:none和动态添加的节点。 1.2、生成样式结构体。 浏览器将所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的。 2、DOM树和样式结构体结合生成render树。 render树类似于DOM树，render树每个节点有自己样式（盒子模型，margin、border、padding、content），但不包含display:none和head节点，却包含visib…

SVG的画布、画布视区（viewBox）、浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域，理论上在所有维度上都是无限的。（也有人称为“SVG世界”，但我觉得叫画布比较合适） 画布视区（viewBox） 就是截取画布某一块矩形区域作为显示的区域。（有人也称为“视野”或“视区盒子”，但我觉得不够形象。viewBox是与画布相关的，那既然是画布的可视区，那叫画布视区比较容易顾名思义。） 控制画布视区有两个属性：viewBox、preserveAspectRatio。 viewBox viewBox指定可视区的位置…

在进行实验和资料查询时，我遇到了几个关键问题： 1. window.onload到底是什么加载完触发？ 2. body为什么会有onload事件？ 3. 为什么是window.onload，而不是document.onload？ 4. document ready到底是什么ready，DOM渲染完成？ 5. jQuery怎么实现$(document).ready？ 6. jQuery的ready，还能ready什么？ 7. jQuery的document ready就一定比window.onload快吗？ 8. 为…

连我自己把float和绝对定位，都称为脱离文档流，想想概念又不那么清晰，于是寻找了W3C资料来理解，才发觉不应该叫文档流。 资料 英文：https://www.w3.org/TR/CSS22/visuren.html#normal-flow 中文：http://w3help.org/zh-cn/kb/010/ PS：资料中文翻译为常规流，我觉得直译为普通流也行。 常规流 这个概念定义了什么东西，它决定了什么？它决定元素的布局方式，是基本的布局模式！ 盒子模型 盒子模型，是DOM元素的抽象定义。盒子模型里，元素有ma…

颜色 RGB和HSL都是CSS3支持的颜色表示方法，一般普遍使用是RGB。PS：HSL浏览器兼容。 RGB RGB即是代表红、绿、蓝三个通道的颜色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。 表示方式 取值范围 优点 缺点 rgb(r, g, b) [0, 255] 每个分量 显示器容易分析， 目前的显示器大都是采用了RGB颜色标准 不符合人类描述颜色的习惯 #rrggbb 00 - FF 十六进制正整数     例子：   HSL HSL即是代表色相，饱和度…

上几周一直在做公司的webos的前端代码的重构，之中对javascript的代码进行了重构（之前的代码耦合严重、拓展、修改起来比较困难），这里总结一下当中使用的一种代码结构——插件式（听起来怎么像独孤九剑一样.....）。 代码结构  这直接上代码结构图（Javascript部分） ps:箭头的指向A->B，表示A调用B 由上面可以看到四种类型的东西： 控制类：提供一个全局的命名空间、保存上下文信息、组件、组件提供的全局方法，负责调用组件初始化。 代码示例如下（不完整）： var webos= { conte…

JQuery是个好工具，它做了太多的事。 以至于让人渐渐忘记原生的JS该怎么写了，导致连为了用个DOM选择器或者Ajax就直接加个JQuery，确实，JQuery太方便了。 坏处： 由于JQuery的体积（例：jquery-2.0.2.min.js，有81.5KB），对于移动手机端的网页开发来说，让人感觉难以接受。   所以不得不说，原生Javascript的执行速度是快过JQuery，并且也不用引入整个JQuery，减少了代码量。 原生DOM选择器： document.querySelector document…

课程分为四个方面： 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径，Path字符串是由命令及其参数组组成的字符串，是非常强大的绘图工具。 例如： <path  d="M0,0L10,20C30-10,40,20,100,100"  stroke="red"> 命令汇总 命令 含义 M/m (x,y) 移动当前位置 L/l (x,y) 从当前位置绘制线段到指定位置 H/h (x) 从当前位置绘制水平线到达指定的 …

1.什么时候能将零散的图片整合成一张大图，达到减少请求数的作用？ 答：整合进大图的图片是被设置no-repeat用的，如果是repeat-x、repeat-y就不可以。 2.E + F 选择紧贴在E元素之后F元素 3.E ~ F 选择E元素后面的所有兄弟元素F