星哥の面试题Day7
面试题系列均来自鱼皮的知识星球——编程导航
CSS3 新增了哪些特性?
CSS3 是 CSS 的第三个版本,也是最新的 CSS 标准,它包含了 CSS2.1 的所有功能,并且增加了许多丰富的特性:
- 替代(IE)盒模型
- 选择器:属性选择器、结构伪类选择器、伪元素选择器
- 边框与圆角:
border-radius
、border-image
、box-shadow
- 文本:
text-overflow
、word-wrap
、word-break
、text-shadow
calc()
:cal()
是 CSS3 新增的函数,用于动态计算属性值。- 滤镜(
filter
):filter
用于定义元素(一般是<img>
)的可视效果(如模糊、饱和度)。 - 背景:
background-image
、background-size
、background-origin
、background-clip
- 渐变(Gradients):可以实现元素背景中两种或多种颜色之间的渐进过渡效果。
- 字体图标:字体图标是一种使用字体文件中的符号来代替图像的技术。与传统的图像图标相比,字体图标具有许多优点,如易于使用、可调整大小、可缩放等。
- 过渡(Transition):用于将元素从一种状态平滑过渡到另一种状态,即实现动画效果。只有在某些特定的事件触发时才能过渡,比如鼠标悬停等。
- 动画(Animation):通过定义关键帧和时间函数来精确控制动画,可以实现比过渡更加自由和复杂的动画效果,且无需通过事件触发。
- 多列布局:多列布局是 CSS3 中一种用于分隔文本和内容的布局方式,它可以将一段文本分成多列,从而使页面更加紧凑和易读。
- 弹性盒子(Flex Box):弹性盒子是 CSS3 提供的一种新的布局方式,相比于传统的浮动定位布局更加灵活高效,常用在移动端。
- 2D转换:2D 转换是指在二维平面中对元素进行变换,包括平移、缩放、旋转和倾斜,不影响页面布局。
- 多媒体查询:CSS3 支持多媒体查询,即根据设备类型来适应不同的屏幕尺寸,从而为用户带来更好的体验。
- 3D 转换:3D 转换是指在三维空间中对元素进行变换,包括平移、缩放、旋转、倾斜和透视,不影响页面布局。
总之,CSS3 是一种强大、灵活、易于维护的样式表语言,它包含了许多新的特性和功能,可以帮助开发者更加高效地创建网页。
如何使用 JavaScript 来判断用户设备类型?比如判断是 PC 端还是移动端访问?
可以使用一些特定的 API 来判断用户设备类型,以下是一些常用的方法:
navigator.userAgent:该属性返回用户代理头的字符串,可以使用正则表达式来判断是否包含移动设备的标识符,例如 “Mobile”、”Android”、”iPhone” 等。如果包含则说明是移动设备,否则是 PC 端。
**window.matchMedia()**:该 API 可以根据不同的媒体查询条件来判断用户设备类型,例如屏幕宽度、设备方向等。可以使用 media query 字符串来创建一个 MediaQueryList 对象,然后调用 matches 属性来判断是否匹配。
window.innerWidth 和 window.innerHeight:这两个属性返回浏览器窗口的宽度和高度,可以根据窗口大小来判断用户设备类型。通常移动设备的屏幕宽度比较小,因此可以将窗口宽度小于某个值作为判断条件。
使用第三方库:有一些第三方库可以更准确地判断用户设备类型,例如 isMobile、mobile-detect、detect.js 等。这些库通常基于更全面的用户代理头信息和设备特性进行判断,可以提供更精确的结果。使用这些库需要先引入对应的库文件,然后调用相应的方法进行判断。
使用特殊标识:在 URL 参数中添加特殊标识或者在 Cookie 中保存设备类型信息,然后通过解析 URL 参数或者读取 Cookie 中的信息来判断用户设备类型。这种方法需要在用户访问时设置对应的标识或者信息,然后在后续请求中使用。
使用 UA 字符串:每个浏览器都有一个 User-Agent (UA) 字符串,其中包含了浏览器和设备的相关信息。通过解析 UA 字符串,可以判断用户设备类型。但需要注意的是,UA 字符串可以被篡改,因此这种方法并不可靠。
什么是浏览器的同源策略?为什么要有同源策略?
浏览器同源策略是网景公司出于浏览器安全考虑而制定的策略。同源指的是协议、域名、端口三者均相同,如果三者中存在有不同之处,而称为跨域。跨域请求会被发送到服务器,但是返回的响应会被浏览器拦截。
同源策略又分为三种:
- DOM同源策略
- XMLHttpRequest请求同源策略
- Cookie、LocalStorage存储同源策略
如果不存在同源策略的限制,则会出现XSS、CSRF等Web攻击。比如如果用户通过iframe引入了其他页面,用户在页面中填写了用户名和密码,那么恶意攻击者就可以获取不同源的DOM结构,从而获取用户的信息。又比如用户向网站A发送的请求,网站A向Cookie中添加了用户表示,此时用户访问恶意网站B,执行了恶意脚本,导致网站B向网站A发送Ajax请求并且携带了网站A对应的Cookie,此时网站B就可以从Cookie中解析出用户的信息。