2、$CSS部分

一、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. link是HTML方式， @import是CSS方式

2. link最大限度支持并行下载，@import过多嵌套致使串行下载，出现FOUC

3. link能够经过rel="alternate stylesheet"指定候选样式

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

5. @import必须在样式规则以前，能够在css文件中引用其余文件

6. 整体来讲：link优于@import

四、什么是FOUC?如何避免

• Flash Of Unstyled Content：用户定义样式表加载以前浏览器使用默认样式显示文档，用户样式加载渲染以后再重新显示文档，形成页面闪烁。

• 解决方法：把样式表放到文档的head

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

• 建立规则：

  • 根元素
  • 浮动元素（float不是none）
  • 绝对定位元素（position取值为absolute或fixed）
  • display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能够包含浮动元素
  • 不被浮动元素覆盖
  • 阻止父子元素的margin折叠

六、display,float,position的关系

• 若是display为none，那么position和float都不起做用，这种状况下元素不产生框

• 不然，若是position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。

• 不然，若是float不是none，框是浮动的，display根据下表进行调整

• 不然，若是元素是根元素，display根据下表进行调整

• 其余状况下display的值为指定值

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

七、清除浮动的几种方式，各自的优缺点

• 父级div定义height

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

• 父级div定义伪类:after和zoom

• 父级div定义overflow:hidden

• 父级div也浮动，须要定义宽度

• 结尾处加br标签clear:both

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

八、为何要初始化CSS样式?

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化

九、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 单选框或复选框被选中

十、display有哪些值？说明他们的做用

• block 象块类型元素同样显示。

• none 缺省值。象行内元素类型同样显示。

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

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

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

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

十一、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？

• 有两种， IE盒子模型、W3C盒子模型；

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

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

十二、CSS优先级算法如何计算？

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

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

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

1三、对BFC规范的理解？

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

1四、谈谈浮动和清除浮动

• 浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上

1五、position的值， relative和absolute定位原点是

• absolute：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位

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

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

• static 默认值。没有定位，元素出如今正常的流中

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

1六、display:inline-block 何时不会显示间隙？(携程)

• 移除空格

• 使用margin负值

• 使用font-size:0

• letter-spacing

• word-spacing

1七、PNG,GIF,JPG的区别及如何选

• GIF

  • 8位像素，256色
  • 无损压缩
  • 支持简单动画
  • 支持boolean透明
  • 适合简单动画

• JPEG

  • 颜色限于256
  • 有损压缩
  • 可控制压缩质量
  • 不支持透明
  • 适合照片

• PNG

  • 有PNG8和truecolor PNG
  • PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  • 适合图标、背景、按钮

1八、行内元素float:left后是否变为块级元素？

• 浮动后，行内元素不会成为块状元素，可是能够设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但若是元素设置了浮动后再设置display:block;那就不会占一行。

1九、在网页中的应该使用奇数仍是偶数的字体？为何呢？

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

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

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

• 用于区分伪类和伪元素

2一、若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）

• 多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60＊1000ms ＝ 16.7ms

2二、CSS合并方法

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

2三、CSS不一样选择器的权重(CSS层叠的规则)

• ！important规则最重要，大于其它规则

• 行内样式规则，加1000

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

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

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

• 若是权值同样，则按照样式规则的前后顺序来应用，顺序靠后的覆盖靠前的规则

2四、列出你所知道能够改变页面布局的属性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能优化方面的实践

• css压缩与合并、Gzip压缩

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

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

2六、CSS3动画（简单动画的实现，如旋转等）

• 依靠CSS3中提出的三个属性：transition、transform、animation

• transition：定义了元素在变化过程当中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。

• transform：定义元素的变化结果，包含rotate、scale、skew、translate。

• animation：动画定义了动做的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及优缺点

• 优势能够加密，减小了http请求

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

2八、几种常见的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>

2九、stylus/sass/less区别

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

• Scss和LESS语法较为严谨，LESS要求必定要使用大括号“{}”，Scss和Stylus能够经过缩进表示层次与嵌套关系

• Scss无全局变量的概念，LESS和Stylus有相似于其它语言的做用域概念

• Sass是基于Ruby语言的，而LESS和Stylus能够基于NodeJS NPM下载相应库后进行编译；

30、postcss的做用

• 能够直观的理解为：它就是一个平台。为何说它是一个平台呢？由于咱们直接用它，感受不能干什么事情，可是若是让一些插件在它上面跑，那么将会很强大
• PostCSS 提供了一个解析器，它可以将 CSS 解析成抽象语法树
• 经过在 PostCSS 这个平台上，咱们可以开发一些插件，来处理咱们的CSS，好比热门的：autoprefixer
• postcss能够对sass处理事后的css再处理 最多见的就是autoprefixer