初级前端面试题——CSS问题（3）reset.css 和 Normalize.css 理解 reset.css 意为重置

reset.css 和 Normalize.css 理解

reset.css 意为重置默认样式。HTML 中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式

Eric Meyer（CSS Reset）推荐

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize.css 只是一个很小的 css 文件,但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset，Normalize.css 是一种现代的，为 HTML5 准备的优质替代方案。

Normalize.css 是一种 CSS reset 的替代方案。经过@necolas 和@jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

我们创造 normalize.css 有下几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分 HTML 元素提供
修复浏览器自身的 bug 并保证各浏览器的一致性
优化 CSS 可用性：用一些小技巧
解释代码：用注释和详细的文档来

什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC？

当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为 FOUC
产生原因：当样式表晚于结构性 html 加载时，加载到此样式表时，页面将停止之前的渲染。
等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决方法：使用 link 标签将样式表放在文档 head

介绍使用过的 CSS 预处理器？

CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS

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

多个 css 合并，尽量减少 HTTP 请求
将 css 文件放在页面最上面
移除空的 css 规则
避免使用 CSS 表达式
选择器优化嵌套，尽量避免层级过深
充分利用 css 继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为 0 时，不加单位
属性值为小于 1 的小数时，省略小数点前面的 0
css 雪碧图

浏览器是怎样解析 CSS 选择器的？

浏览器解析 CSS 选择器的方式是从右到左

在网页中的应该使用奇数还是偶数的字体？

在网页中的应该使用“偶数”字体：

偶数字号相对更容易和 web 设计的其他部分构成比例关系
使用奇数号字体时文本段落无法对齐
宋体的中文网页排布中使用最多的就是 12 和 14

margin 和 padding 分别适合什么场景使用？

需要在 border 外侧添加空白，且空白处不需要背景（色）时，使用 margin
需要在 border 内测添加空白，且空白处需要背景（色）时，使用 padding

抽离样式模块怎么写，说出思路？

CSS 可以拆分成 2 部分：公共 CSS 和业务 CSS：

网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的 CSS

元素竖向的百分比设定是相对于容器的高度吗？

元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动的原理是什么？用到了 CSS 的那些属性？

原理类似图片轮播原理，超出隐藏部分，滚动时显示
可能用到的 CSS 属性：overflow:hidden; transform:translate(100%, 100%); display:none;

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过 resize 方法来实现兼容：

$(window).resize(function () {
    screenRespond();
});

screenRespond();

function screenRespond(){

    var screenWidth = $(window).width();

    if(screenWidth <= 1800){
        $("body").attr("class", "w1800");
    }

    if(screenWidth <= 1400){
        $("body").attr("class", "w1400");
    }

    if(screenWidth > 1800){
        $("body").attr("class", "");
    }
}

什么是视差滚动效果，如何给每页做不同的动画？

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的

实现原理

以 “页面滚动条” 作为 “视差动画进度条”
以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

a 标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active

伪元素和伪类的区别和作用？

伪元素:在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容 IE 的老语法

如何修改 Chrome 记住密码后自动填充表单的黄色背景？

产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
解决方案 1：在 form 标签上直接关闭了表单的自动填充：autocomplete="off"
解决方案 2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

iOS safari 如何阻止“橡皮筋效果”？

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你对 line-height 是如何理解的？

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代

设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

怎么让 Chrome 支持小于 12px 的文字？

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

让页面里的字体变清晰，变细用 CSS 怎么做？（IOS 手机浏览器字体齿轮设置）

  -webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思？

font-style: oblique; 使没有 italic 属性的文字实现倾斜

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms 多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

overflow: scroll 时不能平滑滚动的问题怎么处理？

监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

方案 1： .sub { height: calc(100%-100px); }
方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

CSS 中类 class 和 id 的区别

对于 CSS 而言，id 和 class 都是选择器，唯一不同的地方在于权重不同。如果只说 CSS，上面那一句话就讲完了。拓展出来，对于 html 而言，id 和 class 都是 dom 元素的属性值。不同的地方在于 id 属性的值是唯一的，而 class 属性值可以重复。id 还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到 id=xxx 的元素上面。

更直接的：id 给 js 用，class 给 css 用（趋势）

如何优化网页的打印样式

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。

 <link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

但打印样式表也应有些注意事项：

打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请使用 html 插入到页面中。
最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm。
隐藏掉不必要的内容。（@print div{display:none;}）
打印样式表中最好少用浮动属性，因为它们会消失。

请问为何要使用 transform 而非 absolute positioning，或反之的理由？为什么？

使用 transform 或 position 实现动画效果时是有很大差别。
使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。
使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）
功能都一样。但是 translate 不会引起浏览器的重绘和重排，这就相当 nice 了。

反之

tranform 改变 fixed 子元素的定位对象
transform 改变元素层叠顺序 transform 的副作用

请解释 CSS sprites，以及你要如何在页面或网站中实现它

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。

你熟悉 SVG 样式的书写吗？

SVG	等效的 CSS
fill	background-color 或 color
fill-opacity	background-color 或 color 设置 rgba/hsla
opacity	opacity
stroke	border-color
stroke-width	border-thickness
stroke-opacity	border-color 设置 rgba
rx, ry	border-radius

下面的属性在 SVG 和 CSS 中是一样的，只是在 SVG 的 transformations 和 dimensions 中稍有区别：

font-family, font-size, font-style, font-variant 和 font-weight
width 和 height
scale, rotate, skew

参考链接：基本的 SVG 样式属性

如果设计中使用了非标准的字体，你该如何去实现？

用图片代替
web fonts 在线字库
@font-face

参考链接：如果设计中使用了非标准的字体，你该如何去实现？

初级前端面试题——CSS问题（3）