link 与 @import 的区别

  1. 从属关系区别

    @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

  1. 加载顺序区别

    加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。

  1. 兼容性区别

    @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

  1. DOM 可控性区别

    可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式。

开发中为什么要初始化 css 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

通常可以使用 Normalize 这样的 CSS reset 库来统一样式，简单一点也可以这样重设一部分

  1. *,
  2. *::before,
  3. *::after {
  4.   box-sizing: border-box;
  5.   margin: 0;
  6.   padding: 0;
  7. }

所有元素的 margin 和 padding 统一为0，box-sizing 可以统一 CSS 盒模型布局

去除 input 默认填充的背景颜色

  1. input:-webkit-autofill {
  2.   -webkit-box-shadow: 0 0 0px 1000px white inset;
  3. }

清除input[type=number]的默认样式

  1. input[type=number] {
  2.   -moz-appearance: textfield;
  3. }
  5. input[type=number]::-webkit-inner-spin-button,
  6. input[type=number]::-webkit-outer-spin-button {
  7.   -webkit-appearance: none;
  8.   margin: 0;
  9. }

清除移动端 a 标签等点击区域变色

  1. *{
  2.   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  3. }

清除移动端 input 样式

  1. input{
  2.     border: none;
  3.     -moz-appearance:none;
  4.     -webkit-appearance : none ; /*解决ios上按钮的圆角问题*/
  5.     border-radius: 0; /*解决ios上输入框圆角问题*/
  6.     outline:medium; /*去掉鼠标点击的默认黄色边框*/
  7.     background-color: transparent;
  8. }

避免ios滑动滚动条卡顿

  1. *{
  2.   -webkit-overflow-scrolling : touch
  3. }

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

  • 尽量将样式写在单独的 css 文件里面，在 head 元素中引用 将代码写成单独的 css 文件有几点好处： 1. 内容和样式分离，易于管理和维护 2. 减少页面体积 3. css 文件可以被缓存、重用，维护成本降低
  • 不使用@import
  • 避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
  • 精简页面的样式文件，去掉不用的样式
  • 利用 CSS 继承减少代码量
  • 避免！important，可以选择其他选择器