【CSS CSS3】前端八股文面试题

CSS部分

更新日志

• 2024年9月5日 —— 盒子模型
  

  文章目录

  • CSS部分
  • • 更新日志
    • • 1.如何避免全局样式污染？
      • • • 1）使用命名空间
          • 2）使用 CSS Modules
          • 3）使用 BEM 命名规范
          • 4）使用 CSS-in-JS
          • 5）使用 Shadow DOM
          • 6）使用 scoped 属性（仅限 Vue.js）
          • 7）使用 CSS 预处理器
      • 2.CSS3新增的特性有哪些？
      • • • 1）选择器
          • 2）边框和背景
          • 3）文本效果
          • 4）2D/3D 转换
          • 5）过渡和动画
          • 6）多列布局
          • 7）弹性盒子布局（Flexbox）
          • 8）网格布局（Grid）
          • 9）媒体查询
          • 10）用户界面
          • 11）其他
      • 3.样式穿透有哪几种？
      • • • 1）`!important` 声明：
          • 2）深度选择器（Deep Selector）：
          • 3）全局样式：
          • 4）自定义属性：
      • 4.清除浮动的几种方式？
      • • • 1）使用空元素并设置 `clear: both` 属性：
          • 2）使用 `overflow` 属性：
          • 3）伪元素清除浮动：
      • 5.关于fix定位
      • 6.css属性继承的几种方式
      • • • 1）字体相关属性。
          • 2）文本相关属性。
          • 3）列表相关属性。
      • 7.选择器的权重
      • 8.display，visibility的区别
      • • • 1）显示效果：
          • 2）继承性：
          • 3）动画过渡：
          • 4）计数器是否正常运行：
          • 5）`display:none;` 引起页面重绘和回流， `visiblity:hidden;` 只引起页面重绘：
      • 9.如何使用 Grid 布局实现两列布局？
      • 10.position:relative，元素会不会占用原来的空间?
      • 11.position定位的几种属性值：static、relative、absolute、fixed
      • • • 1） static （静态定位）：
          • 2）relative （相对定位）：
          • 3）absolute （绝对定位）：
          • 4）fixed （固定定位）：
      • 12.如何实现隐藏元素不可见?
      • • • 1）`display: none;`
          • 2）`visibility: hidden;`
          • 3）`opacity: 0;`
          • 4）`position: absolute; left: -9999px;` 或 `position: absolute; top: -9999px;`
      • 13.display:block 和 inline-block、inline-block 区别
      • • • 1）`display:inline;`：使元素变成行内元素（内联），拥有行内元素的特性。
          • 2）`display:block;`： 使元素变成块级元素，拥有块级的特性。
          • 3）`display:inline-block;`： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素）。
      • 14.CSS 优化、提高性能的方法有哪些？
      • • • 1）压缩 CSS 文件
          • 2）使用 CSS 预处理器
          • 3）合并 CSS 文件
          • 4）使用关键 CSS
          • 5）避免使用 @import
          • 6）优化选择器
          • 7）使用 CSS 动画代替 JavaScript 动画
          • 8）避免使用 CSS 表达式
          • 9）使用媒体查询
          • 10）避免使用 !important
          • 11）使用 CSS 变量
          • 12）使用 Flexbox 和 Grid
      • 15. transition 和 animation 的属性分别有哪些？
      • • • 1）Transition 属性
          • 2）Animation 属性
      • 16. ::before 和 ::after 中双冒号和单冒号有什么区别、作用？
      • • • 1）语法历史：
          • 2）兼容性：
          • 3）作用：
      • 17.怎么做移动端的样式适配？
      • • • 1） 使用响应式设计
          • 2）使用视口单位
          • 3）弹性布局和网格布局
          • 4）使用 meta 标签设置视口
          • 5）图片和媒体元素的适配
          • 6）移动优先设计
          • 7）测试和优化
          • 8）使用框架与工具
          • 9）动态加载样式
          • 10）避免固定宽度
      • 18.CSS 加载会造成阻塞吗？
      • • • 1）渲染阻塞
          • 2）护航 CSS（Critical CSS）
          • 3）避免 CSS 阻塞的方法
      • 19. CSS中的 BFC, IFC,GFC 和 FFC 分别指什么？
      • • • 1）BFC（Block Formatting Context）
          • 2）IFC（Inline Formatting Context）
          • 3）GFC（Grid Formatting Context）
          • 4）FFC（Flex Formatting Context）
      • 20.前端实现动画有哪些方式？
      • • • 1）CSS 动画
          • 2）JavaScript 动画
          • 3）SVG 动画
          • 4）Canvas 动画
          • 5）CSS 动画库
          • 6）3D 动画
          • 7）CSS 变换
      • 21.盒子模型
      • • • 1）组成部分
          • 2）盒模型的类型
          • 3）盒模型的应用

1.如何避免全局样式污染？

避免全局样式污染是前端开发中的一个重要问题，尤其是在大型项目中。全局样式污染可能导致样式冲突、难以维护和调试。

以下是一些常用的方法来避免全局样式污染：

1）使用命名空间

为 CSS 类名添加前缀，以避免与其他库或组件的类名冲突。

.my-component {
  /* 样式 */
}

.my-component .header {
  /* 样式 */
}

2）使用 CSS Modules

CSS Modules 是一种模块化和组合 CSS 的方法，它自动为每个类名生成唯一的名称，从而避免全局命名冲突。

/* styles.module.css */
.header {
  font-size: 20px;
}

/*jsx code*/
import styles from './styles.module.css';

const MyComponent = () => (
  <div className={styles.header}>
    Header
  </div>
);

3）使用 BEM 命名规范

BEM（Block Element Modifier）是一种命名约定，旨在帮助开发者创建可重用和可维护的组件。

.block {
  /* 样式 */
}

.block__element {
  /* 样式 */
}

.block--modifier {
  /* 样式 */
}

4）使用 CSS-in-JS

CSS-in-JS 库（如 styled-components、emotion）允许在 JavaScript 中编写 CSS，这样可以避免全局命名冲突。

import styled from 'styled-components';

const Header = styled.h1`
  font-size: 20px;
`;

const MyComponent = () => (
  <Header>
    Header
  </Header>
);

5）使用 Shadow DOM

Shadow DOM 允许创建一个隔离的 DOM 树，其中的样式不会影响到外部文档。

<div id="my-component"></div>
<script>
  const host = document.getElementById('my-component');
  const shadow = host.attachShadow({mode: 'open'});
  shadow.innerHTML = `
    <style>
      .header {
        font-size: 20px;
      }
    </style>
    <div class="header">Header</div>
  `;
</script>

6）使用 scoped 属性（仅限 Vue.js）

在 Vue.js 中，可以使用 scoped 属性来限制样式的作用范围。

<template>
  <div class="header">Header</div>
</template>

<style scoped>
.header {
  font-size: 20px;
}
</style>

7）使用 CSS 预处理器

使用 CSS 预处理器（如 Sass、Less、Stylus）可以帮助更好地组织和管理样式，减少全局污染的风险。

.my-component {
  .header {
    font-size: 20px;
  }
}

2.CSS3新增的特性有哪些？

CSS3 引入了许多新特性，极大地增强了 CSS 的功能和表现力。以下是一些主要的 CSS3 新增特性：

1）选择器

CSS3 引入了一些新的选择器，使得选择元素更加灵活和强大。

• 属性选择器：

[attr^=value], 
[attr$=value], 
[attr*=value]

• 伪类：

:nth-child(), 
:nth-last-child(), 
:nth-of-type(), 
:nth-last-of-type(), 
:last-child, 
:first-of-type, 
:last-of-type, 
:only-child, 
:only-of-type, 
:empty, 
:not()

2）边框和背景

• 圆角边框：border-radius
• 阴影：box-shadow
• 背景渐变：linear-gradient(), radial-gradient()
• 多重背景：background 属性可以设置多个背景图像

3）文本效果

• 文本阴影：text-shadow
• 文本溢出：text-overflow
• 自定义字体：@font-face

4）2D/3D 转换

• 2D 转换：transform 属性，支持 translate(), rotate(), scale(), skew()
• 3D 转换：transform 属性，支持 translate3d(), rotate3d(), scale3d()

5）过渡和动画

• 过渡：transition 属性，支持 transition-property, transition-duration, transition-timing-function, transition-delay
• 动画：@keyframes, animation 属性，支持 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

6）多列布局

• 多列布局：column-count,column-width, column-gap, column-rule

7）弹性盒子布局（Flexbox）

• Flexbox：display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, flex-grow, flex-shrink, flex-basis, order, align-self

8）网格布局（Grid）

• Grid 布局：display: grid, grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, grid-area, grid-template-areas

9）媒体查询

• 媒体查询：@media 规则，允许根据设备特性（如屏幕宽度、分辨率等）应用不同的样式

10）用户界面

• 自定义滚动条：::-webkit-scrollbar
• resize属性：允许用户调整元素大小
• box-sizing属性：控制元素的盒模型

11）其他

• 滤镜：filter 属性，支持 blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()
• 混合模式：mix-blend-mode, background-blend-mode

【注意】由于不同浏览器对这些特性的支持程度不同，使用时需要注意兼容性问题。

3.样式穿透有哪几种？

1）!important 声明：

通过在样式属性值后添加 !important 来强制覆盖其他样式声明。但过度使用可能导致样式难以维护。

2）深度选择器（Deep Selector）：

在某些前端框架（如 Vue）中，可以使用 /deep/ 或 ::v-deep 来实现样式穿透。

选择器1 >>> 选择器2

<!-- 这种写法 /deep/ 下面可能会有红线，但是依然生效 -->
/deep/ 选择器

::v-deep {
  写选择器  
}

<!-- ::v-deep与选择器之间有无空格都能生效 -->
::v-deep选择器 {}

:deep() {
    选择器
}

3）全局样式：

将样式定义为全局样式，这样可以影响到应用中的多个组件，但可能会影响到不期望的地方，需要谨慎使用。

4）自定义属性：

通过自定义属性来传递样式值，然后在需要的地方使用。

4.清除浮动的几种方式？

1）使用空元素并设置 clear: both 属性：

在浮动元素后面添加一个空的 div 元素，并设置其 clear: both 属性。

<div style="float: left;">浮动元素 1</div>
<div style="float: right;">浮动元素 2</div>
<div style="clear: both;"></div>

2）使用 overflow 属性：

为父元素设置 overflow: auto 或 overflow: hidden 。

.parent {
 		 overflow: auto;
}

3）伪元素清除浮动：

使用 :after 伪元素来清除浮动。

.parent:after {
 		 content: "";
  		display: block;
  		clear: both;
}

5.关于fix定位

fixed 定位：一种固定定位方式，元素会相对于浏览器窗口进行定位，不会随页面滚动而移动。
使用 fixed 定位的元素，可以通过设置 top 、 bottom 、 left 、 right 等属性来确定其在浏览器窗口中的位置。

6.css属性继承的几种方式

CSS 属性继承：指某些 CSS 属性会自动从父元素继承到子元素。

以下是一些常见的 CSS 属性继承方式：

1）字体相关属性。

如 font-family 、 font-size 、 font-weight 、 font-style 等。

2）文本相关属性。

如 color 、 text-align 、 text-indent 、 line-height 等。

3）列表相关属性。

如 list-style-type 、 list-style-position 等。

【注意】并不是所有的 CSS 属性都可以继承，一些属性如 border 、 margin 、 padding 等是不会继承的。此外，继承的属性值可能会受到子元素自身样式的覆盖。

7.选择器的权重

在 CSS 中，选择器的权重决定了样式的优先级。

选择器的权重计算规则如下：

选择器	内联样式	id 选择器	类选择器、属性选择器、伪类选择器	元素选择器、伪元素选择器
说明	在 HTML 元素的 style 属性中定义的样式	#idName	.类选择器名；标签元素[该元素拥有的属性]；:伪类选择器	标签元素名; ::伪元素选择器
权重值	1000，具有最高权重	100	10	1

【注意】当多个样式规则应用于同一个元素并且存在冲突时，具有更高权重的选择器定义的样式将被应用。
如果权重相同，则后面定义的样式会覆盖前面的样式。

在这里，我给大家举一个例子：

<div class="myClass" id="myId" style="color: black;">这是一个例子</div>

<style>
/* 权重：1 */
div {
  color: red;
}

/* 权重：10 */
.myClass {
  color: blue;
}

/* 权重：100 */
#myId {
  color: green;
}
</style>

在上述示例中，最终这个 div 元素的文字颜色将是黑色，因为内联样式的权重最高。

8.display，visibility的区别

display 和 visibility 都是 CSS 属性，用于控制元素的可见性。

以下是它们的主要区别：

1）显示效果：

• display: none; 会完全隐藏元素，并且该元素在页面布局中不再占据空间，就好像它不存在一样。
• visibility: hidden; 会隐藏元素，但该元素在页面布局中仍然占据原来的空间。

2）继承性：

• display 属性不具有继承性。
• visibility 属性具有继承性，如果父元素设置为 visibility: hidden; ，子元素也会被隐藏，除非子元素单独设置了 visibility: visible;

3）动画过渡：

• 对于 display 属性，直接在 none 和其他值之间切换通常不会产生平滑的过渡效果，除非使用特定的技术（如结合 JavaScript 实现）。
• 对于 visibility 属性，可以通过 CSS 过渡来实现平滑的隐藏和显示效果。

4）计数器是否正常运行：

• display:none； 影响计数器的计数，计数器重新排列
• visibility: hidden;不会影响计数器的计数，其计数器仍在运行

5）display:none; 引起页面重绘和回流， visiblity:hidden; 只引起页面重绘：

• display:none;是会有回流，HTML元素的宽度、高度等各种属性值都将丢失
• visibility: hidden;不会有回流，HTML元素仅仅是在视觉上看不见，而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值

display 更侧重于完全控制元素的显示与否以及对页面布局的影响；
visibility 则更侧重于控制元素的可见性但保持其在布局中的占位。

9.如何使用 Grid 布局实现两列布局？

通过 grid-template-columns: 1fr 1fr; 定义了两列，每列的宽度为 1fr （等分剩余空间）， gap: 10px; 则设置了列之间的间距。

<div class="container">
  <div class="left-column">
    <h2>左列内容</h2>
    <p>这是左列的一些文字。</p >
  </div>
  <div class="right-column">
    <h2>右列内容</h2>
    <p>这是右列的一些文字。</p >
  </div>
</div>

<style>
  .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }

  .left-column {
     background-color: lightblue;
   }

  .right-column {
     background-color: lightcoral;
   }
</style>

10.position:relative，元素会不会占用原来的空间?

当一个元素的 position 属性设置为 relative 时，它仍然会占用在文档流中原本的空间。

relative 定位只是相对于其在正常文档流中的位置进行偏移，不会改变其对其他元素的布局影响。

11.position定位的几种属性值：static、relative、absolute、fixed

1） static （静态定位）：

• 默认的定位方式。
• 元素按照正常的文档流进行布局，不会受到 top 、 bottom、 left 、 right 等属性的影响。

.static-element {
  position: static;
}

2）relative （相对定位）：

• 元素相对于其在正常文档流中的原始位置进行定位。
• 通过设置 top 、 bottom 、 left 、 right 属性，可以相对于原始位置进行偏移
• 不会脱离文档流，原本占据的空间仍然保留。

.relative-element {
  position: relative;
  top: 20px;
  left: 20px;
}

3）absolute （绝对定位）：

• 元素相对于其最近的已定位祖先元素（非 static 定位）进行定位。
• 如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是 <html> 元素）进行定位。
• 绝对定位的元素会脱离文档流，不占据原来的空间。

.absolute-element {
  position: absolute;
  top: 50px;
  right: 50px;
}

4）fixed （固定定位）：

• 元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也保持不变。
• 固定定位的元素会脱离文档流。

.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

12.如何实现隐藏元素不可见?

在 CSS 中，以下几种常见的方式可以隐藏元素使其不可见：

1）display: none;

元素完全从文档流中移除，不占据任何空间，也不会被显示。

2）visibility: hidden;

元素被隐藏，但仍占据文档流中的空间。

3）opacity: 0;

元素透明度设置为 0，看起来不可见，但仍然占据空间并且可以响应鼠标事件。

4）position: absolute; left: -9999px; 或 position: absolute; top: -9999px;

通过将元素定位到远离可视区域来实现隐藏。

13.display:block 和 inline-block、inline-block 区别

1）display:inline;：使元素变成行内元素（内联），拥有行内元素的特性。

• 与其他行内元素共享一行；
• 不能修改width、height属性，大小由内容撑开；
• padding属性 top、right、bottom、left设置都有效；
• margin属性只有left、right设置有效。

2）display:block;： 使元素变成块级元素，拥有块级的特性。

• 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度；
• 可以修改width、height属性；
• padding、margin四个方向的值设置均有效。

3）display:inline-block;： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素）。

• 与其他行内元素共享一行；
• 可以修改width、height属性；
• padding、margin四个方向的值设置均有效

【注意】当多个inline-block的元素写在一起时，是否换行效果不同（换行后两者中间会有间距），如img、button标签，这也是代码经过压缩后效果与开发版本不同的原因之一，解决方案是去除换行。

14.CSS 优化、提高性能的方法有哪些？

1）压缩 CSS 文件

通过删除不必要的字符（如空格、注释、换行）来减小 CSS 文件的大小。

#使用工具如 UglifyCSS 或 CleanCSS
uglifycss style.css > style.min.css

2）使用 CSS 预处理器

CSS 预处理器（如 Sass、Less、Stylus）可以帮助我们编写更简洁、可维护的代码，并且可以自动压缩输出文件。

#使用 Sass
sass input.scss output.css --style compressed

3）合并 CSS 文件

将多个 CSS 文件合并成一个文件，减少 HTTP 请求次数。

<!-- 合并前 -->
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

<!-- 合并后 -->
<link rel="stylesheet" href="combined.css">

4）使用关键 CSS

将首次渲染所需的样式（关键 CSS）内联到 HTML 中，减少渲染阻塞。

<style>
  /* 关键 CSS */
  body {
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: #fff;
  }
</style>
<link rel="stylesheet" href="main.css">

5）避免使用 @import

@import 会导致额外的 HTTP 请求和延迟加载，建议使用 <link> 标签。

<!-- 不推荐 -->
<style>
  @import url('style.css');
</style>

<!-- 推荐 -->
<link rel="stylesheet" href="style.css">

6）优化选择器

避免过于复杂的选择器，因为它们会增加浏览器匹配元素的时间。

/* 不推荐 */
.container .header .title {
  font-size: 20px;
}

/* 推荐 */
.title {
  font-size: 20px;
}

7）使用 CSS 动画代替 JavaScript 动画

CSS 动画通常比 JavaScript 动画性能更好，特别是在移动设备上。

/* 使用 CSS 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s;
}

8）避免使用 CSS 表达式

CSS 表达式（如 expression()）在 IE 中会导致性能问题，应尽量避免。

9）使用媒体查询

将特定设备的样式分离到不同的文件中，并使用媒体查询加载。

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">

10）避免使用 !important

!important 会破坏 CSS 的优先级规则，导致难以调试和维护。

11）使用 CSS 变量

CSS 变量（自定义属性）可以提高代码的可维护性和可读性。

:root {
  --main-color: #3498db;
}

body {
  background-color: var(--main-color);
}

12）使用 Flexbox 和 Grid

Flexbox 和 Grid 布局比传统的浮动和定位更高效，可以减少布局的复杂性。

/* 使用 Flexbox */
.container {
  display: flex;
}

/* 使用 Grid */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

15. transition 和 animation 的属性分别有哪些？

transition 和 animation 是 CSS 中用于创建动画效果的两个重要属性。

1）Transition 属性

transition 属性允许在元素的样式属性发生变化时，平滑地过渡到新的样式。

以下是与 transition 相关的主要属性：

• transition-property：指定应用过渡效果的 CSS 属性。
  默认值是 all，表示所有可过渡的属性都会应用过渡效果。

transition-property: background-color;

• transition-duration：指定过渡效果的持续时间。
  单位可以是秒（s）或毫秒（ms）。

transition-duration: 0.5s;

• transition-timing-function：指定过渡效果的速度曲线。
  常见的值包括 ease、linear、ease-in、ease-out、ease-in-out 和 cubic-bezier 函数。

transition-timing-function: ease-in-out;

• transition-delay：指定过渡效果开始前的延迟时间。
  单位可以是秒（s）或毫秒（ms）。

transition-delay: 1s;

• transition：是上述四个属性的简写形式，顺序通常是 transition-property、transition-duration、transition-timing-function 和 transition-delay。

transition: background-color 0.5s ease-in-out 1s;

2）Animation 属性

animation 属性允许创建更复杂的动画效果，包括多个关键帧和循环控制。

以下是与 animation 相关的主要属性：

• animation-name：指定应用的动画名称，对应于 @keyframes 规则中定义的动画。

animation-name: myAnimation;

• animation-duration：指定动画的持续时间，单位可以是秒（s）或毫秒（ms）。

animation-duration: 2s;

• animation-timing-function：指定动画的速度曲线，与 transition-timing-function 类似。

animation-timing-function: ease-in-out;

• animation-delay：指定动画开始前的延迟时间，单位可以是秒（s）或毫秒（ms）。

animation-delay: 1s;

• animation-iteration-count：指定动画的播放次数，可以是具体的数字或 infinite 表示无限循环。

animation-iteration-count: 3;

• animation-direction：指定动画的播放方向，可以是 normal、reverse、alternate 或 alternate-reverse。

animation-direction: alternate;

• animation-fill-mode：指定动画在播放前和播放后应用的样式，可以是 none、forwards、backwards 或 both。

animation-fill-mode: forwards;

• animation-play-state：指定动画的播放状态，可以是 running 或 paused。

animation-play-state: paused;

• animation：是上述属性的简写形式，顺序通常是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode 和 animation-play-state。

animation: myAnimation 2s ease-in-out 1s 3 alternate forwards;

• 关键帧 @keyframes
@keyframes 规则用于定义动画的关键帧，是 animation 属性的核心部分。

@keyframes myAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

或者使用百分比定义：

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

16. ::before 和 ::after 中双冒号和单冒号有什么区别、作用？

在 CSS中，::before 和 ::after 是伪元素，用于在选定元素内容的前面或后面插入内容。

单冒号与双冒号的区别

1）语法历史：

• 单冒号（:）用于 CSS 中的伪类选择器（如 :hover, :focus 等），以及伪元素（如 :before, :after）。
• 双冒号（::）是在 CSS3 中引入的，主要用于区分伪类和伪元素。为了与伪类选择器（如 :hover）明确区分，CSS3 推荐使用双冒号表示伪元素（如 ::before 和 ::after）。

2）兼容性：

• 这两种语法在现代浏览器中都被广泛支持。
• 使用双冒号是符合 CSS3 规范的做法，但为了兼容旧版浏览器（如 IE8 及之前版本），一些开发者仍然使用单冒号。

3）作用：

• ::before: 用于在选定元素的内容之前插入文本或元素。

.example::before {
    content: "前面插入的内容";
}

• ::after: 用于在选定元素的内容之后插入文本或元素。

.example::after {
    content: "后面插入的内容";
}

在下面的示例中，“前缀”和“后缀”会分别插入到段落文本的两端，样式和内容的插入均不影响元素的实际内容。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <style>
        .example::before {
            content: "前缀 ";
            color: red;
        }
        .example::after {
            content: " 后缀";
            color: blue;
        }
    </style>
</head>
<body>
    <p class="example">这是一个示例段落。</p>
</body>
</html>

总结

• 区别：
  • 双冒号（::）是 CSS3 对伪元素的特别标识
  • 用于与伪类（单冒号 :）进行区分。
• 兼容性:
  • 在现代浏览器中，两者都可以使用，但建议使用双冒号以符合最新标准。
• 用途: ::before 和 ::after
  • 允许在元素内容前后动态插入内容
  • 适用于丰富网页的视觉效果和排版。

17.怎么做移动端的样式适配？

1） 使用响应式设计

媒体查询: 利用 CSS 媒体查询根据视口大小应用不同的样式。

/* 默认样式 - 为桌面设备设计 */
body {
    font-size: 16px;
}

/* 手机设备样式 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* 更小的手机设备样式 */
@media (max-width: 400px) {
    body {
        font-size: 12px;
    }
}

2）使用视口单位

视口单位: 使用 vw（视口宽度）和 vh（视口高度）来设置元素的宽度和高度，使其能够随视口大小缩放。

.container {
    width: 100vw;
    height: 50vh;
}

3）弹性布局和网格布局

• Flexbox: 利用 Flexbox 创建自适应布局，方便响应式设计。

.flex-container {
    display: flex;
    flex-direction: column; /* 或 row */
}

.flex-item {
    flex: 1; /* 使每个项目具有相同的大小 */
}

• Grid: 使用 CSS Grid Layout 创建复杂的响应式布局。

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

4）使用 meta 标签设置视口

在 HTML 的 <head> 中加入视口的设置，使得页面能够根据设备的宽度进行缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5）图片和媒体元素的适配

使用 CSS 设置图片为响应式，可以确保图片自适应父容器的宽度。

img {
    max-width: 100%;
    height: auto; /* 保持宽高比 */
}

6）移动优先设计

从最小屏幕开始设计（移动设备），然后使用媒体查询逐步增强样式（Tablet、Desktop）。

7）测试和优化

在多个设备上进行测试，确保布局和样式在不同屏幕尺寸上都表现良好。
使用 Chrome 的开发者工具模拟不同的设备视口，以查看和调整样式。

8）使用框架与工具

• CSS 框架: 使用 Bootstrap、Foundation 等 CSS 框架，这些框架内置了响应式设计的组件。
• CSS 预处理器: 使用 Sass 或 LESS 等工具，可以更好地管理和组织媒体查询和响应式样式。

9）动态加载样式

根据设备类型动态加载样式文件。例如，在移动设备上加载简化版的样式表。

10）避免固定宽度

尽量避免使用固定宽度的布局，例如 px，而使用相对单位如 %、rem 或 em 来使布局更具适应性。

18.CSS 加载会造成阻塞吗？

CSS 文件的加载确实会造成阻塞。

具体来说，这种阻塞主要体现在以下几个方面：

1）渲染阻塞

• 当浏览器加载静态资源（如 CSS、JavaScript 和图片）时，它会按照顺序处理这些请求。
• 在加载和解析 CSS 文件时，浏览器会对页面的渲染过程进行阻塞，直到 CSS 完全加载并解析完毕。
• 这意味着在 CSS 加载完之前，浏览器不会渲染任何内容，从而可能导致用户在页面响应前看到一个空白或未格式化的页面。

2）护航 CSS（Critical CSS）

• 关键 CSS: 为了提高页面的加载速度，尤其是在用户首次访问时，可以将最重要的 CSS（通常是 above-the-fold 部分的样式）直接内嵌在 HTML 中。
• 页面在初次加载时就可以快速渲染出核心内容，减少等待时间。

<style>
    /* 关键 CSS 示例 */
    body {
        font-family: Arial, sans-serif;
        background-color: #fff;
    }
    /* 其他重要样式 */
</style>

3）避免 CSS 阻塞的方法

为了减少 CSS 加载对渲染的阻塞，可以考虑以下方法：

• 异步加载 CSS:
  • 使用 rel="preload" 属性可以让浏览器在会话期间提前加载 CSS 文件，尽管这仍然会阻塞渲染。
  • 使用 JavaScript 来动态加载 CSS 文件。

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

• 分割 CSS:
  • 根据页面的需求，分割 CSS 文件。
  • 将关键 CSS 内嵌在 HTML 中，而后台的 CSS 文件可以通过异步加载。
• 使用媒体查询:
  • 对于某些不必要的样式，只在特定条件下使用媒体查询加载它们，例如，只在打印时加载的样式。

<link rel="stylesheet" href="print.css" media="print">

• 延迟加载（Lazy Load）: 对于非核心的 CSS，将其放置于页面底部，或者使用 JavaScript 延迟加载，以便让主要内容优先加载。

19. CSS中的 BFC, IFC,GFC 和 FFC 分别指什么？

1）BFC（Block Formatting Context）

BFC 是块级格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

• 创建 BFC 的方式：
  • 根元素：<html>
  • 浮动元素：float 不为 none
  • 绝对定位元素：position 为 absolute 或 fixed
  • 行内块元素：display 为 inline-block
  • 表格单元素：display 为 table-cell，HTML 表格单元格默认为该值
  • 表格标题：display 为 table-caption，HTML 表格标题默认为该值
  • 匿名表格单元格元素：display 为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认值）或 inline-table
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性盒子：display 为 flex 或 inline-flex 的元素
  • 网格容器：display 为 grid 或 inline-grid 的元素
• BFC 的特性：
  • 内部的 Box 会在垂直方向，一个接一个地放置。
  • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
  • 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
  • BFC 的区域不会与 float box 重叠。
  • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算 BFC 的高度时，浮动元素也参与计算。

2）IFC（Inline Formatting Context）

IFC 是行内格式化上下文，它是在行内级内容（如文本、行内元素和行内块元素）中创建的布局上下文。

• 创建 IFC 的方式：
  当块容器不包含任何块级盒子时，就会创建 IFC。
• IFC 的特性：
  • 在 IFC 中，盒子一个接一个地水平排列，起点是包含块的顶部。水平 margin、border 和 padding 在盒子之间得到保留。
  • 这些盒子之间的垂直对齐可能基于它们的顶部或底部对齐，或者基于它们内容的基线。
  • 当一行中的盒子总宽度小于包含块的宽度时，它们在行中的水平分布由 text-align 属性决定。
  • 当一个行内盒子超过包含块的宽度时，它会被分割成多个盒子，并且这些盒子会分布在多个行中。
  • 如果一个行内盒子不能被分割（例如，行内盒子包含的是一个单个字符，或者特定语言的文本换行规则不允许在该处换行，或者行内盒子受到了 white-space 属性的 nowrap 或 pre 值的影响），那么这个行内盒子将会从包含块中溢出。

3）GFC（Grid Formatting Context）

GFC 是网格布局格式化上下文，它是在使用 CSS 网格布局时创建的布局上下文。

• 创建 GFC 的方式：
  当一个元素的 display 属性设置为 grid 或 inline-grid 时，该元素会创建一个 GFC。
• GFC 的特性：
  • 网格容器为其内容建立了一个新的网格格式化上下文。
  • 网格容器内的子元素按照网格布局规则进行排列。
  • 网格布局提供了强大的布局控制能力，可以精确地控制子元素的位置和大小。

4）FFC（Flex Formatting Context）

FFC 是弹性盒子布局格式化上下文，它是在使用 CSS 弹性盒子布局时创建的布局上下文。

• 创建 FFC 的方式：
  当一个元素的 display 属性设置为 flex 或 inline-flex 时，该元素会创建一个 FFC。
• FFC 的特性：
  • 弹性容器为其内容建立了一个新的弹性盒子格式化上下文。
  • 弹性容器内的子元素按照弹性盒子布局规则进行排列。
  • 弹性盒子布局提供了灵活的布局控制能力，可以方便地实现各种复杂的布局需求。

20.前端实现动画有哪些方式？

1）CSS 动画

CSS Transition: 使用 CSS 的 transition 属性，通过过渡来实现简单的动画效果。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.5s ease;
}

.box:hover {
    transform: scale(1.5);
}

CSS Keyframes: 使用 @keyframes 创建更复杂的动画，定义一系列的样式状态。

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: slide 1s forwards;
}

2）JavaScript 动画

setTimeout 和 setInterval: 使用 setTimeout 和 setInterval 创建基本的动画效果。

let pos = 0;
const box = document.getElementById('box');

function move() {
    if (pos < 100) {
        pos++;
        box.style.left = pos + 'px';
        requestAnimationFrame(move);
    }
}

move();

requestAnimationFrame: 这是现代浏览器推荐的动画方法，用于实现平滑的动画效果。

let start = null;
const box = document.getElementById('box');

function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    box.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';

    if (progress < 2000) {
        requestAnimationFrame(step);
    }
}

requestAnimationFrame(step);

3）SVG 动画

SMIL: 通过 SVG 的 animate 元素实现动画。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red">
        <animate attributeName="cx" from="50" to="100" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

CSS Animations on SVG: 也可以对 SVG 形状使用 CSS 动画。

4）Canvas 动画

HTML5 Canvas: 使用 Canvas API 进行复杂的绘图和动画。例如，可以使用 requestAnimationFrame 创建自定义动画。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let x = 0;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 20, 50, 50);
    x += 1;
    requestAnimationFrame(draw);
}

draw();

5）CSS 动画库

Animate.css: 一个流行的 CSS 动画库，可以快速使用预定义的动画。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<div class="animate__animated animate__bounce">Hello World</div>

GSAP (GreenSock Animation Platform): 一个强大的 JavaScript 动画库，可以创建复杂和高性能的动画。

gsap.to(".box", {duration: 2, x: 100});

6）3D 动画

WebGL: 使用 WebGL 和库，如 Three.js 制作高级的 3D 动画和图形。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

7）CSS 变换

使用变换（transform）属性，可以实现旋转、缩放、倾斜、移动等视觉效果。

Copy code
.rotate {
    transform: rotate(45deg);

21.盒子模型

在 CSS 中，盒子模型是用来描述网页中元素布局的一种模型。它将每个 HTML 元素看作一个盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

1）组成部分

• 内容（Content）：
  • 元素的实际内容，如文本、图像等。
  • 可以通过设置元素的width和height属性来指定内容的大小。
• 内边距（Padding）：
  • 位于内容和边框之间的空白区域。
  • 可以通过设置padding-top、padding-right、padding-bottom和padding-left属性来分别指定上、右、下、左四个方向的内边距大小。
  • 也可以使用padding属性一次性设置四个方向的内边距。
• 边框（Border）：
  • 围绕内容和内边距的线。
  • 可以通过设置border-width、border-style和border-color属性来分别指定边框的宽度、样式和颜色。
  • 也可以使用border属性一次性设置边框的所有属性。
• 外边距（Margin）：
  • 位于边框之外的空白区域，用于分隔不同的元素。
  • 可以通过设置margin-top、margin-right、margin-bottom和margin-left属性来分别指定上、右、下、左四个方向的外边距大小。
  • 也可以使用margin属性一次性设置四个方向的外边距。

2）盒模型的类型

• W3C 标准盒模型：
  • 在标准盒模型中，元素的宽度和高度只包括内容的宽度和高度，不包括内边距和边框。
  • 例如，如果一个元素的width属性设置为100px，padding为10px，border为5px，那么这个元素在标准盒模型下的实际宽度为100px，加上左右内边距和边框的宽度后，在页面上占据的总宽度为100px + 10px×2 + 5px×2 = 130px。
• IE 盒模型（怪异盒模型）：
  • 在 IE 盒模型中，元素的宽度和高度包括内容、内边距和边框。
  • 例如，如果一个元素的width属性设置为100px，padding为10px，border为5px，那么这个元素在 IE 盒模型下的实际宽度为100px，已经包含了左右内边距和边框的宽度，在页面上占据的总宽度仍然是100px。

3）盒模型的应用

• 布局设计：
  • 通过调整元素的盒模型属性，可以实现各种布局效果。
  • 例如，可以使用内边距来增加元素内部的空白区域，使内容更加易读；可以使用边框来装饰元素，使其更加突出；可以使用外边距来分隔不同的元素，使页面布局更加清晰。
• 响应式设计：
  • 在响应式设计中，需要根据不同的屏幕尺寸调整元素的大小和布局。盒模型的属性可以根据媒体查询的条件进行动态调整，以适应不同的设备。
  • 例如，可以使用媒体查询来检测屏幕宽度，当屏幕宽度小于一定值时，减小元素的外边距和内边距，使页面在小屏幕设备上也能正常显示。
• 定位和重叠：
  • 盒模型的属性可以影响元素的定位和重叠。通过设置元素的position属性为relative、absolute或fixed，可以使元素相对于其正常位置进行定位。同时，可以使用外边距和内边距来调整元素之间的重叠关系。
  • 例如，可以使用position: absolute将一个元素定位在页面的特定位置，然后通过调整其外边距和内边距来避免与其他元素重叠。