什么是回流 和 重绘 回流 ❝ 1. 概念 当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。...，比如resize事件发生时 激活CSS伪类（例如：:hover） 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow 查询某些属性或调用某些计算方法...，而不影响布局操作就称之为 「重绘」， 例如：改变背景，字体颜色等。...搜索引擎无法解析 iframe ，不便于SEO优化 浏览器后退功能失效 ❞ 16. img 标签的 title 和 alt 有什么区别 ❝title : 当鼠标滑到元素上时显示 alt : 当图片无法加载时显示文字内容...❝ 单冒号 : 用于 CSS3 伪类选择器中 双冒号 : 用于 CSS3 伪元素选择器中 伪类选择器 是用来向元素添加特殊效果的，用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:
at once 知识点 CSS变量是一种通过只改变一个值来一次性改变多个CSS样式属性的强大方法； 遵循下面的目标，看看仅改变三个值来改变多个元素的样式； 过关目标 在penguin类中，改变一下内容：...CSS变量做为属性的值，我们可以赋予这个变量一个回退值； 所谓的回退值，就是当这个变量无效或者无法取得值时，就会使用回退的值； 注意：这个回退值并不是用来提高浏览器兼容的，在IE浏览器下回退值也不会生效的...所以这个回退值只是用于当变量无法获取到值时，浏览器有一个可回退的值可用，并且可以保证有效显示。...当我们使用CSS时，很有可能我们会遇到浏览器兼容问题； 如果遇到需要兼容不支持CSS变量的浏览器时，我们要提供一个回退的属性给浏览器读取； 当浏览器解析页面上的CSS时，它会忽略无法识别的CSS属性；...为了可以良好利用继承关系，CSS变量一般都会放入:root元素； :root是一个伪类（pseudo-class）选择器，它会直接匹配HTML文档（document）中的根元素，那就是html元素； 在
先去匹配E ，然后再根据E 找第n个孩子 小结 结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配...步骤： 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中 删除之前的mask遮罩 在style中，给大的div盒子（类名叫tudou的），设置 before伪元素 这个伪元素充当的是遮罩的角色，所以我们不用设置内容...单伪元素.png 双伪元素.png 盒子模型（★★★） CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变...，当元素从一种样式变换为另一种样式时为元素添加效果。...，里层类名叫 bar_in 给外层的bar 这个盒子设置边框，宽高，圆角边框 给里层的bar_in 设置 初试的宽度，背景颜色，过渡效果 给外层的 bar 添加 hover事件，当触发了hover事件
1、无法通过选择器升序 2、垂直控制的局限性 3、没有表情 4、没有列声明 5、伪类不受动态行为的控制 6、规则，样式，无法定位特定文本 Q8、列举一些CSS框架？...从极小值0到最大值255，当所有颜色,都在最低值被显示的颜色将是黑色，当所有颜色都在他们的最大值被显示的颜色将是白色。...更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。 二、中级CSS面试题 Q16、CSS中的伪元素是什么？...3、类、属性和伪类 – 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。...选择器链的长度越短，浏览器就可以更快地确定该元素是否与选择器匹配。 例如，使用选择器p span，浏览器首先找到所有元素，然后向上遍历其父元素直到根，以找到 元素。
: 元素中字体的颜色； cursor: 鼠标移动到元素上时，鼠标的样式，cursor: pointer;表示的是一个小手的样式，这个属性还有其他属性值，在讲到CSS时会在详细的介绍这个属性； text-decoration...我们再来看下p元素的： h1元素的： 现在我们通过在控制台中向对应的元素加入或改变一些CSS属性，看元素会有什么变化： a元素： 可以看到，页面中字体的颜色变了，字体类型变了，下划线的位置变了...，是因为在渲染时，浏览器会为其加上特有的默认属性，而自己也可以通过改变元素的CSS属性来改变元素的样式。...:any-link CSS 伪类 选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 、 或 元素。...屏幕阅读器可以将其用作指引，帮助视力受损的用户导航页面。 比起搜索无休止的带有或不带有语义/命名空间类的 div，找到有意义的代码块显然容易得多。 向开发人员建议将要填充的数据类型。
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ? ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...当然改变亮度，还可以通过叠加透明层实现，这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...（这句话不是很严谨，假设一个元素背景是纯白颜色，叠加白色半透明层也是不会更亮的） 反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
Safari 支持CSS 视图过渡模块第 1 级规范，该规范增加了用于定义过渡动画的新 CSS 属性和伪元素，以及一个新的浏览器 API 来启动过渡动画并响应不同的过渡状态。...一旦状态被捕捉，一个伪元素树将被构建，可以通过 CSS 进行目标化，允许你修改用于过渡的 CSS 动画。...你还可以通过使用 CSSview-transition-name属性命名来要求浏览器独立跟踪特定元素的状态变化。然后你可以使用伪元素为其自定义动画。...例如，canvas 代表 HTML 页面的当前默认背景色，而 fieldtext 匹配表单字段内的文本颜色。完整的系统颜色列表可以在 CSS Color level 4 中找到。...现在在 visionOS 2 的 Safari 中，当使用 CSS clip-path 改变链接的可点击区域形状时，可见的交互区域也会随之改变。
这对于设置全局样式非常有用，例如设置默认字体、颜色或行高等。 需要注意的是，选择器会匹配页面上的每个元素，包括嵌套的元素。因此，在使用选择器时，你需要小心确保样式不会无意间影响到你不想改变的元素。...这对于实现一致的颜色样式非常有用，尤其是在涉及到父元素和子元素之间的继承关系时。 例如，你可以将currentColor应用于边框颜色、背景颜色或阴影颜色等属性，以确保它们与当前元素的文本颜色相匹配。...这在创建主题时特别有用，因为你可以将主题相关的颜色、字体、间距等值存储为变量，然后通过更改变量的值来轻松切换主题。...CSS变量的另一个优点是当你需要同时更改多个值时，只需更改变量的值即可，而无需逐个更改具体的样式。这提供了更方便和灵活的样式管理方式。...一些浏览器可能只支持对文本颜色和背景颜色的设置，而其他样式设置可能无效。因此，在使用::selection伪元素时，请进行充分的测试，并根据需要做必要的样式调整。
伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...当然改变亮度，还可以通过叠加透明层实现，这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...（这句话不是很严谨，假设一个元素背景是纯白颜色，叠加白色半透明层也是不会更亮的） 反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...这里 A 是什么呢？ 有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “00A”， 或简化为 “A”。
伪类与CSS伪对象的区别 CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西，根本区别在于：它们是否创造了新的抽象元素； 伪类：描述了所有逻辑上存在但在文档树中无须标识的分类； 伪对象：...代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中； 8、请简述CSS的权重规则 行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪对象选择器； 关系选择器将拆分为两个选择器再计算权重...，而link是HTML标签，无兼容问题； link方式的样式权重高于@import的权重； 当使用javascript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别...，整个网页的风格就可以改变了 缺点： 在宽屏，高分辨率的屏幕下的自适应页面，如果背景图不够宽，很容易出现背景断裂 CSS sprites 在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置...opacity 作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色 设置rgba透明的元素的子元素不会继承透明效果 26、CSS属性content有什么作用？
2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...0 个元素或者超出了元素的个数会被忽略 ) 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 区别： nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第...必须有 content 属性 before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素 伪元素选择器和标签选择器一样，权重为 1 5.CSS3 盒子模型 CSS3 中可以通过 box-sizing...7.CSS3 过渡（重点） 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果...属性 ：想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡， 写一个all 就可以。
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。...CSS2及CSS3伪类区分 CSS3伪元素单双冒号区分 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式...当然改变亮度，还可以通过叠加透明层实现，这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...（这句话不是很严谨，假设一个元素背景是纯白颜色，叠加白色半透明层也是不会更亮的） 反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
24、解决li和li之间的看不见的空白间隙问题 浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度...解释这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。...但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。...31、介绍flex布局 1）Flex布局 a、即弹性布局，当一个布局需要自适应或者，一边固定宽度，其他自适应的情况下，使用flex布局 b、当想要使用flex布局的时候，找到其父元素，给父元素的类添加display...但是，我们也要时刻牢记–带宽并不是无限的，因此在移动网页中通过 css 把一张大图缩小显示往往是不明智的。 （5）当图片（ 或其他元素 ）以行列式进行布局时，让视口的宽度来决定列的数量。
我之前写过规范，CSS的层级不要超过4级，因为CSS的选择器是从右向左匹配，比如我们有这样一个层级#content .main .box p和直接一个#title相比，前者需要找到p，然后向上找到.box...字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢，变量从局部作用域到全局作用域的搜索过程越长速度越慢，对象嵌套的越深，读取速度就越慢。...改变font-size和font-family 改变元素的内外边距 通过JS改变CSS类 通过JS获取DOM元素的位置相关属性（如width/height/left等） CSS伪类激活 滚动滚动条或者改变窗口大小...当一些外观比如颜色、背景和显示隐藏（visibility，display会引起重排）等操作会引起重绘，重绘会降低浏览器的渲染性能，重绘不可避免，但是我们还是要尽量的去少做一些引起重绘，尽量减少使用昂贵属性...善于使用事件委托，事件委托是什么我之前就写过，本人也相信能使用事件委托的事件应该不会一个一个的去赋值事件。
其原理是通过设置元素的宽度和高度为0，同时设置不同方向边框的宽度和颜色，将不需要的边框设置为透明，从而只显示出需要方向的边框，形成三角形。...清除浮动：当父元素包含浮动子元素时，如果父元素没有设置高度，且子元素都为浮动元素，那么父元素的高度会塌陷为0。...垂直居中：当需要将一个或多个元素在父容器中垂直居中时，Flex布局提供了非常简洁的方式，通过设置align - items属性为center即可实现。...伪类和伪元素有什么区别，举例说明伪类和伪元素都是CSS中用于选择元素特定状态或特定部分的机制，但它们有明显的区别：语法区别：伪类：使用一个冒号:作为前缀，紧跟在选择器后面。...伪元素：使用两个冒号::作为前缀（在CSS3中引入这种写法以区分伪类，在一些旧版本浏览器中也可使用一个冒号的写法，但不推荐），紧跟在选择器后面前端面试题，前端面试答案，前端面试汇总，前端面试攻略，JavaScript
在本教程中，我们将为和元素以及一个自定义.btn的CSS组件创建基本样式。 你会在这个过程的每一步中找到一个演示页面。...CSS组件是一种风格或样式集合，我们可以使用类来应用，通常在几种不同类型的HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中的这个概念。...悬停(hover)，焦点(focus)和活动(active)样式 很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...处理focus样式 还有一个棘手的问题。 在多个浏览器中，当您单击链接或按钮时，将应用两个伪类： :active :focus 一旦停止按下鼠标按钮或触控板，“active”伪类就会停止应用。...由于它尚未被浏览器实现，我们将不得不使用JavaScript实现，比如有些polyfill。 它在整个页面上运行，并且仅在使用键盘时才将焦点可见的类设置为接收焦点的元素。
伪元素 image.png 伪类与伪元素的区别与作用 CSS3对伪类的定义： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。...并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种： 获取不存在与DOM树中的信息。...比如通过:nth-child(odd)实现选择偶数行设置背景色，如果不是用伪类，而是用JavaScript来设置就复杂得多。通过伪类实现了常规CSS无法实现的逻辑。...display: none;是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过改变子孙节点的display属性无法改变显示状态。...css sprite是什么？有什么优缺点？ 将多个小图标he拼接到一张图片里，通过background-position和元素尺寸调节需要显示的背景图案。
伪元素和伪类的区别和作用？伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。...例如：a:hover {color: #FF00FF}p:first-child {color: red}总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。...（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？ 它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。...什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？...以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；而如果有一把尺子来实际测量这部手机的物理像素
CSS 就像网页的化妆师，它负责网页的样式和布局，让原本枯燥的 HTML 结构变得生动有趣。 一、什么是 CSS？ CSS 是一种用于描述网页呈现方式的样式表语言。...它控制着网页的布局、字体、颜色、背景、动画等等。通过 CSS，你可以将网页的内容和样式分离，使得网页更易于维护和修改。 二、如何使用 CSS？...*/ } 四、CSS 选择器优先级详解 当多个 CSS 规则应用于同一个 HTML 元素时，最终应用的样式取决于选择器的优先级。...c: 类选择器、属性选择器和伪类的数量。 d: 元素选择器和伪元素的数量。 比较两个选择器的优先级时，从左到右依次比较 a、b、c、d 的值。...button:hover 伪类选择器: 设置鼠标悬停在按钮上时的样式，改变背景颜色。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 2、后代选择器 (重要）...当标签发生嵌套时，内层标签就成为外层标签的后代。...焦点就是光标，一般情况类表单元素才能获取 例子： 复合选择器总结 三、css的显示模式 1、什么是元素的显示模式 定义： 元素显示模式就是元素（标签）以什么方式进行显示，比如通过 CSS 背景属性，可以给页面元素添加背景样式。...，盒子里面的内容不受影响 CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用 8、背景总结
云服务器
ICP备案
实时音视频
对象存储
云直播
