类选择器命名规则 不能用纯数字或者数字开头来定义类名 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名 不建议使用汉字来定义类名 不推荐使用属性或者属性的值来定义类名 常用的命名 ?...（不推荐使用，转行内元素最好使用display: inline-block;） 浮动的作用 文本绕图 ? 制作导航（经常使用） 把无序列表ul li 浮动起来做成的导航。 网页布局 ?...（不推荐使用，推荐使用display:inline-block;） 相对定位 position: relative; 特点： 1.使用相对定位，位置从自身出发。...3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;） 定位（脱标）的盒子居中对齐 margin:0 auto; 只能让标准流的盒子居中对齐 定位的盒子居中...h1可以包含p，div等标签（一般不这样）。 行内元素尽量包含行内元素，行内元素不要包含块元素。 ? ---- 规避脱标流 尽量使用标准流。 标准流解决不了的使用浮动。 浮动解决不了的使用定位。
语法应该在 v18 中变得稳定，并且是此时编写模板的推荐方法。 可延迟视图 另一个重要功能是引入了模板中使用的可延迟视图。...信号 API 现在标记为稳定版。 除了 和 RxJS 互操作性功能，这些功能可能会更改，并且仍标记为“开发者预览版”。...） MixedReadWrite（默认值，但应尽可能避免使用更具体的阶段） Read（如果您只需要阅读 DOM，则推荐使用） 我认为在大多数情况下，我们应该能够使用。...您可以使用 CSS 自定义动画，对整个视图进行动画处理或跳过其中的一部分， 或者指出哪些 DOM 元素实际上是旧视图和新视图中的相同实体： 然后，浏览器将尽最大努力在状态之间进行动画处理。...(routes, withTransitionViews({ skipInitialTransition: true })) }] }); 更高级的方案需要向视图添加/删除 CSS 类， 因此，路由器还允许您在转换完成时运行任意函数
image.png 脱标 浮动的元素会“脱标”,不在占有标准流的位置 脱标的元素拥有行内块的表现 脱标表示脱离了标准流 标准流：块元素单独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流...image.png margin:auto 对于脱标元素不起作用 无法居中 <!...掉下来的位置会根据上一个浮动盒子的高度决定） 右浮动会颠倒盒子顺序 浮动的盒子压不住文字和图片 尽量在标准流的盒子里面浮动 闭合浮动 浮动带来的问题：浮动元素撑不开父级容器 解决办法（闭合浮动）： 强行给父盒子添加高度 （不推荐...，不利于后期维护） 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子） 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用）...给父元素添加overflow:hidden; (在某些特定场景下使用不了) 伪元素 就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染 伪元素特性： 1、伪元素由css渲染 所以不会增加你的
-- 告诉浏览器不缓存当前页面 --> 然而设置pragma: no-cache并不能应用于HTTP1.1及以上规范...HTTP/1.1 规范中定义的，取代了之前用来定义响应缓存策略的标头例如 Expires。...允许浏览器和中间缓存（如CDN）缓存CSS，并将CSS设置为1年后到期，超长的缓存时间可以让用户避免每次都从服务端获取响应。...同时不要忘记给文件名加上指纹，以便及时更新改动 JavaScript同样设置为1年后到期，但标记为private，因为它可能会包含某些用户私人数据，这是CDN不应缓存的。...图像缓存时不包含版本或唯一指纹，并设置为1天后到期。
特点： 1.元素使用绝对定位之后不占据原来的位置（脱标） 2.元素使用绝对定位，位置是从浏览器出发。 3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。...（不推荐使用，推荐使用display:inline-block;） 3、相对定位 position: relative; 特点： 1.使用相对定位，位置从自身出发。...4、固定定位 position:fixed; 特点： 1.固定定位之后，不占据原来的位置（脱标） 2.元素使用固定定位之后，位置从浏览器出发。...3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;） 5、定位（脱标）的盒子居中对齐 margin:0 auto; 只能让标准流的盒子居中对齐 定位的盒子居中...h1可以包含p，div等标签（一般不这样）。 行内元素尽量包含行内元素，行内元素不要包含块元素。 ? ---- 五、规避脱标流 尽量使用标准流。 标准流解决不了的使用浮动。 浮动解决不了的使用定位。
CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。...15．推荐使用异步JavaScript资源 异步的JavaScript资源不会阻塞文档解析，所以允许在浏览器中优先渲染页面，延后加载脚本执行。...@import "path/main.css"; 二、 页面渲染类 1．把CSS资源引用放到HTML文件顶部 一般推荐将所有CSS资源尽早指定在HTML文档中，这样浏览器可以优先下载CSS并尽早完成页面渲染...由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染的过程。...7．避免使用CSS表达式或CSS滤镜 CSS表达式或CSS滤镜的解析渲染速度是比较慢的，在有其他解决方案的情况下应该尽量避免使用。 // 不推荐 .opacity{ } 觉得本文对你有帮助？
问题 先来看问题，其实问题不难理解： n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。 ? 上图为 8 皇后问题的一种解法。...所以： 用 columns 数组记录摆放过的列下标，摆放过后直接标记为 true 即可。...用 dia1 数组记录摆放过的对角线 1下标，摆放过后直接把下标 rowIndex + columnIndex标记为 true 即可。...用 dia2 数组记录摆放过的对角线 2下标，摆放过后直接把下标 rowIndex - columnIndex标记为 true 即可。...columns[columnIndex] // 在对角线1上不冲突 let dia1NotConflict = !
从Java堆栈收集GC Roots标记为灰色进入灰色队列；多线程消费灰色队列，将每个灰色对象直接引用的对象添加到灰色队列，将消费过的灰色对象标记为黑色加入到黑色队列；灰色队列消费完后，剩余非黑色对象皆是白色对象...3 漏标/多标问题收集GC Roots时会暂停用户线程，但并发标记时不会暂停用户线程，此时会产生新的引用关系，多标产生浮动垃圾不致命，但一旦漏标就出现了问题。...图片case 2：当对象D已被标记为灰色，此时产生了D对G的引用，而E却断开了对G的引用，那么G不会被标记，会被回收掉，这属于漏标现象。...4 标记-整理算法复制算法使用对象存活率较低的情况，但对象存活率较高时会进行大量复制操作，效率会降低，更关键的是会浪费近50%内存，所以老年代不采用该算法。...CMS只能搭配ParNew、Serial收集器，CMS+ParNew是Java 8及之前官方推荐的组合，从Java 9开始官方推荐的是面向全堆的G1收集器。
网络加载类 减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 减小 HTTP 请求大小 减少没必要的图片...src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免 // 不推荐...，所以在拉取服务端数据时使用 GET 请求效率更高 $.ajax({ url: url, type: 'get', // 推荐使用 get 完成请求 data: {}, success...文件串行解析到 @import 时才会加载另外的 CSS 文件，大大延后 CSS 渲染完成的时间 页面渲染类 把 CSS 资源引用放到 HTML 文件顶部 一般推荐将所有 CSS 资源尽早指定在 HTML...，在有其他解决方案的情况下应该尽量避免使用 // 不推荐 .opacity { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50
在这篇博客中，我将讨论如何将 Font Awesome 从 v4 迁移到 v5，并选择合适的方式加载图标库，帮助你优化图标加载性能。...在这篇博客中, 我将讨论如何将Font Awesome从v4迁移到v5, 并选择合适的方式加载图标库, 帮助你优化图标加载性 1....v4 的图标类名。...Font Awesome Kit 推荐的使用方式 在 Font Awesome v5 中，Font Awesome Kit 是官方推荐的加载方式。...CDN 提供了方便、快捷的加载方式，而 Kit 则是推荐的现代解决方案，具备按需加载和自动更新的优势。如果需要，可以同时使用本地文件和外部资源，但要注意加载顺序和资源覆盖。
但是IE10及edge有一些BUG（用于渐变的时候会不生效） Safari and iOS Safari 8 之前，作用于部分伪元素也不生效 ，比如:before 和:after currentColor...currentColor可以作用于常见到的色彩作用域（border,box-shadow,outline-color,background-color等） currentColor会向上遍历，自身color不设置则取父类...，父类不设置则取:root根元素的，啥都没就浏览器默认值 inherit – 这个存在已久，这里扯扯关于这货的一些技巧 使用inherit 表明要继承于父元素的样式属性，会使子元素继承了那些不会被自动继承的属性...． inherit还能作用于伪类元素 ，继承主体的一些特性，比如做一个角标，下拉箭头等等 只要用的好，我们写出的代码可以更加简洁，方便理解和维护； 效果图 父元素 黑色背景区域 渐变背景区域...体现，，CSS-NEXT看过一些，还是只有一些小改动
*/ /* 推荐 */ h3{ color: pink; } /* 不推荐 */ H3{ COLOR: PINK; } ---- CSS基础选择器 CSS选择器作用 找到指定的HTML页面元素，...非常多 .nav { color: red; } id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;} 通配符选择器 选择所有的标签 选择的太多，有部分不需要...不推荐使用 * {color: red;} 「6..../* 推荐 */ .jdc {} li {} p{} /* 不推荐 */ *{} #jdc {} div{} 因为div 没有语义，我们尽量少用 CSS复合选择器 复合选择器是由两个或多个基础选择器...交集选择器是并且的意思,即...又...的意思 比如： p.one 选择的是： 类名为 .one 的段落标签。 /*用的相对来说比较少，不建议使用。*/ 「4.
点击上方“IT平头哥联盟”，选择“置顶或者星标” 与你一起成长～ ?...2016年2月2日，微软的项目经理 Kenneth Auchenberg 说如果 CSS 支持了变量和嵌套，他将不再使用预处理器。...“每个人都使用自己的半标准语言”绝对是健康的。...对此，草案里的解释是：现有的 CSS 解析都是通过一个单独的前瞻符（lookahead token）来区分各种选择器的，如果新增的嵌套语法不写前缀的话，那一段文本就没法提前知道它到底是一个 CSS 声明还是一个...类选择器 [] 属性选择器 * 通用选择器 : 伪类 :: 伪元素 ? 图2.
本文档概述了如何将NGINX用作其他HTTP服务器的前端代理服务器，以及作为软件负载平衡器在整个提供HTTP资源的计算机集群中分配流量。...个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后再购买服务器 使用NGINX的前端代理服务：如何工作 当请求到达NGINX前端代理服务器时，以下是发生的过程的概述： NGINX收到资源请求。...使用NGINX可以比Apache更快地提供静态文件（如JavaScript，CSS，图像，PDF文件，静态HTML文件等）。...通过添加proxy_redirect指令，代理请求将返回预期的Location:标头。...在上面的例子中，在端口组件服务器8801，8802，8805，8806，和8807只能拒绝一次被标记为不可操作前的连接。组件8803和8804允许被标记为不可操作之前失败了两次。
步骤如下 首先新建一个.md文件 像平时一样填写标头 内容填入如下 <iframe name="web" width="100%" frameborder=0height="100%" src="\...window.parent.document.all.newtest.style.height=document.body.scrollHeight;} 将html文件放在/source/html文件夹中 并填写Html文件的标头...其他笔记 使用手机开启热点的时候,此手机的局域网ip可以在连接此热点的设备上查看 DNS 服务器.其地址即为宿主机局域网ip地址 在写笔记的时候,记得要在敏感标签前加 转义字符\ 可以在md文件正文添加...css引入标签…会被渲染出来..但是不推荐..感觉好乱,不过在某个页面需要黑白的时候,可以试下哦 记得尽快完成docsify笔记!!
适当的值随网站数据的性质而变化，但强烈推荐使用偏好。否则，它取决于浏览器和代理来选择是否缓存内容。不恰当的选择可能会导致性能问题、安全问题，或者两者都有。...非标准的标头 X-Content-Type-Options 选项指示浏览器不做任何模仿指定类型的 MIME。...这些头是不标准的，对浏览器渲染站点的方式没有影响。 虽然它们没有什么实际用途，但对于搜索运行过时版本的软件的机器人或蜘蛛来说，这些标头是无价的，因为这些软件可能包含安全漏洞。...建议 从服务器响应中删除这些标头: X-Powered-By, X-Runtime, X-Version 和 X-AspNet-Version。...4 Cookies 4.1 Cookie Security 包含敏感信息的 cookie，特别是会话 id，需要标记为安全的，假设网站是通过 HTTPS 传输的。
所以，借着这个机会刚好来和大家聊聊浏览器是如何将你的 HTML 一步一步渲染到页面上的以及 JS 和 Css 在一过程中究竟是否会阻塞（延迟）这一过程。...p span { display: none; } img { float: right; } Css 的处理和 HTML 差不多，浏览器也需要将接收到的 CSS 规则转换为浏览器可以理解和使用的内容...大多数情况下，我们的 css 文件都会使用外部链接的方式进行引入，当使用 link 标签引入 Css 文件时。...自然，标记为 defer 的脚本刚刚我们也有结论并不会阻塞页面的首屏渲染～接下来我们来看看所谓的 Css 又是如何表现的呢。...（Css 文件加载不阻塞解析特性） 同时 css 脚本的加载是会阻塞 RenderTree 的合成，从而阻塞页面的渲染（Css 文件加载渲染阻塞特性）。
更一般地说，将敏感数据放在正文或标头中以确保其不泄漏被认为是最佳做法。 HiddenHttpMethodFilter 在某些应用程序中，表单参数可用于覆盖HTTP方法。...如果用户通过身份验证查看敏感信息然后注销，我们不希望恶意用户能够单击后退按钮查看敏感信息。默认情况下发送的缓存控制标头为： Example 2....然而，如果您的应用程序提供了自己的缓存控制头，Spring Security将不再使用。这允许应用程序确保可以缓存CSS和JavaScript等静态资源。...然而，由于HPKP的复杂性，许多专家不再推荐使用它，Chrome甚至取消了对它的支持。...X-Frame-Options 在网站中允许添加frame是一种危险的方式，比如使用一些CSS样式，使frame表现的跟网站一样，导致用户点击了不想要点击的内容，这就是点击攻击。
CSS简介以及基本语法 CSS引入方式： 1. 行内式： （使用最少，因为会产生冗余，而且不符合W3C规定） 2....字体系列 如果字体名称中存在多个单词，推荐使用引号包裹 如果用户电脑没有我们设定的字体，就用sans-serif font-style 字体风格 italic:倾斜 normal：正常...一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后样式为准。 样式冲突，遵循的原则是就近原则。 样式不冲突，不会层叠。...继承类 < id < 行内样式 < !important （简记为，哪个选择器能够更精准的选到，哪个优先级更高） 注意：!... 效果： 浮动特点： 脱标，
点击上方“前端三元同学”，选择“设为星标” 第一时间关注技术干货！...几天前，我发表了一篇新的博文，详细介绍了我使用styled-components的经验，以及如何将动态样式整合到 js 域中，避免使用 CSS 文件。...Tailwind初识 为了让你开始并理解本文，以下几点非常重要： TailwindCSS 是一个充满预构建类的包，可以对组件进行样式化，但是，它们非常灵活，您可以用它们做任何事情 你不需要知道 CSS...它使用了很多引导程序的语义，并且几乎扩展了很多，以至于你永远不必使用直接的 CSS 中的媒体查询来切换样式的差异。...有一种很好的处理办法就是使用一个 classNames 包，用来将这些类名都组合在一起，并且允许你将元素的格式设置得更清晰一些 例如这个样子： module.exports = { theme: {
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
