css八股

发布于：2024-04-25 ⋅ 阅读:(16) ⋅ 点赞:(0)
伪类，伪元素

伪类：

1.指某种特定的行为或者状态，例如鼠标悬停，点击，第一个子元素等

2.以：开头，：hover，：focus

3.伪类不会形成新的元素，只会改变原有的样式

伪元素：

1.伪元素一般用于选择器中创建新的元素，并且对他进行样式化，例如：创建新的内容，改变定位，改变样式等

2.以::双冒号开头，::before选中元素的前面添加内容，::after选中元素的后面加上内容，::first-line只能用于块级元素的第一行文本

3.伪元素在文档中生成了一个虚拟的元素，可以通过样式化该元素来实现一些特定的效果。

css的content属性有什么作用？有什么应用？

content属性用于在内容中插入一些额外的文本，图像等装饰性内容，只能用于伪元素中，不会影响真实的dom结果

#myList li::before {
  content: "\2022"; /* 使用Unicode编码创建圆点 */
  margin-right: 8px; /* 设置圆点与文本之间的间距 */
}
rem
  • rem（root em）是相对于根元素（通常是<html>元素）的字体大小进行计算的单位。
  • em是相对于其父元素的字体大小进行计算的单位。

如果一个元素的字体大小使用了em单位，并且其父元素也使用了em单位来设置字体大小，那么子元素的字体大小将会是相对于其父元素的父元素的字体大小计算的。这种嵌套的关系会导致字体大小的计算变得复杂。

盒子模型

盒子模型：content，margin，padding，border属性

怪异盒子（旧版ie）模型：content包括了padding和border属性

避免出现盒子模型的兼容性问题，可以通过在文档中添加<!DOCTYPE html>来强制浏览器使用标准的盒子模型。

重绘和回流 ( 重排) 是什么， 如何避免？

重绘指元素的样式变化，如：颜色，背景，边框等，浏览器重新绘制整个元素，不会影响元素的布局

回流指元素的布局发生变化，如：大小，间距，位置等，浏览器会重新计算元素之间的位置，导致页面重新渲染，消耗比较大

避免频繁的重绘和回流，可以采取以下几个措施：

  1. 使用 CSS3 动画来代替 JavaScript 动画：CSS3 动画利用了硬件加速，性能较好，可以减少重绘和回流的次数。
  2. 使用 transform 属性来进行动画：transform 属性不会引起回流，可以避免布局计算和页面渲染。
  3. 避免频繁使用 table 布局：table 布局在每次元素变化时都会引起回流。
  4. 避免频繁修改元素的样式：尽量将样式的修改集中在一次操作中，减少回流的次数。
  5. 使用文档片段（DocumentFragment）进行 DOM 操作：将需要频繁操作的元素使用文档片段包裹起来，进行操作后再统一插入文档，减少回流次数。
  6. 使用虚拟 DOM（virtual DOM）：虚拟 DOM 可以将多次修改合并成一次操作，最小化重绘和回流的次数。
css的硬件加速

CSS 的硬件加速是指利用 GPU（图形处理器）来加速浏览器的渲染过程，提高页面的流畅度，

GPU具有并行计算的能力，对于大量的顶点坐标变换和矩阵运算等工作非常高效。所以，当对象需要进行位置变换时，通常会在GPU上使用着色器（Shader）程序来进行变换计算。一般情况下，可以在着色器中定义变换矩阵，并使用顶点着色器将对象的顶点坐标进行变换计算，然后在后续的渲染过程中将变换后的顶点坐标传递给片元着色器进行颜色插值等处理。

总的来说，GPU在进行位置变换计算时是非常高效且适合的，能够提供流畅的图形变换和渲染效果。因此，对于图形应用程序中的对象位置变换等操作，通常会利用GPU的并行计算能力来进行计算，以提高性能和效率。

有几种方法可以触发硬件加速：

1.transform属性，实现元素的变换效果，可以对元素进行旋转、缩放、平移和倾斜等操作

2.opacity属性，设置透明度

css的阻塞怎么解决

1.将css文件放在头部，确保浏览器解析时可以尽快获取并加载css文件，避免页面的阻塞

2.使用link加载css的方法，可以将link标签引入css文件，并放在head头部中，这样可以减少对html的阻塞，因为CSS文件的下载和解析可以与HTML文档的解析过程同时进行，不会阻塞HTML的渲染。(总的来说，link引入css文件，可以边下载边解析，但是@import引入时，必须等待下载完成才会解析，所以会导致阻塞)

3.使用媒体查询加载，根据link标签内的media属性来设置特定的范围，当条件满足的时候才加载文件，这样可以延迟css文件加载的时间，避免阻塞

4.使用css预处理器来优化css文件，将css代码进行压缩合并操作等优化操作

5.使用浏览器缓存，首次加载的时候，对css的样式进行缓存，下次就可以直接从缓存中获取，无需重新的下载

link和@import

link:html方式

1.link 标签可以在页面加载时同时下载和渲染外部样式表，并且支持并行下载多个文件

2.使用<link>标签引入的外部样式表文件可以被浏览器缓存，从而优化页面的加载速度。

@import：是css方式

1.而@import语句会阻止页面的并行加载，每个@import语句会按照顺序依次加载外部样式表，并且要等到页面加载完毕了才会加载，每个样式表加载完成后才会加载下一个

2.@import语句引入的样式表没有这个缓存效果，每次都需要重新加载和解析。

行内元素 块级元素复习

行内元素（Inline Element）：

    • 行内元素通常只占据它所在的内容的宽度，不会独占一行。
    • 行内元素可以和其他行内元素在同一行显示，如果空间不够，则会被强制换行显示。
    • 行内元素不可以设置宽度、高度、上下外边距和下边距，但可以设置左右外边距和内边距。
    • 常见的行内元素有<span>、<a>、<img>、<em>等。

块级元素（Block Element）：

    • 块级元素会独占一行，即使它的宽度没有占满父级容器的宽度。
    • 块级元素可以设置宽度、高度、上下外边距和下边距，以及内边距。
    • 块级元素会在默认情况下填充父级容器的宽度。
    • 常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<li>等。

inline-block 是一种元素显示类型，它同时具备行内元素和块级元素的特性。

与行内元素相同的是，inline-block 元素可以和其他行内元素在同一行显示，并且不会独占一行。

与块级元素相同的是，inline-block 元素可以设置宽度、高度、内边距和外边距，并且默认情况下会填充父级容器的宽度。

display
  1. block：将元素显示为块级元素，独占一行。它会在前后创建额外的空白，并且可以设置宽度、高度以及其他盒子模型属性。常见的块级元素有 <div>、<p>、<h1> 等。
  2. inline：将元素显示为内联元素，不会独占一行。它会尽可能地与其他内联元素在一行显示，并且无法设置宽度、高度等盒子模型属性。常见的内联元素有 <span>、<a>、<strong> 等。
  3. inline-block：将元素显示为内联块级元素，与内联元素类似，但可以设置宽度、高度等盒子模型属性。它会尽可能地与其他内联元素在一行显示，并且可以设置宽度、高度等盒子模型属性。常见的内联块级元素有 <img>、<input> 等。
  4. none：将元素完全隐藏，不占据空间。元素及其内容都不会被渲染和显示。
  5. flex：将元素显示为弹性盒子（Flexbox）容器。它可以使用弹性盒子布局来调整其子元素的排列方式和尺寸。通过设置子元素的 flex 属性，可以实现灵活的布局效果。
  6. grid：将元素显示为网格容器（Grid）容器。它可以使用网格布局来定义复杂的二维布局。通过设置子元素的 grid 属性，可以控制子元素在网格中的位置和尺寸。
position
  1. static：默认值，元素按照正常的文档流进行定位，不受 top、right、bottom 和 left 属性的影响。它不会被其他元素覆盖或覆盖其他元素。
  2. relative：元素相对于其正常位置进行定位，可以通过设置 top、right、bottom 和 left 属性来调整其位置。相对定位不会使元素脱离文档流，其他元素仍然会根据其原始位置进行布局。如果没有设置偏移属性，则元素仍然在正常位置。
  3. absolute：元素相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于初始包含块（通常是文档的根元素）进行定位。通过设置 top、right、bottom 和 left 属性，可以将元素定位到所需的位置。绝对定位会使元素脱离文档流，其他元素不会考虑其位置而进行布局。
  4. fixed：元素相对于视口进行定位，始终保持在相同的位置，即使页面滚动。通过设置 top、right、bottom 和 left 属性，可以调整元素在视口中的位置。固定定位也会使元素脱离文档流，其他元素不会考虑其位置而进行布局。
  5. sticky：元素根据正常文档流进行定位，直到滚动到指定阈值时变为固定定位。通过设置 top、right、bottom 和 left 属性，可以调整元素在阈值之后的位置。粘性定位的行为类似于相对定位和固定定位的组合，它会在特定条件下切换定位方式。
不同设备前端适配，移动端如何兼容比如小程序，

1.进行响应式设计，例如媒体查询：通过屏幕分辨率，尺寸等相关数据，动态的使用相关的css样式来进行适配，媒体查询使得网页能够根据设备特性和特定条件，灵活地调整样式，从而提升用户体验。

2.利用flex弹性布局或者百分比布局

3.使用em代替px

4.使用移动端的适配框架

5.针对不同设备进行兼容性测试

BFC

触发 BFC，可以使得父元素包裹的子元素按照父元素的边界进行定位和布局，而不受到外部元素的影响。这样可以实现准确的相对变化，并且不会影响到其他元素的布局和定位。

例如：父元素没有高度，子元素浮动会导致父元素塌陷

子元素外边距会使父元素的塌陷的问题

父元素只要添加其中一个内容，就可以实现BFC

    1. overflow: hidden;
    2. display: flex;
    3. display: inline-flex;
    4. display: inline-block;
    5. position: absolute;
    6. position: fixed;

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布