面试题目

属性相关

• 让页面里的字体变清晰，变细用CSS怎么做？

  • -webkit-font-smoothing: antialiased;

• font-style属性可以让它赋值为“oblique” oblique是什么意思？

  • 让没有斜体属性的文字倾斜

• line-height比例单位和百分比单位的计算方法

  • 父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，子元素的行高等于父元素字体大小 * 150% ：
  • 父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于子元素字体大小 * 1.5 = 45px：

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

  • margin、padding是相对于宽度，height是相对于高度

• CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

  • 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。如果此值被用在其他的元素上，会呈现为 "hidden"。

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

  • 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

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

• • 用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

方法

• 一个ul里有若干个li，想要每个li都有一个border-bottom，最后一个li不想要boder-bottom要怎么做

  • (ul:last-child{border-bottom:none;}
  • 或者给最后一个li加一个class选择器设置border:none;
  • 用js或jquery来实现

• 很长一段话要进行截取，超过之后是三个点怎么做？

  • 不考虑兼容的话CSS3有 text-overflow：ellipsis
  • 或者overflow:hidden 在边框前侧加入一个三个点的span
  • 或者用伪元素:after{content:"..."}

• 如何平铺一张背景图？

  • repeat
  • css方法：设置一张图片 {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1;}

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

  • absolute 定位
  • 外层box-sizing: border-box; 同时设置padding: 100px 0 0；内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；另一个元素直接height: 100%;
  • height: calc(100%-100px)
  • flex

    css hack

• 条件注释

    <!--[if IE]>用于 IE <![endif]-->
    <!--[if IE 6]>用于 IE6 <![endif]-->
    <!--[if IE 7]>用于 IE7 <![endif]-->
    <!--[if IE 8]>用于 IE8 <![endif]-->
    <!--[if IE 9]>用于 IE9 <![endif]-->
    <!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
    <!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
    <!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
    <!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
    <!--[if !IE]> -->用于非 IE <!-- <![endif]-->

• 为什么要初始化CSS样式。

  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

  最简单的初始化方法就是：* {padding: 0; margin: 0;}

• haslayout是什么，怎么触发

　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

触发：大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

可以使用JavaScript函数hasLayout查看一个元素是否拥有布局，函数返回true即该元素拥有layout,否则返回false。hasLayout是一个只读属性。

动画

• 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
• 如果需要手动写动画，你认为最小时间间隔是多久，为什么？ 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

移动端

• 用过媒体查询，针对移动端的布局吗？

  • @media screen and (min-width:600px) {...}

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

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

  • 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

其他

• 什么是CSS 预处理器 / 后处理器？

  • 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

  • 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

• CSS中link 和@import的区别是？

  • (1) link属于HTML标签，而@import是CSS提供的;
  • (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  • (3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
  • (4) link方式的样式的权重高于@import的权重.

• 在网页中的应该使用奇数还是偶数的字体？为什么呢？

  • 偶数。
  • 一、UI设计师的原因：多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体
  • 二、浏览器的原因：ie6会把定义为13px的字渲染成14px；偶数宽的汉字，比如12px宽的汉字，去掉1像素的间距，填充了像素的实际宽是11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在12像素时，竖线在中间，左右各5像素，显得均衡。像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看
  • 三、实际应用：偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用

• 抽离样式模块怎么写，说出思路，有无实践经验？

  • 按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。
  • 公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
  • 特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。
  • 皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。

• CSS Sprites：利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

  优点

  • CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
  • CSS Sprites能减少图片的字节；
  • CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
  • CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

  缺点

  • 图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
  • 图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
  • 图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
  • 可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。