FunEnn

Appearance

[toc]

1. 什么是预检请求 ​

预检请求的概念 预检请求是浏览器在执行跨源 HTTP 请求之前自动发起的一种特殊请求。其目的是为了保证安全性，确保跨源请求不会对服务器造成安全威胁。当一个跨源请求包含某些特定的条件时（如非简单请求），浏览器会首先发送一个 OPTIONS 类型的 HTTP 请求到目标服务器，询问服务器是否允许该跨源请求。

预检请求的触发条件 预检请求主要在以下情况下触发：

使用除 GET、HEAD、POST 之外的 HTTP 方法。 POST 请求的内容类型（Content-Type）不是 application/x-www-form-urlencoded、multipart/form-data或 text/plain。 请求包含自定义的头信息。

2. 跨域才会有预检请求吗? ​

是的，预检请求（Preflight Request）通常只在跨域（CORS，Cross-Origin Resource Sharing）请求中发生。在同源策略下，浏览器允许脚本自由地发起请求和接收响应，不需要进行预检。

同源策略和跨域请求 ​

  • 同源策略：浏览器的同源策略限制了从一个源加载的文档或脚本与另一个源的资源进行交互。如果两个页面的协议、域名和端口都相同，它们就是同源的。
  • 跨域请求：当一个页面尝试请求另一个源（不同的协议、域名或端口）的资源时，这个请求就是跨域的。

3. css怎么做自适应 ​

1. 流体布局（Fluid Layouts） ​

使用百分比（%）而不是固定像素（px）来设置元素的宽度，使得布局能够根据容器的大小而伸缩

css
.container {
  width: 100%; /* 容器宽度为视口宽度的100% */
  padding: 5%; /* 内边距为容器宽度的5% */
}

2. 媒体查询（Media Queries） ​

CSS 媒体查询允许你根据不同的媒体特性（如屏幕宽度、分辨率等）应用不同的样式规则。

css
/* 默认样式 */
.container {
  padding: 20px;
}

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

3. 视口单位（Viewport Units） ​

视口单位（vw、vh、vmin、vmax）是相对于视口尺寸的单位，非常适合于自适应设计。

css
/* 使用视口宽度的10%作为宽度 */
.container {
  width: 10vw;
}

4. Flexbox（弹性盒子布局） ​

Flexbox 提供了一种更灵活的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。

css
.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  justify-content: space-between; /* 项目之间的间距均匀分布 */
}

.item {
  flex: 1; /* 项目占据可用空间 */
  min-width: 150px; /* 项目最小宽度 */
}

5. 使用REM单位 ​

REM 单位是相对于根元素（html）的字体大小的，通过调整根元素的字体大小，可以控制整个页面的缩放。

css
html {
  font-size: 100%; /* 默认16px */
}

.container {
  padding: 2rem; /* 相对于根字体大小的内边距 */
}

4. 相对单位有哪些？ ​

[HTML中的常用单位_前端html单位换算-CSDN博客](https://blog.csdn.net/wgaoxian/article/details/102988896#:~:text=单位分为绝对单位和相对单位 1 绝对单位 是固定值 不可变 绝对单位有： px、 cm、,em：相对父元素的字体大小，不过已经很少使用 vnim：视口高度和宽度中较小的那个的1% vmax：视口高度和宽度中较大的那个的1% calc（）：用于动态计算长度的值，例如：width%3A calc (100% - 10px)；)

  1. 百分比（%）：
    • 相对于父元素的宽度（对于水平单位）或高度（对于垂直单位）。
  2. em（相对当前字体尺寸）：
    • 相对于当前元素的字体尺寸。1em 等于当前元素的字体大小。
  3. ex（相对当前字体x高度）：
    • 相对于当前字体的小写字母 'x' 的高度。
  4. ch（相对数字'0'的宽度）：
    • 相对于数字 '0' 的宽度。
  5. vw（视口宽度的百分比）：
    • 相对于视口宽度的百分比。1vw 等于视口宽度的 1%。
  6. vh（视口高度的百分比）：
    • 相对于视口高度的百分比。1vh 等于视口高度的 1%。
  7. vmin（视口宽度和高度中较小值的百分比）：
    • 相对于视口宽度或高度中较小值的百分比。1vmin 等于较小值的 1%。
  8. vmax（视口宽度和高度中较大值的百分比）：
    • 相对于视口宽度或高度中较大值的百分比。1vmax 等于较大值的 1%。
  9. rem（相对根元素字体尺寸）：
    • 相对于根元素（通常是 <html>）的字体尺寸。1rem 等于根元素的字体大小。
  10. lh（相对行高）：
    • 相对于元素的行高。1lh 等于元素的行高。

5. em和rem的区别 ​

em ​

  • 定义：em 是相对于父元素的字体大小的单位。如果一个元素的字体大小设置为 2em，那么它的大小是其父元素字体大小的两倍。
  • 继承性：em 继承了父元素的字体大小，这意味着如果你在嵌套的元素中使用 em，它会相对于父元素的字体大小进行缩放。
  • 使用场景：em 常用于设置字体大小，因为它可以确保文本大小相对于其父元素成比例缩放，这在响应式设计中非常有用。

rem ​

  • 定义：rem 是相对于根元素（通常是 <html>）的字体大小的单位。无论在哪个层级的元素上使用，1rem 总是等于根元素的字体大小。
  • 不继承性：rem 不会继承父元素的字体大小，它只与根元素的字体大小相关。这使得在整个文档中保持一致的尺寸变得容易。
  • 使用场景：rem 适合用于布局和组件的大小，因为它提供了一个一致的参考点，即根元素的字体大小。这使得在不同设备和屏幕尺寸上保持一致的布局变得更加容易。

区别总结 ​

  • 参照物：em 是相对于父元素的字体大小，而 rem 是相对于根元素的字体大小。
  • 继承性：em 继承父元素的字体大小，rem 不继承，总是相对于根元素。
  • 一致性：rem 提供了更好的一致性，因为它不依赖于元素的父级上下文。
  • 灵活性：em 在需要相对于父元素进行缩放的场景中更灵活，如文本大小的调整