二、CSS部分

1 css sprite是什么,有什么优缺点

  • 概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

  • 优点:

    • 减少HTTP请求数,极大地提高页面加载速度

    • 增加图片信息重复度,提高压缩比,减少图片大小

    • 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

  • 缺点:

    • 图片合并麻烦

    • 维护麻烦,修改一个图片可能需要从新布局整个图片,样式

display: none;visibility: hidden;的区别

  • 联系:它们都能让元素不可见

  • 区别:

    • display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见

    • display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式

    • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。

    • 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

link@import的区别

  1. linkHTML方式, @import是CSS方式

  2. link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC(文档样式短暂失效)

  3. link可以通过rel="alternate stylesheet"指定候选样式

  4. 浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式

  5. @import必须在样式规则之前,可以在css文件中引用其他文件

  6. 总体来说:link优于@import

4 什么是FOUC?如何避免

  • Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。

  • 解决方法:把样式表放到文档的<head>

5 如何创建块级格式化上下文(block formatting context),BFC有什么用

  • 创建规则:

    • 根元素

    • 浮动元素(float不取值为none

    • 绝对定位元素(position取值为absolutefixed

    • display取值为inline-blocktable-celltable-captionflexinline-flex之一的元素

    • overflow不取值为visible的元素

  • 作用:

    • 可以包含浮动元素

    • 不被浮动元素覆盖

    • 阻止父子元素的margin折叠

6 display、float、position的关系

  • 如果display取值为none,那么positionfloat都不起作用,这种情况下元素不产生框

  • 否则,如果position取值为absolute或者fixed,框就是绝对定位的,float的计算值为nonedisplay根据下面的表格进行调整。

  • 否则,如果float不是none,框是浮动的,display根据下表进行调整

  • 否则,如果元素是根元素,display根据下表进行调整

  • 其他情况下display的值为指定值

  • 总结起来:绝对定位、浮动、根元素都需要调整display

7 清除浮动的几种方式,各自的优缺点

  • 父级div定义height

  • 结尾处加空div标签clear:both

  • 父级div定义伪类:afterzoom

  • 父级div定义overflow:hidden

  • 父级div也浮动,需要定义宽度

  • 结尾处加br标签clear:both

  • 比较好的是第3种方式,好多网站都这么用

8 为什么要初始化CSS样式?

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

  • 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化

9 css3有哪些新特性

  • 新增各种css选择器

  • 圆角 border-radius

  • 多列布局

  • 阴影和反射

  • 文字特效text-shadow

  • 线性渐变

  • 旋转transform

CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。

  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。

  • p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。

  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

  • :after 在元素之前添加内容,也可以用来做清除浮动。

  • :before 在元素之后添加内容。

  • :enabled 已启用的表单元素。

  • :disabled 已禁用的表单元素。

  • :checked 单选框或复选框被选中。

10 display有哪些值?说明他们的作用

  • block 转换成块状元素。

  • inline 转换成行内元素。

  • none 设置元素不可见。

  • inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。

  • list-item 象块类型元素一样显示,并添加样式列表标记。

  • table 此元素会作为块级表格来显示

  • inherit 规定应该从父元素继承 display 属性的值

11 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

  • 有两种, IE盒子模型、W3C盒子模型;

  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);

  • 区 别: IE的content部分把 border 和 padding计算了进去;

12 CSS优先级算法如何计算?

  • 优先级就近原则,同权重情况下样式定义最近者为准

  • 载入样式以最后载入的定位为准

  • 优先级为: !important > id > class > tag!important 比 内联优先级高

13 对BFC规范的理解?

  • 它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用

14 谈谈浮动和清除浮动

  • 浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

15 position的值, relative和absolute定位原点是

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位

  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位

  • relative:生成相对定位的元素,相对于其正常位置进行定位

  • static 默认值。没有定位,元素出现在正常的流中

  • inherit 规定从父元素继承 position 属性的值

16 display:inline-block 什么时候不会显示间隙?(携程)

  • 移除空格

  • 使用margin负值

  • 使用font-size:0

  • letter-spacing

  • word-spacing

17 PNG\GIF\JPG的区别及如何选

  • GIF

    • 8位像素,256

    • 无损压缩

    • 支持简单动画

    • 支持boolean透明

    • 适合简单动画

  • JPEG

    • 颜色限于256

    • 有损压缩

    • 可控制压缩质量

    • 不支持透明

    • 适合照片

  • PNG

    • PNG8truecolor PNG

    • PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画

    • 适合图标、背景、按钮

18 行内元素float:left后是否变为块级元素?

行内元素设置成浮动之后变得更加像是inline-block(行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%),这时候给行内元素设置padding-toppadding-bottom或者widthheight都是有效果的

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

  • 偶数字号相对更容易和 web 设计的其他部分构成比例关系

20 ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用

  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素

  • 用于区分伪类和伪元素

21 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

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

22 CSS合并方法

  • 避免使用@import引入多个css文件,可以使用CSS工具将CSS合并为一个CSS文件,例如使用Sass\Compass

23 CSS不同选择器的权重(CSS层叠的规则)

  • !important规则最重要,大于其它规则

  • 行内样式规则,加1000

  • 对于选择器中给定的各个ID属性值,加100

  • 对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加10

  • 对于选择其中给定的各个元素标签选择器,加1

  • 如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则

24 列出你所知道可以改变页面布局的属性

  • positiondisplayfloatwidthheightmarginpaddingtopleftright、`

25 CSS在性能优化方面的实践

  • css压缩与合并、Gzip压缩

  • css文件放在head里、不要用@import

  • 尽量用缩写、避免用滤镜、合理使用选择器

26 CSS3动画(简单动画的实现,如旋转等)

  • 依靠CSS3中提出的三个属性:transitiontransformanimation

  • transition:定义了元素在变化过程中是怎么样的,包含transition-propertytransition-durationtransition-timing-functiontransition-delay

  • transform:定义元素的变化结果,包含rotatescaleskewtranslate

  • animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction

27 base64的原理及优缺点

  • 优点可以加密,减少了HTTTP请求

  • 缺点是需要消耗CPU进行编解码

28 几种常见的CSS布局

流体布局

	.left {
		float: left;
		width: 100px;
		height: 200px;
		background: red;
	}
	.right {
		float: right;
		width: 200px;
		height: 200px;
		background: blue;
	}
	.main {
		margin-left: 120px;
		margin-right: 220px;
		height: 200px;
		background: green;
	}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div></div>

圣杯布局

.container {
    margin-left: 120px;
    margin-right: 220px;}.main {
    float: left;
    width: 100%;
    height:300px;
    background: green;}.left {
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    width: 100px;
    margin-left: -100%;
    background: red;}.right {
    position: relative;
    right: -220px;
    float: right;
    height: 300px;
    width: 200px;
    margin-left: -200px;
    background: blue;}
<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div></div>

双飞翼布局

.content {
    float: left;
    width: 100%;}.main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;}.main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;}.left {
    float:left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background: red;}.right {
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background: blue;}
<div class="content">
    <div class="main"></div></div><div class="left"></div><div class="right"></div>

29 stylus/sass/less区别

  • 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性

  • ScssLESS语法较为严谨,LESS要求一定要使用大括号“{}”,ScssStylus可以通过缩进表示层次与嵌套关系

  • Scss无全局变量的概念,LESSStylus有类似于其它语言的作用域概念

  • Sass是基于Ruby语言的,而LESSStylus可以基于NodeJS NPM下载相应库后进行编译;

30 postcss的作用

  • 可以直观的理解为:它就是一个平台。为什么说它是一个平台呢?因为我们直接用它,感觉不能干什么事情,但是如果让一些插件在它上面跑,那么将会很强大

  • PostCSS 提供了一个解析器,它能够将 CSS 解析成抽象语法树

  • 通过在 PostCSS 这个平台上,我们能够开发一些插件,来处理我们的CSS,比如热门的:autoprefixer

  • postcss可以对sass处理过后的css再处理 最常见的就是autoprefixer

31 css样式(选择器)的优先级

  • 计算权重确定

  • !important

  • 内联样式

  • 后写的优先级高

32 自定义字体的使用场景

  • 宣传/品牌/banner等固定文案

  • 字体图标

33 如何美化CheckBox

  • <label> 属性 for 和 id

  • 隐藏原生的 <input>

  • :checked + <label>

34 伪类和伪元素的区别

  • 伪类表状态

  • 伪元素是真的有元素

  • 前者单冒号,后者双冒号

35 base64的使用

  • 用于减少 HTTP 请求

  • 适用于小图片

  • base64的体积约为原图的4/3

36 自适应布局

思路:

  • 左侧浮动或者绝对定位,然后右侧margin撑开

  • 使用<div>包含,然后靠负margin形成bfc

  • 使用flex

37 请用CSS写一个简单的幻灯片效果页面

知道是要用CSS3。使用animation动画实现一个简单的幻灯片效果

/**css**/.ani{
  width:480px;
  height:320px;
  margin:50px auto;
  overflow: hidden;
  box-shadow:0 0 5px rgba(0,0,0,1);
  background-size: cover;
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;}@-webkit-keyframes "loops" {
    0% {
        background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
    }
    25% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
    }
    50% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
    }
    75% {
        background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
    }
    100% {
        background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
    }}

38 什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse

  • 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

  • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

  • 两个外边距一正一负时,折叠结果是两者的相加的和。

39 rgba()和opacity的透明效果有什么不同?

  • rgba()opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

  • rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

40 css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

  • 垂直方向:line-height

  • 水平方向:letter-spacing

41 如何垂直居中一个浮动元素?

/**方法一:已知元素的高宽**/#div1{
  background-color:#6699FF;
  width:200px;
  height:200px;
  position: absolute;        //父元素需要相对定位  top: 50%;
  left: 50%;
  margin-top:-100px ;   //二分之一的height,width  margin-left: -100px;}/**方法二:**/#div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;
  margin:auto;
  position: absolute;        //父元素需要相对定位  left: 0;
  top: 0;
  right: 0;
  bottom: 0;}

如何垂直居中一个<img>?(用更简便的方法。)

#container     /**<img>的容器设置如下**/{
    display:table-cell;
    text-align:center;
    vertical-align:middle;}

42 px和em的区别

  • pxem都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

  • 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em10px=0.625em

43 Sass、LESS是什么?大家为什么要使用他们?

  • 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS

  • 例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+WebkitFirefox),也可一在服务端运行 (借助 Node.js)

为什么要使用它们?

  • 结构清晰,便于扩展。

  • 可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对- 浏览器语法差异的重复处理,减少无意义的机械劳动。

  • 可以轻松实现多重继承。

  • 完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只- 是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译

44 知道css有个content属性吗?有什么作用?有什么应用?

css的content属性专门应用在 before/after伪元素上,用于来插入生成内容。最常见的应用是利用伪类清除浮动。

/**一种常见利用伪类清除浮动的代码**/.clearfix:after {
    content:".";       //这里利用到了content属性    display:block;
    height:0;
    visibility:hidden;
    clear:both; 
 }.clearfix {
    *zoom:1;}

45 水平居中的方法

  • 元素为行内元素,设置父元素text-align:center

  • 如果元素宽度固定,可以设置左右marginauto;

  • 如果元素为绝对定位,设置父元素positionrelative,元素设left:0;right:0;margin:auto;

  • 使用flex-box布局,指定justify-content属性为center

  • display设置为tabel-ceil

46 垂直居中的方法

  • 将显示方式设置为表格,display:table-cell,同时设置vertial-align:middle

  • 使用flex布局,设置为align-item:center

  • 绝对定位中设置bottom:0,top:0,并设置margin:auto

  • 绝对定位中固定高度时设置top:50%,margin-top值为高度一半的负值

  • 文本垂直居中设置line-heightheight

47 如何使用CSS实现硬件加速?

硬件加速是指通过创建独立的复合图层,让GPU来渲染这个图层,从而提高性能,

  • 一般触发硬件加速的CSS属性有transformopacityfilter,为了避免2D动画在 开始和结束的时候的repaint操作,一般使用tranform:translateZ(0)

48 重绘和回流(重排)是什么,如何避免?

  • DOM的变化影响到了元素的几何属性(宽高),浏览器重新计算元素的几何属性,其他元素的几何

  • 属性和位置也会受到影响,浏览器需要重新构造渲染树,这个过程称为重排,浏览器将受到影响的部分

  • 重新绘制到屏幕上的过程称为重绘。引起重排的原因有

    • 添加或者删除可见的DOM元素,

    • 元素位置、尺寸、内容改变,

    • 浏览器页面初始化,

    • 浏览器窗口尺寸改变,重排一定重绘,重绘不一定重排,

减少重绘和重排的方法:

  • 不在布局信息改变时做DOM查询

  • 使用cssText或者className一次性改变属性

  • 使用fragment

  • 对于多次重排的元素,如动画,使用绝对定位脱离文档流,让他的改变不影响到其他元素

49 说一说css3的animation

  • css3的animation是css3新增的动画属性,这个css3动画的每一帧是通过@keyframes来声明的,keyframes声明了动画的名称,通过fromto或者是百分比来定义

  • 每一帧动画元素的状态,通过animation-name来引用这个动画,同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式,

  • 这些相关的动画子属性有:animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态,如暂停运行等、animation-timing-function

  • 定义播放的方式,如恒速播放、艰涩播放等。

50 左边宽度固定,右边自适应

左侧固定宽度,右侧自适应宽度的两列布局实现

html结构

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div></div>

在外层div(类名为outer)的div中,有两个子div,类名分别为leftright,其中left为固定宽度,而right为自适应宽度

方法1:左侧div设置成浮动:float: left,右侧div宽度会自拉升适应

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;}.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;}.right {
    height: 200px;
    background-color: blue;}

方法2:对右侧:div进行绝对定位,然后再设置right=0,即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能,当我们将 width设置为 auto 的时候(或者不设置,默认为 auto ),绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;}.left {
    width: 200px;
    height: 200px;
    background-color: red;}.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;          
    right: 0;}

方法3:将左侧div进行绝对定位,然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;}.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;}.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;}

方法4:使用flex布局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;}.left {
    width: 200px;
    height: 200px;
    background-color: red;}.right {
    height: 200px;
    background-color: blue;
    flex: 1;}

#51 两种以上方式实现已知或者未知宽度的垂直水平居中

/** 1 **/.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }}/** 2 **/.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }}/** 3 **/.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }}/** 4 **/.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }}

52 如何实现小于12px的字体效果

transform:scale()这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个display:inline-block;

transform: scale(0.7);

css的属性,可以缩放大小