CSS常见问题
link 和 @import
引入外部CSS 有2种方式：link标签和@import，两者区别如下：
- 从属关系：@import是CSS提供的语法规则，只能导入样式表；link是HTML提供的标签，还可以定义 RSS、rel 、引入网站图标等；
- 加载顺序：加载页面时，
link引入的 CSS 会被同时加载；@import引入的 CSS 在页面加载完毕后才被加载； - 兼容性区别：
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
强烈建议使用link，这样可以避免考虑@import语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
vue中还可以使用style标签引入样式，如下：
<style scoped src="./pc.css"></style>
通过style引入的样式支持scoped，scoped是通过vue-loader插件实现的；
常见浏览器内核
- Trident：IE 浏览器内核；
- Gecko：Firefox 浏览器内核；
- Presto：Opera 浏览器内核；
- Webkit：Safari 浏览器内核；
- Blink：谷歌浏览器内核，属于 Webkit 的一个分支，与 Opera 一起在研发；
form 的自动完成
autocomplete 属性规定输入字段是否应该启用自动完成功能，默认为启用，设置为 autocomplete=off 可以关闭该功能。
自动完成允许浏览器预测对字段的输入。在用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
多标签页之间的通信
标签页之间没办法直接通信，因此需要找一个中介者来实现通信：
方式一：使用 Websocket，标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端；
方式二：使用localStorage，在localStorage里添加、修改或删除数据时，都会触发一个 storage 事件，可以通过监听 storage 事件来实现页面信息通信；
方式二：使用postMessage，如果能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的；
简述前端性能优化
- 通过文件合并、css雪碧图、使用base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况；
- 通过 DNS 缓存等机制来减少 DNS 的查询次数；
- 通过设置缓存策略，对常用不变的资源进行缓存；
- 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
- 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度；
- 使用 CDN 服务，来提高用户对于资源请求时的响应速度；
- 服务器端使用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积；
- 尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie；
webP
WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的点阵图。使用webp格式最大优的点是在相同质量下文件体积更小，因此它非常适合于网络图片的传输。
浏览器如何判断是否支持 webp 格式图片？
通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
让 div 水平/垂直居中
<div class="parent">
<div class="child"></div>
</div>
<!-- 1. 使用flex -->
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
<!-- 2. 使用绝对定位 -->
div.parent {
position: relative;
}
div.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!-- 3. 使用justify-self -->
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
<!-- 4. 其它 -->
opacity: 0、visibility: hidden、display: none 优劣
- display: none - 不占空间，不能点击，会引起回流，子元素不影响
- visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示
- opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响
Rem 及其转换原理
rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。默认根元素的 font-size 都是 16px的。
如果想要设置 16px 的字体大小也就是： 16px/16px = 1rem。
如果想要设置 12px 的字体大小也就是： 12px/16px = 0.75rem。
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- initial-scale: 初始的缩放比例；
- minimum-scale: 允许用户缩放到的最小比例；
- maximum-scale: 允许用户缩放到的最大比例；
- user-scalable: 用户是否可以手动缩放；
伪类和伪元素
伪类: 用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的，如:hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。
伪元素: 用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。
区别: 伪类的操作对象是文档树中已存在的元素，伪元素是创建一个文档树外的元素。
行内元素
不能设置宽、高和垂直方向上的margin、padding
CSS可以继承的属性
字体系列属性
- font-family
- font-size
- font-weight
- font-style
文本系列属性
- text-indent
- text-align
- line-hight
- word-spacing
- letter-spacing
- color
其他
- cursor
- visibility
CSS3 新增的伪类
- elem:nth-child(n): 选中父元素下的第 n 个标签名为 elem 的元素；
- elem:nth-last-child(n): 作用同上，从后开始查找；
- elem:last-child：最后一个子元素
- elem:only-child：如果 elem 是父元素下唯一的子元素，则选中；
- elem:nth-of-type(n)：选择父元素下第 n 个 elem 类型元素；
- elem:empty：选中不包含子元素和内容的 elem 类型元素；
- :not(elem)：选择非 elem 元素的每个元素；
- :enabled：启用状态的表单组件
用纯 CSS 创建一个三角形
a. 利用border边框样式绘制三角形，例如设置4条边的边框为40px：
#demo{
width:0px;
height:0px;
border: 40px solid;
border-color: red blue red blue;
}
b. 如果将只显示底边边框，并将宽度设为80px：
#demo{
width:0px;
height:0px;
border:40px solid transparent;
border-bottom:80px solid red;
}
min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
- max-width 会覆盖 width，即使 width 是行内样式或 !important。
- min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突时；
CSS当第一个或最后一个元素为指定元素时
# 当父元素下第一个和最后一个元素是 .login-tab-line 时，将其隐藏
> :first-child.login-tab-line,
> :last-child.login-tab-line {
display: none;
}
选择指定兄弟元素
# 选择紧跟在 login 类元素后面的 content 类元素
.login + .content {
/* CSS 样式 */
}
