-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
亲爱的观众老爷们大家好～我发现我写文章都是因为工作碰到问题才写，什么探索最前沿的最讨厌了（其实是力有所不及）！言归正传，最近碰到的问题是这个：准备开发一个平台，随手写导航栏组件之时，发现层级错乱，无论如何调z-index都无法达到预想的效果，大致代码如下：
参考样式表（作者样式表+浏览器默认样式表）中没有冲突的声明，作为CSS属性值,如果你设置的属性跟浏览器默认属性重合了，那么就是有冲突的属性，如果没有冲突那么就作为css的属性,同时还会进行css预设值的处理。
css堆叠上下文不知道在你的业务中有没有遇到过，前段时间搭建vuepress1.0就遇到这样的一个类似的问题，主要是用了vuepress-reco这个主题,去官方提了一个issue[1],自己提的issue最后自己找到原因了，但是还是有小伙伴遇到同样的类似问题,今天一起探讨一下css堆叠上下文的问题
这是一个令人激动的革新。 CSS 变量，顾名思义，也就是由网页的作者或用户定义的实体，用来指定文档中的特定变量。 更准确的说法，应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。 一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。 但是新的草案发布之后，直接在 CSS 中定义和使用变量已经不再是幻想了，像下面这样，看个简单的例子： // 声明一个变量： :root{ --bgColor:#000; } 这里
Java Web的学习是需要一定的计算机基础的，主要有前端基础和Java基础和一定的网络基础，这些基础知识还是需要掌握到一定的程度的。
我们前面学过， CSS 是层叠样式表，多个样式会作用在同一个 HTML 元素上。
z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
步骤 3 ：标签中新增一个 style 属性，并修改 style 属性值
如果有 两个相同类型 的 CSS 样式 作用在了 同一个 标签 上 , 那么就出现了 样式冲突 ,
z-index 这个属性表面看上去很简单，但如果你想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文将从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 z-index 的内部工作原理。
原文链接：https://juejin.im/post/5b876f86518825431079ddd6#comment
正常情况下，页面元素是从左到右和从上到下渲染（x、y 维度），但因为 margin 可以写负值，还有一些定位相关的 css 属性(absolute、relative、fixed、stick)，这就会导致元素之间可能重叠，重叠后就需要判断元素堆叠顺序，这就涉及到层叠上下文（Stacking context）了，相当于增加了 z 轴的维度。
css写在style标签中，style标签一般写在head标签里面，title标签下面
1.z-index基础 z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定 当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个。 z-index支持的属性值： 1. z-index：auto；默认值，如果不对z-index设置，默认为auto； 2. z-index：<integer>；整数值，z-index：1，z-index：2等 3. z-index：inherit；继承 z-index基本特性： 1. 支持负值； 2. 支持CSS
CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。
本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。
通常，我们编写的HTML、CSS、JavaScript等文件，经过浏览器运行之后就会显示出页面，那他们是如何转化为页面的？这背后的原理是什么？这个过程就是浏览器的渲染进程来操作实现的。浏览器的渲染进程的主要任务就是「将静态资源转化为可视化界面：」
网上有很多这方面的教程，但不是苦涩难懂就是从哪copy过来的，反正很长一段时间我是没看懂，时间长了也没打算去研究了，主要原因是，基本上很少会遇到那些问题（所以说啊，要是没有研究精神的才懒得管它）。但自从开始研究CSS以后就一发不可收拾，所以打算把CSS一系列的东西都给研究一遍，当然能研究懂自然是好的，不能就当自娱自乐了。话说这个层叠顺序和堆栈上下文没啥用对吧，你看我就是不学它，平时也没出什么问题。 …… 想让它出问题也很简单，不过既然你都说没用了，也就不打算告诉你了。 本篇属于短话长说型，前半部分比较简单，
本来呢，最近在规划一篇关于浏览器的文章，但是在做文章架构梳理和相关资料查询的时候，发现「浏览器在渲染页面」的过程中，也别有洞天。索性，就单独将其作为一篇文章来写。
hello，大家好今天我们继续分享爬虫的相关技术，今天我们分享的是html的基础知识。
之前看了大佬的对层叠上下文的解释 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 然后感觉对各种设置了z-index的情况可以用Photoshop里图层的方式来进行一个理解会直观很多。
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~
有时用户希望将我们的报表页面分享到其他的渠道，比如邮件、PPT等，每次都需要自己截图，一是很麻烦，二是截出来的图大小不一。
用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。（题目copy自网上）
z-index是一个用于控制文档中图层顺序的属性。具有较高z-index值的元素将会出现在具有较低值的元素之上。就像页面上的x轴和y轴决定一个元素在水平和垂直方向上的位置一样，z-index控制它们在z轴上相互层叠的方式。
所有的盒模型元素都处于三维坐标系中，除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。
一般情况下，网页中的层叠规律是这样的：如果两个层都没有设置 position 属性为 absolute 或者 relative 属性，哪个层的HTML代码放在后面，哪个层就显示在上面。 Demo:
导语 | html2canvas在前端通常用于合成海报、生成截图等场景。本文从一次蒙层截图失败对html2canvas的实现原理展开详细探讨，带你完美避坑！ 一、问题背景 在一个前端项目中，有对当前页面进行截屏并上传的需求。安装了html2canvas的npm包后，实现页面截图时，发现html2canvas将原本有透明度的蒙层截图为了没有透明度的蒙层，如下面两张图所示： 显然这并不能满足前端截屏的需求，于是进行google，终于查到了相关问题。原来html2canvas渲染opacity失败
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 所有题目汇总在我的 Github 。 3、层叠顺序（stacking level）与堆栈上下文（s
Html 标签学习 排版标签 标题 h1、h2、h3、h4、h5、h6只有这六个 段落标签 p标签 段落之间有空隙换行 换行标签 br 空换行 hr 下划线换行 文本格式化标签 根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线 媒体标签 图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示 width、height 很容易理解，控制图片宽高 路径 相对路径 绝对
给同一个选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。
网络爬虫又称网络蜘蛛、网络机器人，它是一种按照一定的规则自动浏览、检索网页信息的程序或者脚本。网络爬虫能够自动请求网页，并将所需要的数据抓取下来。通过对抓取的数据进行处理，从而提取出有价值的信息。
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其
position 属性的初始值是 static。如果把它改成其他值，就说元素就被定位了。而如果元素使用了静态定位，那么就说它未被定位。
1.css简介 用来修饰html样式的一种语言，层叠样式表 增强复用性 方便后期维护 2.css样式引入方式： (1)内嵌方式
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。
在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚，而 Z 轴 则相对较为模糊，或者说不能全面的理解Z轴的显示逻辑。
https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md
快捷键控制滚动条 ,注意： ① 设置父级的滚动条，给到父级div的ref值,而且父级应设置固定高度或百分比 ② 用document.getElementById(elementId)获取div不好使(div.scrollTop始终为0)，原因来自① ，没选对父级id错了 ③ 两种方法： ④ _this.addShortcutsKey(‘up’, () => { _this.KaTeX parse error: Expected 'EOF', got '}' at position 100: …op-=
我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。
从上面的三个截图可以看到5个li标签可以排列好了内容和图片了，只要将超出第一个li标签范围的进行隐藏即可。
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。 哪些属性能继承？ color、 text-开头的、line-开头的、font-开头的。 这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承 这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
