面试题系列均来自鱼皮的知识星球——编程导航

CSS3 新增了哪些特性？

CSS3 是 CSS 的第三个版本，也是最新的 CSS 标准，它包含了 CSS2.1 的所有功能，并且增加了许多丰富的特性：

  1. 替代（IE）盒模型
  2. 选择器：属性选择器、结构伪类选择器、伪元素选择器
  3. 边框与圆角： border-radius、border-image、box-shadow
  4. 文本：text-overflow、word-wrap、word-break、text-shadow
  5. calc()：cal() 是 CSS3 新增的函数，用于动态计算属性值。
  6. 滤镜（filter）：filter 用于定义元素（一般是<img>）的可视效果（如模糊、饱和度）。
  7. 背景：background-image 、background-size、background-origin、background-clip
  8. 渐变（Gradients）：可以实现元素背景中两种或多种颜色之间的渐进过渡效果。
  9. 字体图标：字体图标是一种使用字体文件中的符号来代替图像的技术。与传统的图像图标相比，字体图标具有许多优点，如易于使用、可调整大小、可缩放等。
  10. 过渡（Transition）：用于将元素从一种状态平滑过渡到另一种状态，即实现动画效果。只有在某些特定的事件触发时才能过渡，比如鼠标悬停等。
  11. 动画（Animation）：通过定义关键帧和时间函数来精确控制动画，可以实现比过渡更加自由和复杂的动画效果，且无需通过事件触发。
  12. 多列布局：多列布局是 CSS3 中一种用于分隔文本和内容的布局方式，它可以将一段文本分成多列，从而使页面更加紧凑和易读。
  13. 弹性盒子（Flex Box）：弹性盒子是 CSS3 提供的一种新的布局方式，相比于传统的浮动定位布局更加灵活高效，常用在移动端。
  14. 2D转换：2D 转换是指在二维平面中对元素进行变换，包括平移、缩放、旋转和倾斜，不影响页面布局。
  15. 多媒体查询：CSS3 支持多媒体查询，即根据设备类型来适应不同的屏幕尺寸，从而为用户带来更好的体验。
  16. 3D 转换：3D 转换是指在三维空间中对元素进行变换，包括平移、缩放、旋转、倾斜和透视，不影响页面布局。

总之，CSS3 是一种强大、灵活、易于维护的样式表语言，它包含了许多新的特性和功能，可以帮助开发者更加高效地创建网页。

如何使用 JavaScript 来判断用户设备类型？比如判断是 PC 端还是移动端访问？

可以使用一些特定的 API 来判断用户设备类型，以下是一些常用的方法：

  1. navigator.userAgent：该属性返回用户代理头的字符串，可以使用正则表达式来判断是否包含移动设备的标识符，例如 “Mobile”、”Android”、”iPhone” 等。如果包含则说明是移动设备，否则是 PC 端。

  2. **window.matchMedia()**：该 API 可以根据不同的媒体查询条件来判断用户设备类型，例如屏幕宽度、设备方向等。可以使用 media query 字符串来创建一个 MediaQueryList 对象，然后调用 matches 属性来判断是否匹配。

  3. window.innerWidth 和 window.innerHeight：这两个属性返回浏览器窗口的宽度和高度，可以根据窗口大小来判断用户设备类型。通常移动设备的屏幕宽度比较小，因此可以将窗口宽度小于某个值作为判断条件。

  4. 使用第三方库：有一些第三方库可以更准确地判断用户设备类型，例如 isMobile、mobile-detect、detect.js 等。这些库通常基于更全面的用户代理头信息和设备特性进行判断，可以提供更精确的结果。使用这些库需要先引入对应的库文件，然后调用相应的方法进行判断。

  5. 使用特殊标识：在 URL 参数中添加特殊标识或者在 Cookie 中保存设备类型信息，然后通过解析 URL 参数或者读取 Cookie 中的信息来判断用户设备类型。这种方法需要在用户访问时设置对应的标识或者信息，然后在后续请求中使用。

  6. 使用 UA 字符串：每个浏览器都有一个 User-Agent (UA) 字符串，其中包含了浏览器和设备的相关信息。通过解析 UA 字符串，可以判断用户设备类型。但需要注意的是，UA 字符串可以被篡改，因此这种方法并不可靠。

    什么是浏览器的同源策略？为什么要有同源策略？

浏览器同源策略是网景公司出于浏览器安全考虑而制定的策略。同源指的是协议、域名、端口三者均相同，如果三者中存在有不同之处，而称为跨域。跨域请求会被发送到服务器，但是返回的响应会被浏览器拦截。

同源策略又分为三种：

  1. DOM同源策略
  2. XMLHttpRequest请求同源策略
  3. Cookie、LocalStorage存储同源策略

如果不存在同源策略的限制，则会出现XSS、CSRF等Web攻击。比如如果用户通过iframe引入了其他页面，用户在页面中填写了用户名和密码，那么恶意攻击者就可以获取不同源的DOM结构，从而获取用户的信息。又比如用户向网站A发送的请求，网站A向Cookie中添加了用户表示，此时用户访问恶意网站B，执行了恶意脚本，导致网站B向网站A发送Ajax请求并且携带了网站A对应的Cookie，此时网站B就可以从Cookie中解析出用户的信息。