用-来分隔单词，而不是下划线 对于压缩过的文件，比如 css 或者 js 文件，使用 .min 代替 -min 设置编码 在 css 文件的最顶部设置编码格式为 utf-8 ，否则有可能使得 css...的世界里为了让代码看起来不那么拥挤，所以需要在适当的地方使用空格： 选择器和声明块的左大括号{之间。...这是什么意思呢？...所以建议不要使用这个属性，取而代之的是，如果真的需要提高某个选择器的优先级，可以通过增加样式的层级来达到这个目的。...，用400代替 normal、700代替 bold。
代替旧的框架、语言（如VB） 增强用户体验。 对速度进行优化。 压缩 JavaScript、CSS、 image等前端资源（通常由服务器来解决）。 优化程序的性能（如数据读写）。...JavaScript代码：用散列表来优化查找，少用全局变量，用 innerHTML代替DOM操作，减少DOM操作次数，优化 JavaScript性能，用 setTimeout避免页面失去响应，缓存DOM...适当使用 touch事件代替 click事件。 避免使用CSS3渐变阴影效果。 可以用 transform:translateZ（0）来开启硬件加速。...（5）提升GPU的速度，用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）来触发GPU渲染. 18、如何设置...（3）在 Chrome中通过依次单击“设置”→“选项”→“高级选项”，并勾选“用预提取DNS提高网页载入速度”选项来配置缓存时间。 19、什么时候会出现资源访问失败？
面试官：你认为前端工作中最重要的是什么？ 答：用户体验！ 面试官：如何可以提升用户体验？ 答：从提升项目性能开始！ 面试官：如何才能提升项目性能呢？ 答：对项目进行优化!...如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要放在底部，等HTML解析完了再加载 JS 文件。那为什么 CSS 文件还要放在头部呢？...再次，尽可能利用 CSS3 效果代替图片，因为代码大小通常是图片大小的几分之一甚至几十分之一；最后一个就是使用雪碧图。...答：主要从以下几方面入手： 减少重绘重排：用 JS 修改样式几何属性（位置 ，大小）时，有可能产生大量重排重绘，所以可以通过 class 来改变样式。...当原生方法可用时，我们尽量使用它们。 降低CSS 选择器的复杂度：浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
CSS 中的优先级也叫做特异性，浏览器使用它来判断在元素上使用何种属性，优先级是基于不同的选择器组合而成的匹配规则。...下面引用 MDN 文档中建议的经验： - 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !...important - 永远不要在你的插件中使用 !important - 永远不要在全站范围的 CSS 代码中使用 !important 与其使用 !...important , 可以这样： 1、更好的利用 CSS 的级联属性 2、使用更具体的规则，或者写出更高优先级的 CSS 规则来代替 这是我们的 DOM 结构： CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。
如果这些属性使用较少，那这就不是问题。但是如果一个页面出现几百次，那么整体的CSS可能会受到影响，所以要谨慎使用。 2....❌ 不要在CSS中这样操作： @import url("header.css"); @import url("slider.css"); @import url("content.css"); @import...url("footer.css"); 可以使用多个HTML 中的标签来代替@import，它将并行加载CSS文件，可以在一定程度上提高应用的加载的速度。...使用 CSS 代码实现就会比图片加载速度更快。 还可以使用SVG来代替PNG或者JPG图片： 可以给图片添加效果； 图像加载速度更快； 图像自动适应用户屏幕。 6....，如果想要在其他选择器中覆盖该字体，就可以通过在该选择器中使用所需的字体来实现： body{ font-family: Arial, Helvetica, sans-serif; } footer
使用内容分发网络 为文件头指定Expires或Cache-Control gzip压缩文件内容 配置ETag 尽早刷新输出缓冲 使用GET来完成AJAX请求 避免空的图像来 三、CSS部分 把样式表置于顶部...避免使用CSS表达式（Expression） 用代替@import 避免使用滤镜 四、 JavaScript部分 把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript...不要在HTML中缩放图像 favicon.ico要小而且可缓存 七、 Mobile部分 保持单个内容小于25K 打包组件成复合文本 https://segmentfault.com/a/1190000004139275...，如果用户打开网页图片加载半天出不来，就算我们的图片做的再漂亮，又有什么卵用！...10.关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器。 11.利用可继承性：没必要在一般内容上声明样式。
什么是 BEM 命名规范 BEM 由 Yandex 团队提出的一种前端 CSS 命名方法论。...例如，上面提到的输入框 Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 Modifier 来实现。...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。..... } .card__link{ // 省略... } .card__link:hover{ // 省略... } 从上面的代码可以看出，我们样式类没有一点嵌套关系，嵌套关系都以从命名的方式来代替...$', // 可以理解为外层以内的选择器的规则， // 如果不指定，则跟initial同样的规则， // 注意这里配置的时候比上面少一个问号
并集：selector1,selector2,用逗号隔开 交集：selector1 selector2 用空格隔开 下面我们用代码分别实现一下不同选择器实现效果的方式： 案例2：使用基本选择器改变元素背景色和字体颜色...好，那么我们接着试一下用类选择器该怎么实现：同样的，我们还是需要先找到div，只不过这次不是根据id找，而是根据class类来找。该怎么写？ 刚刚id选择器用#,现在我们用类选择器 应该是什么？...那么大家来猜一下，这个大于号表示什么意思？又该怎么用？文档解释很明显，就是找到第一个选择器中的指定的子元素。...获得奇数元素:even 大家先来看一次even是什么意思？奇数？ 不不不 是偶数的意思。这个地方很神奇，为嘛呢？...我们以后统一用：confole.info(sex);然后在页面按F12选中控制台 看输出结果 多选按钮： 多选按钮和单选按钮呢 基本上是一样的，来我们对比着上面的写一下试试。
通配符：如果选中所有的元素 可以直接用通配符 * 表示所有。 选择器还可以组合多个一起使用，可以分为并集和交集。...并集：selector1,selector2,用逗号隔开 交集：selector1 selector2 用空格隔开 下面我们用代码分别实现一下不同选择器实现效果的方式： 案例2：使用基本选择器改变元素背景色和字体颜色...好，那么我们接着试一下用类选择器该怎么实现：同样的，我们还是需要先找到div，只不过这次不是根据id找，而是根据class类来找。该怎么写？ 刚刚id选择器用#,现在我们用类选择器 应该是什么？...那么大家来猜一下，这个大于号表示什么意思？又该怎么用？文档解释很明显，就是找到第一个选择器中的指定的子元素。...获得奇数元素:even 大家先来看一次even是什么意思？奇数？ 不不不 是偶数的意思。这个地方很神奇，为嘛呢？
通过 过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器 详解： 通过css选择器选取元素 jQuery支持大多数css选择器 最常用的有：基本选择器，层次选择器和属性选择器 在jQuery...中它们构成的规则于css选择器完全相同 1. ...在层次选择呢亲中，后代选择器和子选择器较为常用，而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替： （1）使用next()房代替prev-next（相邻元素选择器） （2）使用nextAll...属性选择器 属性选择器：语法标识：（[]） 什么是属性选择器？ 1. 顾名思义，属性选择器就是通过HTML元素的属性选择元素的选择器 2. 与css中的属性选择器语法构成完全一致 ?..."的元素的情况 通过条件过滤选取元素 过滤：把不要的滤掉，留下需要的 语法标识： （：） 主要通过特定的过滤规则来筛选出所有的DOM元素 同样：过滤规则与css中伪类语法相同，即选择器都以一个冒号（:）
在我们眼下的HTML5与 CSS3实战用，这两个概念就尤其重要了，怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点，并针对高级浏览器进行体验提升，这 些是我们在开发过程中需要明确的思路...既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？...Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现 ，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了...在复杂情况下，可以使用选择器和分组方法来应用样式。 无需额外下载。 嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。...base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url属性。
解决方案一：返璞归真 jQuery是个很锋利的工具，可有时候我们也得返璞归真一下，为什么非要用jQuery的html()函数呢，我们就用javascript dom对象里面的innerHtml属性不就可以了么...优化方案一：选择器优化 其实对于checkbox列的DOM结构是固定的，我们完全可以用速度快的选择器来代替":has"，我们先直接用路径选择器找到"input:checked"，然后使用三次parent...优化方案二：实时记录优化法 既然慢在DOM结构巨大时，jQuery选择器的搜索效率不是很好(特别是在IE下)。如果我们每次操作都记录下勾选的tr，那么就完全可以绕开选择器。...那么究竟哪些操作会影响到被勾选的tr呢，我们罗列一下，也就以下几种："checkRow","uncheckRow","uncheckAll","checkAll","deleteRow","loadData...",_601); tr2.css("height",_601); } 以上都是对网络上的总结，有什么不对的，还望见谅
效果就是这样的： qiankun 要在加载子应用的时候指定 strictStyleIsolation 才会开启这种样式隔离： 那加了一层 shadow dom 有什么用呢？...也就是对所有样式加了一层 data-qiankun=“应用名” 的选择器来隔离： 这样其他应用的样式能影响子应用了，但是子应用的样式还是影响不了父应用，看上面的弹窗就知道了。 为什么呢？...而且如果要在 qiankun 里实现全部的 scoped css 功能，那为啥不直接用 scoped css 或者类似的 css modules 呢？...那么问题来了，scoped css 是多了一个属性选择器而已，本身的 class name 没变： 所以 class name 该怎么设怎么设，不受影响。...不管是 css modules 还是 scoped css 都比 qiankun 自带的样式隔离方案好用的多，那为什么微前端框架还要实现样式隔离呢？
二、HTML 2.1 语法 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 （2）嵌套元素应当缩进一次（即两个空格）。...（3）对于属性的定义，确保全部使用双引号，绝不要使用单引号。 （4）不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。...第二部分 编写灵活、稳定、高质量的CSS代码的规范 一、语法 1.1 注意 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。...（12）尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。 （13）为选择器中的属性添加双引号，例如，input[type="text"]。...（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。 在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。
vmin : vw和vh中较小的那个。 vmax : vw和vh中较大的那个。 Q: rem与em有什么区别呢？ 区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...CSS 选择器 描述: 前面的示例中知识介绍了元素选择器用来选择 HTML 文档中给定的元素, CSS使用选择器来选择需要样式化的HTML元素,并通过属性-值(指定具体的样式，比如颜色、字体大小、边框样式等...important 永远不要在你的插件中使用 !important 永远不要在全站范围的 CSS 代码中使用 !...4.对于属性值或颜色参数省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）并且避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px...; 5.尽量使用简写形式的十六进制值而且全部小写，例如，用 #fff 代替 #ffffff，在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？ 一、浏览器渲染 开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： ?...rule 转换为 CSSRuleSet 中的 rule ； 基于这些个 CSSRuleSet 来决定每个页面中的元素的样式； 三、CSS 选择器解析顺序 可能很多同学都知道排版引擎解析 CSS 选择器时是从右往左解析...，这是为什么呢？...试想一下，如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了...那么有哪些规则会共享 computedStyle 呢？ 该共享的element不能有id属性且CSS中还有该id的StyleRule.哪怕该StyleRule与Element不匹配。
最详细的css3选择器解 选择器是什么？ 比较官方的解释：在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 最常见的 CSS 选择器是元素选择器。...看下面 具体是什么意思呢？...示例 意思是选择input标签中，name属性为username的input标签，再为它设置样式。 属性与属性值完全匹配 属性与属性值完全匹配与上面的根据具体值属性有什么区别呢?...还记得我们之前在类选择器里面讲解的多类选择器吧。当我们要选择这类标签的时候，就需要属性与属性值完全匹配了，当然这只是一个示例。 这里面，如果我们用这个选择器来代替是否可行？...示例： 这个选择器读作“选择紧接在div1后面的h1标签，并且是一个”，这个选择器也一样，可以和前面的子元素选择器一起使用。 伪类 css伪类是用于向某些选择器添加特殊的效果。什么意思呢？
2.1 引入 想要在html中应用css样式，需要先引入css，有三种方式： 文件引入 通过link标签（head标签内）引入css文件： <link href="https...： 容器 2.2 选择器 网页中有那么多的标签，如何给指定的标签应用样式呢？...比如有两个框，怎么让它们一个白色一个红色，或者都变成红色呢？ 选择器是CSS核心概念，定义了一套选择标签的语法，可以给指定的标签应用指定的样式。...color: red; } 运行效果如下： [image-20200530192620946.png] id选择器 上面讲到，同一个页面中，id值必须唯一（像身份证），可以用id...2.3 样式 CSS可以控制布局、块（元素）、内容（块内的文字、图片）等样式，以及增加动画效果。 下面介绍CSS常用的样式： CSS中，注释用/ 注释内容 /表示。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型...标准模式与兼容模式各有什么区别? !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。...如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低; 3.CSS清除浮动的几种方法（至少两种） 使用带clear属性的空元素 使用CSS的overflow属性； 使用CSS...eval parse,鉴于安全性考虑 使用parse更靠谱; 7.事件委托是什么 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！...（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
