组件间样式隔离的几种方案
CSS 即层叠样式表(Cascading Style Sheets）是一种样式表语言，它没有作用域的概念，引入即全局生效的，但一个样式是否起作用由多个因素共同决定，比如：重要程度优先级样式加载顺序 所以当我们在页面中使用时可能会遇到组件间的样式互相影响的情况，特别是引入了多个组件库或者类名命名不规范时，我们就需要对样式进行隔离，这样就可以避免样式冲突。下面我介绍几种方案：类名添加特定的前缀 一般来说，我们会在组件内部使用一个特定的前缀，避免组件之间的样式冲突。比如 antd 的组件内部的样式，都会使用ant-前缀，element-ui 的组件内部的样式，都会使用el-前缀。 由于原生 css 的功能太弱鸡了, 我们在实际开发中一般使用 css 预处理框架如 less, sass 等，对于这种我们也可以使用..
更多浏览器如何渲染页面
参考https://coolshell.cn/articles/9666.html文章是为了说明浏览器如何将 HTML，CSS 和 JavaScript 转换为网站。首先 浏览器是一个可以从远程服务器或者本地磁盘将文件加载、显示、交互的软件。浏览器有两个重要部分：渲染引擎（Rendering Engine）：一般习惯称为“浏览器内核”，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同如 Gecko（火狐）、Blink（Chrome）、Webkit（Safari）、Trident（IE）等，因此同一网页在不同的内核的浏览器里的渲染效果也可能不同。JavaScript 引擎：JavaScript 由 ECMAScript，DOM 和 BOM 三者组成，不同..
更多
浏览器中获取宽、高相关的属性
我们可能需要针对宽屏和高屏编写不同代码，下面我总结一下从浏览器中获取宽、高相关的属性css 如果宽高屏不设计具体逻辑代码，我们可以采用 css 的@media媒体查询的方式判断;orientation 宽度和高度相等时会被判断为纵向/* viewport 处于纵向，即高度大于等于宽度 */ @media (orientation: portrait) { } /* viewport 处于横向，即宽度大于高度。 */ @media (orientation: landscape) { } aspect-ratio 利用宽高比我们也可以判断宽高屏，当如果同时满足后面的样式会覆盖前面，所以下面当宽高相等时生效的是@media (aspect-ratio: 1/1) {}/* 最大宽高比 */ @media (m..
更多浅谈CSS动画
本文简单介绍如何定义 css 动画transition transitions 可以决定哪些属性发生动画效果transition-property (明确地列出这些属性,如果省略则包含所有属性)，何时开始transition-delay (设置 delay），持续多久transition-duration (设置 duration) 以及如何动画transition-timing-function (定义timing function，比如匀速地或先快后慢)如下面指定字体大小颜色和字体发生动画效果.transition-box{ font-size: 1rem; color: red; transition: color 2s, font-size 2s; } transition 的发生需要属性被修改时..
更多处理浏览器中的字体常见问题
当页面中的标题字数是不定的，并且需要适应各种机型屏幕宽度，可能会遇到下面的需求,字体末尾如何显示省略号 如果显示区域很小，我们可以只设置为单行显示，对于单行文本末尾显示省略号很简单.wrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 但是如果是显示区域很大,我们需要设置多行的最后一行显示省略号，对于多行文本，常用的方法如下移动端兼容较好，适用于 webkit 内核浏览器, 另外对于超出部分的字体仍会显示出来，如下图所示hello hello hello hello hello hello hello hello所以我们一般需要搭配固定高度及overflow: hidden;, line-heig..
更多常用的一些css样式
字体 文字超出后省略white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 中文简>繁转换font-variant-east-asian: traditional;
更多Vue样式dev和build下不一致
一次更新镜像后发现 vue 项目页面混乱，在开发模式模式下，写的样式有效，打包后无效一、多个相同样式文件同时存在项目中 现象：修改组件时，在项目中复制了一个组件重命名后进行修改，在本地执行正常，后打包上传，无法展示正常效果。 解决过程：在本地试图修改总是不见效果，在控制台查看样式仍是之前的样式，把其中一处样式在所有相关组件中修改，打包上传后样式生效，这说明是旧的样式在打包时覆盖了新的样式。将旧组件删除后解决上述问题。 原因猜测：因为相同组件包含不同样式时，无法判断哪份样式时在后面渲染，如果旧样式刚好打包后在后面渲染，则会覆盖掉新写的样式。在本地执行时，因为样式没有打包，访问页面时渲染的都是组件自身样式，所以不会出现上述问题。二、全局(main.js)引用样式 现象：在全局引入了 Element UI 样式..
更多DOM中的event
event Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等。事件通常由外部源触发，同样也会以编程方式触发，例如执行一个 element 的一个 HTMLElement.click( ) 方法，或通过定义事件，然后使用 EventTarget.dispatchEvent() 将其派发到一个指定的目标。有许多类型的事件，其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。 事件处理函数可以附加在各种对象上，包括 DOM 元素,window,document 对象. 等有三种方式可以为 DOM 元素注册事件处理函数EventTarget.addEventListener..
更多vue nextTick的原理
nextTick是 vue 的一个全局 API， 作用是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。co..
更多css关于浮动的知识
float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。float 原始用法 float 本意是为了允许文本和内联元素环它如（文字环绕图片）,就像下面一样.float { float: left; width: 200px; height: 200px; background-color: red; } <div class="wrapper"> <div class="float"></div> <div> float本意是为了允许文本和内联元素环它; ..
更多