什么是回流 和 重绘 回流 ❝ 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，浏览器首先找到所有元素，然后向上遍历其父元素直到根，以找到 元素。
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ? ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...当然改变亮度，还可以通过叠加透明层实现，这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。...（这句话不是很严谨，假设一个元素背景是纯白颜色，叠加白色半透明层也是不会更亮的） 反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
: 元素中字体的颜色； cursor: 鼠标移动到元素上时，鼠标的样式，cursor: pointer;表示的是一个小手的样式，这个属性还有其他属性值，在讲到CSS时会在详细的介绍这个属性； text-decoration...我们再来看下p元素的： h1元素的： 现在我们通过在控制台中向对应的元素加入或改变一些CSS属性，看元素会有什么变化： a元素： 可以看到，页面中字体的颜色变了，字体类型变了，下划线的位置变了...，是因为在渲染时，浏览器会为其加上特有的默认属性，而自己也可以通过改变元素的CSS属性来改变元素的样式。...:any-link CSS 伪类 选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 、 或 元素。...屏幕阅读器可以将其用作指引，帮助视力受损的用户导航页面。 比起搜索无休止的带有或不带有语义/命名空间类的 div，找到有意义的代码块显然容易得多。 向开发人员建议将要填充的数据类型。
这对于设置全局样式非常有用，例如设置默认字体、颜色或行高等。 需要注意的是，选择器会匹配页面上的每个元素，包括嵌套的元素。因此，在使用选择器时，你需要小心确保样式不会无意间影响到你不想改变的元素。...这对于实现一致的颜色样式非常有用，尤其是在涉及到父元素和子元素之间的继承关系时。 例如，你可以将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) 可以得到一个更暗的颜色。...那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？ 这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。
我之前写过规范，CSS的层级不要超过4级，因为CSS的选择器是从右向左匹配，比如我们有这样一个层级#content .main .box p和直接一个#title相比，前者需要找到p，然后向上找到.box...字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢，变量从局部作用域到全局作用域的搜索过程越长速度越慢，对象嵌套的越深，读取速度就越慢。...改变font-size和font-family 改变元素的内外边距 通过JS改变CSS类 通过JS获取DOM元素的位置相关属性（如width/height/left等） CSS伪类激活 滚动滚动条或者改变窗口大小...当一些外观比如颜色、背景和显示隐藏（visibility，display会引起重排）等操作会引起重绘，重绘会降低浏览器的渲染性能，重绘不可避免，但是我们还是要尽量的去少做一些引起重绘，尽量减少使用昂贵属性...善于使用事件委托，事件委托是什么我之前就写过，本人也相信能使用事件委托的事件应该不会一个一个的去赋值事件。
伪元素 image.png 伪类与伪元素的区别与作用 CSS3对伪类的定义： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。...并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种： 获取不存在与DOM树中的信息。...比如通过:nth-child(odd)实现选择偶数行设置背景色，如果不是用伪类，而是用JavaScript来设置就复杂得多。通过伪类实现了常规CSS无法实现的逻辑。...display: none;是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过改变子孙节点的display属性无法改变显示状态。...css sprite是什么？有什么优缺点？ 将多个小图标he拼接到一张图片里，通过background-position和元素尺寸调节需要显示的背景图案。
在本教程中，我们将为和元素以及一个自定义.btn的CSS组件创建基本样式。 你会在这个过程的每一步中找到一个演示页面。...CSS组件是一种风格或样式集合，我们可以使用类来应用，通常在几种不同类型的HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中的这个概念。...悬停(hover)，焦点(focus)和活动(active)样式 很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...处理focus样式 还有一个棘手的问题。 在多个浏览器中，当您单击链接或按钮时，将应用两个伪类： :active :focus 一旦停止按下鼠标按钮或触控板，“active”伪类就会停止应用。...由于它尚未被浏览器实现，我们将不得不使用JavaScript实现，比如有些polyfill。 它在整个页面上运行，并且仅在使用键盘时才将焦点可见的类设置为接收焦点的元素。
伪元素和伪类的区别和作用？伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。...例如：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 就会填满手机的宽度；而如果有一把尺子来实际测量这部手机的物理像素
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 2、后代选择器 (重要）...当标签发生嵌套时，内层标签就成为外层标签的后代。...焦点就是光标，一般情况类表单元素才能获取 例子： 复合选择器总结 三、css的显示模式 1、什么是元素的显示模式 定义： 元素显示模式就是元素（标签）以什么方式进行显示，比如<div...通过 CSS 背景属性，可以给页面元素添加背景样式。...，盒子里面的内容不受影响 CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用 8、背景总结
通常情况下，作者样式具有最高的重要性，其次是用户样式，最后才是浏览器样式，但是如果出现了 !important 标记的话，那么规则会被改变，通过 !...现在，浏览器找到与选择器匹配的所有 DOM 元素，并将得到的计算样式挂载到匹配的元素，在本例中 div 为类名为 .fancy-button： ?...，它告诉浏览器在用户悬停在按钮上时更改按钮的背景和文本颜色。...这就引出了一个问题，浏览器如何处理这个问题? 浏览器不断跟踪各种输入，当这些输入正在移动时，它会经历称为命中测试的过程。 对于此示例，该过程如下所示： ? 用户将鼠标移到按钮上。...浏览器会问这个问题:“既然有鼠标在你上方盘旋，我应该做什么?”。 它快速运行此框及其子框的样式/级联，并确定:hover 在声明块内部有一个仅使用绘制样式调整的伪类。
伪类和伪元素 首先我们需要搞懂两个概念，伪类和伪元素，像我这种没有系统全面性的了解过css的人来说，突然一问我伪类和伪元素的区别我还真不知道，我之前一直以为这两个说法指的是一个东西，就是我题目中的提到的那两个...向我们常用到的:link、:hover、:active、:first-child等都是伪类，全部伪类比较多，大家感兴趣的话可以去官方文档了解一下 伪元素 至于伪元素，w3cSchool的定义是”CSS...当然这个低版本浏览器的兼容性我木有试，谷歌浏览器和safari是可以实现不能选中不可搜索的效果的。...拿上面的示例进行尝试，可以看到，我们使用伪元素添加的[问题]两个字，就无法使用浏览器的搜索工具搜到。...首先是创建两个伪元素，宽高都和目标元素一致，我这里的背景色由于是对按钮本身颜色进行处理得来的，所以给他们设置的背景色是沿用父级背景色，如果你想单独设置这里可以分别设置为自己想要的颜色。
（中等) 主导航栏里面的一级菜单链接文字颜色为绿色。（难) 伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。...伪娘 类 .one 伪类 :link 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器...对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...height 设置播放窗口的高度 由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考 多浏览器支持的方案，如下图**** CSS3 新增选择器 结构(位置)伪类选择器（CSS3)
CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。 ...30px; } 2.2 CSS伪类与伪元素 状态是动态变化的，当一个元素到达一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。 ...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ...对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
