CSS面试题总结

说一下你对盒子模型的理解？

当我们对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础的盒模型，将所有的元素表示为一个个的矩形的盒子

一个盒子又四个部分组成，content（实际内容，显示文本和图像）、padding（内边距）、border（边框）、margin（外边距）

在css中，盒子模型可以分为：

w3c标准盒子模型（默认）

怪异盒子模型

标准盒子模型：

标准的盒子模型，就是浏览器默认的盒子模型

• 盒子的总宽度=width+padding+border+margin
• 盒子的总高度=height+padding+border+margin

怪异盒子模型

• 盒子总宽度 = width + margin;

• 盒子总高度 = height + margin;

Box-sizing：

box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法：

box-sizing: content-box|border-box|inherit:

• content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• inherit 指定 box-sizing 属性的值，应该从父元素继承

css选择器有哪些？优先级？哪些属性可以继承？ 

css选择器是css规则的第一部分

他是元素和其他部分结合起来告诉浏览器哪个html元素应当被选为应用规则中的css属性值的方式

css属性选择器：

id选择器：# 选择id为box的元素

类选择器：. 

标签选择器：选择标签

后代选择器：（#box div）：选择id为box元素内部的所有的div元素

子选择器：用>表示

相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

群组选择器：使用，分割

伪类选择器：：常见的又：hover

伪元素选择器：:before :after

属性选择器：[]

优先级：

内联 > ID选择器 > 类选择器 > 标签选择器

属性继承：

属性继承指的是我们给父级元素设置一些属性，后代元素就会自动拥有这些属性

属性继承，主要分为以下几种：

字体系列继承

文本系列属性

元素可见性

表格布局属性

列表属性

引用

光标属性

继承中比较特殊的几点：

• a 标签的字体颜色不能被继承

• h1-h6标签字体的大下也是不能被继承的

无继承的属性：

• display

• 文本属性：vertical-align、text-decoration

• 盒子模型的属性：宽度、高度、内外边距、边框等

• 背景属性：背景图片、颜色、位置等

• 定位属性：浮动、清除浮动、定位position等

• 生成内容属性：content、counter-reset、counter-increment

• 轮廓样式属性：outline-style、outline-width、outline-color、outline

• 页面样式属性：size、page-break-before、page-break-after

说说em/px/rem/vh/vw区别？

 传统的项目开发中，我们只会用到px、%、em这几个单位，只适用于大部分的项目开发

从c3开始，浏览器对计量单位的支持又提升到了另一个境界，新增了rem、vh、vw、vm、一些计量单位

在css中，可以分为长度单位、绝对单位

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

 px：像素，所谓像素就是显现在我们显示器上的一个个小点，每个像素的点都是同等大小，所以像素为计量单位被分在了绝对单位中

em：相对长度单位，相对于对当前对象内文本的字体尺寸，相对于浏览器的默认字体尺寸1em=16px

em的值不是固定的，em会继承父级元素的字体大小

em是相对长度单位

任意浏览器的默认字体高都是16px

rem：相对单位，相对的只是html根元素的font-size值，常用于自适应

vh、vw是根据窗口的宽度和高度分成了100等份，跟%容易混淆，%是相对父元素

说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别

 在css中我们通常使用px作为单位，在pc浏览器中css的一个像素对应着电脑屏幕的一个物理像素

这回造成一个错觉，会认为css中的像素就是设备的物理像素

但是实际并非如此，css中的像素只是一个抽象的单位，在不同的设备和环境中，css中1px所代表的设备物理像素是不同的

这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念

css像素：

适应于web编程，在css中以px为后缀，是一个长度单位，px是一个相对单位，相对的是设备像素

px会受到下面的因素的影响而变化：

• 每英寸像素（PPI）
• 设备像素比（DPR）

设备像素

 设备像素（device pixels），又称为物理像素

从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为pt

设备独立像素：

与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念

dpr：

设备像素比，代表设备独立像素到设备像素的转换关系

DPR=设备像素/设备独立像素

ppi:

每英寸像素，表示每英寸所包含的像素点数目，更确切的说应该是像素密度

总结：

无缩放情况下，1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）

在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

设备像素比（dpr） = 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清晰

css中，有哪些方式可以隐藏页面元素？区别?

display:none：元素不可见，不占据空间，无法响应点击事件，会导致重排重绘

visibility:hidden：不会触发重排，会触发重绘

opacity:0：表示元素的透明度，不引发重排，一般会引发重绘

设置height、width模型属性为0：盒模型设置为0，可以使用overflow：hidden隐藏子元素

position:absolute：将元素移除可视区域

clip-path：裁剪形式

 区别：

 谈谈你对BFC的理解？

bfc是块级格式化上下文，他是页面中的一块渲染区域，有一套属于自己的渲染规则

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

bfc的目的就是形成一个相对于外界完全独立的空间，让内部的子元素不会影响外部的元素

bfc触发的条件不限于：

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

应用场景：

 防止margin重叠（塌陷）

清除内部浮动

自适应多栏布局

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ 

利用定位+margin:auto：父相子绝

利用定位+margin:负值：

利用定位+transform：translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

table布局设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

flex布局

• display: flex时，表示该容器内部的元素将按照flex进行布局

• align-items: center表示这些元素将相对于本容器水平居中

• justify-content: center也是同样的道理垂直居中

grid布局：网格布局

总结：

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

水平居中

• 行内元素可设置：text-align: center
• flex布局设置父元素：display: flex; justify-content: center

垂直居中

• 单行文本父元素确认高度：height === line-height
• 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

水平居中

• 定宽: margin: 0 auto
• 绝对定位+left:50%+margin:负自身一半

垂直居中

• position: absolute设置left、top、margin-left、margin-top(定高)
• display: table-cell
• transform: translate(x, y)
• flex(不定高，不定宽)
• grid(不定高，不定宽)，兼容性相对比较差

 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢

无论是两栏布局还是三栏布局，使用的频率都非常高

 两栏布局：

实现的效果就是将页面分割程左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满

实现的思路：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

三栏布局：

 三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

实现三栏布局中间自适应的布局方式有：

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局

说说flexbox（弹性盒布局模型）,以及适用场景？

弹性布局，可以简便，完整，响应式的实现各种页面布局

flex常用的属性可以划分为容器属性和容器成员属性

容器属性有：

flex-direction：决定主轴的方向(即项目的排列方向)

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿

flex-wrap：弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

• nowrap（默认值）：不换行
• wrap：换行，第一行在下方
• wrap-reverse：换行，第一行在上方

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content：定义了项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：两个项目两侧间隔相等

align-items：定义项目在交叉轴上如何对齐

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content：定义了多根轴线的对齐方式

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch（默认值）：轴线占满整个交叉轴

 容器成员属性如下：

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow：上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定

flex-shrink：定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性

align-self：

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

 应用场景：

移动端，小程序开发

介绍一下grid网格布局？

网格布局，是一个二维的布局方式，由丛横相交的两组网格线形成的框架性布局结构，能够同时处理行于列

grid布局属性分为两大类：

容器属性：

display：grid 则该容器是一个块级元素，inline-grid 则容器元素为行内元素

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线

项目属性 

应用场景：

 两列布局，三列布局，页面居中

CSS3新增了哪些新特性？

css是一种标记语言，由浏览器解释执行用来使页面更加美观

css3是css的最新标准，向后兼容，css2/1都可以在css3中使用

新特性：

 边框：

• border-radius：创建圆角边框

• box-shadow：为元素添加阴影

• border-image：使用图片来绘制边框

box-shadow

设置元素阴影，设置属性如下：

• 水平阴影
• 垂直阴影
• 模糊距离(虚实)
• 阴影尺寸(影子大小)
• 阴影颜色
• 内/外阴影

背景：

 background-clip：背景画

background-origin：图片对其的方向

background-size属性常用来调整背景图片的大小，主要用于设定图片本身

background-break 属性用来控制背景怎样在这些不同的盒子中显示

文字

 word-wrap：

• normal：使用浏览器默认的换行
• break-all：允许在单词内换行

text-overflow设置或检索当当前行超过指定容器的边界时如何显示

• clip：修剪文本
• ellipsis：显示省略符号来代表被修剪的文本

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

• text-fill-color: 设置文字内部填充颜色

• text-stroke-color: 设置文字边界填充颜色

• text-stroke-width: 设置文字边界宽度

颜色：

• rgba分为两部分，rgb为颜色值，a为透明度
• hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition 过渡 

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

• 过度效果
• 持续时间

 transform 转换

 transform属性允许你旋转，缩放，倾斜或平移给定元素

animation 动画

• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画时间函数
• animation-delay：动画延迟时间
• animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
• animation-direction：动画执行方向
• animation-paly-state：动画播放状态
• animation-fill-mode：动画填充模式

渐变 

 颜色渐变是指在两个颜色之间平稳的过渡

• linear-gradient：线性渐变
• radial-gradient：径向渐变

css3动画有哪些？

 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块

css实现动画的方式，由以下几种：

transition 实现渐变动画

transition的属性如下：

• property:填写需要变化的css属性
• duration:完成过渡效果需要的时间单位(s或者ms)
• timing-function:完成效果的速度曲线
• delay: 动画效果的延迟触发时间

transform 转变动画

• translate：位移
• scale：缩放
• rotate：旋转
• skew：倾斜

animation 实现自定义动画

属性	描述	属性值
animation-duration	指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0
animation-timing-function	指定动画计时函数，即动画的速度曲线，默认是 "ease"	linear、ease、ease-in、ease-out、ease-in-out
animation-delay	指定动画延迟时间，即动画何时开始，默认是 0
animation-iteration-count	指定动画播放的次数，默认是 1
animation-direction 指定动画播放的方向	默认是 normal	normal、reverse、alternate、alternate-reverse
animation-fill-mode	指定动画填充模式。默认是 none	forwards、backwards、both
animation-play-state	指定动画播放状态，正在运行或暂停。默认是 running	running、pauser
animation-name	指定 @keyframes 动画的名称

 怎么理解回流跟重绘？什么场景下会触发？

• 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

• 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

触发回流

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

• 颜色的修改

• 文本方向的修改

• 阴影的修改

浏览器优化机制：

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

如何减少重绘回流

避免设置多项内联样式

应用元素的动画，使用position属性的fixed或absolute值

避免应用table布局

使用css3硬件加速

避免使用css的js表达式

 什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境进行调整

响应式网站常见的特点：

同时适配pc+平板+手机

标签导航在接近受持终端设备使改变为经典的抽屉式导航

网站的布局会根据视口来跳帧模块的大小和位置

实习方式：

 媒体查询：使用@Media查询，可以针对不同的媒体类型定义不同的样式

使用百分比实现响应式效果

vw/vh：相对于视图窗口的宽高度

rem：对于根元素html中font-size属性，默认浏览器的字体大小是16px，1rem=16px

总结：

响应式布局优点可以看到：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 如果要做优化，CSS提高性能的方法有哪些？

 每一个网页都离不开css，很多人认为css主要是用来完成页面布局的，像一些细节或者优化，但是这种想发是不对的

实现方式

内联首屏关键CSS

较大的css代码不适合内联，页面首要内容出现在屏幕的时间影响着用户体验，而通过内联css关键代码能够使浏览器在下载完html后就能立即渲染

异步加载CSS

在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容

前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案

• 使用javascript将link标签插到head标签最后
• 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
• 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择器

• 不要嵌套使用过多复杂选择器，最好不要三层以上
• 使用id选择器就没必要再进行嵌套
• 通配符和属性选择器效率最低，避免使用

减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

不要使用@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

如何实现单行／多行文本溢出的省略样式？  

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

对于文本的溢出，我们可以分成两种形式：

单行文本溢出

理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现

• text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
• white-space：设置文字在一行显示，不能换行
• overflow：文字长度超出限定宽度，则隐藏超出的内容

overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础

text-overflow属性值有如下：

• clip：当对象内文本溢出部分裁切掉
• ellipsis：当对象内文本溢出时显示省略标记（...）

多行文本溢出

多行文本溢出的时候，我们可以分为两种情况：

基于高度截断：伪元素 + 定位

• position: relative：为伪元素绝对定位
• overflow: hidden：文本溢出限定的宽度就隐藏内容）
• position: absolute：给省略号绝对定位
• line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
• height: 40px：设定当前元素高度
• ::after {} ：设置省略号样式

基于行数截断

• -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
• display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
• -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
• overflow: hidden：文本溢出限定的宽度就隐藏内容
• text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

 如何使用css完成视差滚动效果?

 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页解刨成：背景层、内容层、悬浮层

当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果

使用css形式实现视觉差滚动效果的方式有：

background-attachment

• scroll：默认值，背景图像会随着页面其余部分的滚动而移动
• fixed：当页面的其余部分滚动时，背景图像不会移动
• inherit：继承父元素background-attachment属性的值

transform:translate3D

• transform: css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,等等
• perspective: css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感

CSS如何画一个三角形？原理是什么 

 盒子模型默认情况下是一个矩形

.border {
        width: 50px;
        height: 50px;
        border: 2px solid;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
    }

将border设置为50px， 

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

让Chrome支持小于12px 的文字方式有哪些？区别？ 

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

• 中文版浏览器

与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

• 系统级最小字号

浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中，不能奢求用户更改浏览器设置

对于文本需要以更小的字号来显示，就需要用到一些小技巧

解决方案：

zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

• zoom:50%，表示缩小到原来的一半
• zoom:0.5，表示缩小到原来的一半

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

-webkit-text-size-adjust:none

 

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

属性值：

• percentage：字体显示的大小；
• auto：默认，字体大小会根据设备/浏览器来自动调整；
• none:字体大小不会自动调整

总结：

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

说说对Css预编语言的理解？有哪些区别？

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

Css预处理器便是针对上述问题的解决方案

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

 Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

sass：2007年诞生，最早也是最成熟的css预处理器，文件后缀名为.sass与scss，可以严格按照sass缩进方式省去大括号和分号

less：2009年出现，受sass影响较大，优点是简单和兼容css，缺点就是编程功能不够

stylus：2010年产生，来自node.js社区，主要是给node项目进行css预处理，是一种新型的语言，可以创建健壮的动态的，富有表现力的css

区别：

 变量（variables）

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

sass声明的变量跟less十分的相似，只是变量名前面使用@开头

stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=

在stylus中我们不建议使用@符号开头声明变量

作用域（scope）

sass中不存在全局变量

less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

代码混合（ mixins）

在less中，混合的用法是指将定义好的ClassA中引入另一个已经定义的Class，也能使用够传递参数，参数变量为@声明

Sass声明mixins时需要使用@mixinn，后面紧跟mixin的名，也可以设置参数，参数名为变量$声明的形式

stylus中的混合和前两款Css预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接

嵌套（nested rules）：

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

代码模块化（Modules）

模块化就是将Css代码分成一个个模块