HTML5 中手势原理分析与数学知识的实践

技术共享, 精选文章

(点击上方公众号,可快速关注)

作者:郭东东

https://segmentfault.com/a/1190000010511484

 

引言

在这触控屏的时代,人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验,手势是最直接且最为有效的交互方式,一个好的手势交互,能降低用户的使用成本和流程,大大提高了用户的体验。

近期,公司的多个项目中都对手势有着较高的需求,已有的手势库无法完全cover,因此便撸了一个轻量、便于使用的移动端手势库。这篇博文主要是解析了移动端常用手势的原理,及从前端的角度学习过程中所使用的数学知识。希望能对大家有一点点的启发作用,也期待大神们指出不足甚至错误,感恩。

主要讲解项目中经常使用到的五种手势:

  • 拖动: drag

  • 双指缩放: pinch

  • 双指旋转: rotate

  • 单指缩放: singlePinch

  • 单指旋转: singleRotate

Tips :
因为 tap 及 swipe 很多基础库中包含,为了轻便,因此并没有包含,但如果需要,可进行扩展;

实现原理

众所周知,所有的手势都是基于浏览器原生事件touchstart, touchmove, touchend, touchcancel进行的上层封装,因此封装的思路是通过一个个相互独立的事件回调仓库handleBus,然后在原生touch事件中符合条件的时机触发并传出计算后的参数值,完成手势的操作。实现原理较为简单清晰,先不急,我们先来理清一些使用到的数学概念并结合代码,将数学运用到实际问题中,数学部分可能会比较枯燥,但希望大家坚持读完,相信会收益良多。

 

基础数学知识函数

我们常见的坐标系属于线性空间,或称向量空间(Vector Space)。这个空间是一个由点(Point) 和 向量(Vector) 所组成集合;

点(Point)

可以理解为我们的坐标点,例如原点O(0,0),A(-1,2),通过原生事件对象的touches可以获取触摸点的坐标,参数index代表第几接触点;

向量(Vector)

是坐标系中一种 既有大小也有方向的线段,例如由原点O(0,0)指向点A(1,1)的箭头线段,称为向量a,则a=(1-0,1-0)=(1,1);

如下图所示,其中i与j向量称为该坐标系的单位向量,也称为基向量,我们常见的坐标系单位为1,即i=(1,0);j=(0,1);

获取向量的函数:

向量模

代表 向量的长度,记为|a|,是一个标量,只有大小,没有方向;

几何意义代表的是以x,y为直角边的直角三角形的斜边,通过勾股定理进行计算;

getLength函数:

向量的数量积

向量同样也具有可以运算的属性,它可以进行加、减、乘、数量积和向量积等运算,接下来就介绍下我们使用到的数量积这个概念,也称为点积,被定义为公式:

当a=(x1,y1),b=(x2,y2),则a·b=|a|·|b|·cosθ=x1·x2+y1·y2;

共线定理

共线,即两个向量处于 平行 的状态,当a=(x1,y1),b=(x2,y2),则存在唯一的一个实数λ,使得a=λb,代入坐标点后,可以得到 x1·y2= y1·x2;

因此当x1·y2-x2·y1>0 时,既斜率 ka > kb ,所以此时b向量相对于a向量是属于顺时针旋转,反之,则为逆时针;

旋转角度

通过数量积公式我们可以推到求出两个向量的夹角:

cosθ=(x1·x2+y1·y2)/(|a|·|b|);

然后通过共线定理我们可以判断出旋转的方向,函数定义为:

矩阵与变换

由于空间最本质的特征就是其可以容纳运动,因此在线性空间中,

我们用向量来刻画对象,而矩阵便是用来描述对象的运动;

而矩阵是如何描述运动的呢?

我们知道,通过一个坐标系基向量便可以确定一个向量,例如 a=(-1,2),我们通常约定的基向量是 i = (1,0) 与 j = (0,1); 因此:

a = -1i + 2j = -1(1,0) + 2(0,1) = (-1+0,0+2) = (-1,2);

而矩阵变换的,其实便是通过矩阵转换了基向量,从而完成了向量的变换;

例如上面的栗子,把a向量通过矩阵(1,2,3,0)进行变换,此时基向量i由 (1,0)变换成(1,-2)j(0,1)变换成(3,0),沿用上面的推导,则

a = -1i + 2j = -1(-1,2) + 2(3,0) = (5,-2);

如下图所示:

A图表示变换之前的坐标系,此时a=(-1,2),通过矩阵变换后,基向量i,j的变换引起了坐标系的变换,变成了下图B,因此a向量由(-1,2)变换成了(5,-2);

其实向量与坐标系的关联不变(a = -1i+2j),是基向量引起坐标系变化,然后坐标系沿用关联导致了向量的变化;

结合代码

其实CSS的transform等变换便是通过矩阵进行的,我们平时所写的translate/rotate等语法类似于一种封装好的语法糖,便于快捷使用,而在底层都会被转换成矩阵的形式。例如transform:translate(-30px,-30px)编译后会被转换成transform : matrix(1,0,0,1,30,30);

通常在二维坐标系中,只需要 2X2 的矩阵便足以描述所有的变换了, 但由于CSS是处于3D环境中的,因此CSS中使用的是 3X3 的矩阵,表示为:

其中第三行的0,0,1代表的就是z轴的默认参数。这个矩阵中,(a,b) 即为坐标轴的 i基,而(c,d)既为j基,e为x轴的偏移量,f为y轴的偏移量;因此上栗便很好理解,translate并没有导致i,j基改变,只是发生了偏移,因此translate(-30px,-30px) ==> matrix(1,0,0,1,30,30)~

所有的transform语句,都会发生对应的转换,如下:

// 发生偏移,但基向量不变;

transform:translate(x,y) ==> transform:matrix(1,0,0,1,x,y)

 

// 基向量旋转;

transform:rotate(θdeg)==> transform:matrix(cos(θ·π/180),sin(θ·π/180),sin(θ·π/180),cos(θ·π/180),0,0)

 

// 基向量放大且方向不变;

transform:scale(s) ==> transform:matrix(s,0,0,s,0,0)

translate/rotate/scale等语法十分强大,让我们的代码更为可读且方便书写,但是matrix有着更强大的转换特性,通过matrix,可以发生任何方式的变换,例如我们常见的镜像对称,transform:matrix(-1,0,0,1,0,0);

MatrixTo

然而matrix虽然强大,但可读性却不好,而且我们的写入是通过translate/rotate/scale的属性,然而通过getComputedStyle读取到的 transform却是matrix:

transform:matrix(1.41421, 1.41421, -1.41421, 1.41421, -50, -50);

请问这个元素发生了怎么样的变化?。。这就一脸懵逼了。-_-|||

因此,我们必须要有个方法,来将matrix翻译成我们更为熟悉的translate/rotate/scale方式,在理解了其原理后,我们便可以着手开始表演咯~

我们知道,前4个参数会同时受到rotatescale的影响,具有两个变量,因此需要通过前两个参数根据上面的转换方式列出两个不等式:

cos(θ·π/180)*s=1.41421;

sin(θ·π/180)*s=1.41421;

将两个不等式相除,即可以轻松求出θs了,perfect!!函数如下:

手势原理

接下来我们将上面的函数用到实际环境中,通过图示的方式来模拟手势的操作,简要地讲解手势计算的原理。希望各位大神理解这些基础的原理后,能创造出更多炫酷的手势,像我们在mac触控板上使用的一样。

下面图例:

圆点: 代表手指的触碰点;

两个圆点之间的虚线段: 代表双指操作时组成的向量;

a向量/A点:代表在 touchstart 时获取的初始向量/初始点;

b向量/B点:代表在 touchmove 时获取的实时向量/实时点;

坐标轴底部的公式代表需要计算的值;

Drag(拖动事件)

上图是模拟了拖动手势,由A点移动到B点,我们要计算的便是这个过程的偏移量;

因此我们在touchstart中记录初始点A的坐标:

// 获取初始点A;

let startPoint = getPoint(ev,0);

 

然后在touchmove事件中获取当前点并实时的计算出△x△y

// 实时获取初始点B;

let curPoint = getPoint(ev,0);

 

// 通过A、B两点,实时的计算出位移增量,触发 drag 事件并传出参数;

_eventFire(‘drag’, {

    delta{

        deltaXcurPoint.x – startPoint.x,

        deltaYcurPoint.y – startPoint.y,

    },

    originev,

});

Tips: fire函数即遍历执行drag事件对应的回调仓库即可;

Pinch(双指缩放)

上图是双指缩放的模拟图,双指由a向量放大到b向量,通过初始状态时的a向量的模与touchmove中获取的b向量的模进行计算,便可得出缩放值:

// touchstart中计算初始双指的向量模;

let vector1 = getVector(secondPoint, startPoint);

let pinchStartLength = getLength(vector1);

 

// touchmove中计算实时的双指向量模;

let vector2 = getVector(curSecPoint, curPoint);

let pinchLength = getLength(vector2);

this._eventFire(‘pinch’, {

    delta{

        scalepinchLength / pinchStartLength,

    },

    originev,

});

Rotate(双指旋转)

初始时双指向量a,旋转到b向量,θ便是我们需要的值,因此只要通过我们上面构建的getAngle函数,便可求出旋转的角度:

// a向量;

let vector1 = getVector(secondPoint, startPoint);

 

// b向量;

let vector2 = getVector(curSecPoint, curPoint);

 

// 触发事件;

this._eventFire(‘rotate’, {

    delta{

        rotategetAngle(vector1, vector2),

    },

    originev,

});

singlePinch(单指缩放)

与上面的手势不同,单指缩放和单指旋转都需要多个特有概念:

操作元素(operator):需要操作的元素。上面三个手势其实并不关心操作元素,因为单纯靠手势自身,便能计算得出正确的参数值,而单指缩放和旋转需要依赖于操作元素的基准点(操作元素的中心点)进行计算;

按钮:因为单指的手势与拖动(drag)手势是相互冲突的,需要一种特殊的交互方式来进行区分,这里是通过特定的区域来区分,类似于一个按钮,当在按钮上操作时,是单指缩放或者旋转,而在按钮区域外,则是常规的拖动,实践证明,这是一个用户很容易接受且体验较好的操作方式;

图中由a向量单指放大到b向量,对操作元(正方形)素进行了中心放大,此时缩放值即为b向量的模 / a向量的模;

// 计算单指操作时的基准点,获取operator的中心点;

let singleBasePoint = getBasePoint(operator);

 

// touchstart 中计算初始向量模;

let pinchV1 = getVector(startPoint,singleBasePoint);

singlePinchStartLength = getLength(pinchV1);

 

// touchmove 中计算实时向量模;

pinchV2 = getVector(curPoint, singleBasePoint);

singlePinchLength = getLength(pinchV2);

 

// 触发事件;

this._eventFire(‘singlePinch’, {

    delta{

        scalesinglePinchLength / singlePinchStartLength,

    },

    originev,

});

singleRotate(单指旋转)

结合单指缩放和双指旋转,可以很简单的知道 θ便是我们需要的旋转角度;

// 获取初始向量与实时向量

let rotateV1 = getVector(startPoint, singleBasePoint);

let rotateV2 = getVector(curPoint, singleBasePoint);

 

// 通过 getAngle 获取旋转角度并触发事件;

this._eventFire(‘singleRotate’, {

    delta{

        rotategetAngle(rotateV1, rotateV2),

    },

    originev,

});

运动增量

由于touchmove事件是个高频率的实时触发事件,一个拖动操作,其实触发了N次的touchmove事件,因此计算出来的值只是一种增量,即代表的是一次 touchmove事件增加的值,只代表一段很小的值,并不是最终的结果值,因此需要由mtouch.js外部维护一个位置数据,类似于:

//    真实位置数据;

let dragTrans = {x = 0,y = 0};

 

// 累加上 mtouch 所传递出的增量 deltaX 与 deltaY;

dragTrans.x += ev.delta.deltaX;

dragTrans.y += ev.delta.deltaY;

 

// 通过 transform 直接操作元素;

set($drag,dragTrans);

初始位置

维护外部的这个位置数据,如果初始值像上述那样直接取0,则遇到使用css设置了transform属性的元素便无法正确识别了,会导致操作元素开始时瞬间跳回(0,0)的点,因此我们需要初始去获取一个元素真实的位置值,再进行维护与操作。此时,便需要用到上面我们提到的getComputedStyle方法与matrixTo函数:

// 获取css transform属性,此时得到的是一个矩阵数据;

// transform:matrix(1.41421,1.41421,-1.41421,1.41421,-50,-50);

let style = window.getComputedStyle(el,null);

let cssTrans = style.transform || style.webkitTransform;

 

// 按规则进行转换,得到:

let initTrans = _.matrixTo(cssTrans);

 

// {x:-50,y:-50,scale:2,rotate:45};

// 即该元素设置了:transform:translate(-50px,-50px) scale(2) rotate(45deg);

结语

至此,相信大家对手势的原理已经有基础的了解,基于这些原理,我们可以再封装出更多的手势,例如双击,长按,扫动,甚至更酷炫的三指、四指操作等,让应用拥有更多人性化的特质。

基于以上原理,我封装了几个常见的工具:(求star -.-)

Tips: 因为只针对移动端,需在移动设备中打开demo,或者pc端开启mobile调试模式!

  1. mtouch.js : 移动端的手势库,封装了上述的五种手势,精简的api设计,涵盖了常见的手势交互,基于此也可以很方便的进行扩展。

  2. touchkit.js : 基于mtouch所封装的一层更贴近业务的工具包,可用于制作多种手势操作业务,一键开启,一站式服务。

  3. mcanvas.js : 基于canvas 开放极简的api实现图片 一键导出等。

致谢

  • 张鑫旭: 获取元素CSS值之getComputedStyle方法熟悉

  • 张鑫旭:理解CSS3 transform中的Matrix(矩阵)

  • AlloyTeam团队的AlloyFinger

  • hcysunyangd: 从矩阵与空间操作的关系理解CSS3的transform

  • 线性代数的理解 学完再看觉得自己弱爆了

 

 

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

CSS布局解决方案(终结版)

技术共享, 精选文章

(点击上方公众号,可快速关注)

作者:无悔铭

https://segmentfault.com/a/1190000013565024

 

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1)使用inline-block+text-align

(1)原理、用法

  • 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。

  • 用法:对子框设置display:inline-block,对父框设置text-align:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .child{

 

    1.    display:inline-block;

 

    1. }

 

    1. .parent{

 

    1.    text-align:center;

 

    1. }

 

(3)优缺点

  • 优点:兼容性好,甚至可以兼容ie6、ie7

  • 缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原

2)使用table+margin

(1)原理、用法

 

    • 原理:先将子框设置为块级表格来显示(类似 ),再设置子框居中以达到水平居中。

    • 用法:对子框设置display:table,再设置margin:0 auto。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .child {

 

    1.    display:table;

 

    1.    margin:0 auto;

 

    1. }

 

(3)优缺点:

      • 优点:只设置了child,ie8以上都支持

      • 缺点:不支持ie6、ie7,将div换成table

3)使用absolute+transform

(1)原理、用法

      • 原理:将子框设置为绝对定位,移动子框,使子框左侧距离相对框左侧边框的距离为相对框宽度的一半,再通过向左移动子框的一半宽度以达到水平居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。

      • 用法:对父框设置position:relative,对子框设置position:absolute,left:50%,transform:translateX(-50%)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    left:50%;

 

    1.    transform:translateX(-50%);

 

    1. }

 

(3)优缺点

      • 优点:居中元素不会对其他的产生影响

      • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀

4)使用flex+margin

(1)原理、用法

      • 原理:通过CSS3中的布局利器flex将子框转换为flex item,再设置子框居中以达到居中。

      • 用法:先将父框设置为display:flex,再设置子框margin:0 auto。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .child {

 

    1.    margin:0 auto;

 

    1. }

 

(3)优缺点

      • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

5)使用flex+justify-content

(1)原理、用法

      • 原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

      • 用法:先将父框设置为display:flex,再设置justify-content:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1.    justify-content:center;

 

    1. }

 

(3)优缺点

      • 优点:设置parent即可

      • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1)使用table-cell+vertical-align

(1)原理、用法

      • 原理:通过将父框转化为一个表格单元格显示(类似 <td> 和 <th>),再通过设置属性,使表格单元格内容垂直居中以达到垂直居中。

      • 用法:先将父框设置为display:table-cell,再设置vertical-align:middle。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table-cell;

 

    1.    vertical-align:middle;

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好,ie8以上均支持

2)使用absolute+transform

(1)原理、用法

      • 原理:类似于水平居中时的absolute+transform原理。将子框设置为绝对定位,移动子框,使子框上边距离相对框上边边框的距离为相对框高度的一半,再通过向上移动子框的一半高度以达到垂直居中。当然,在此之前,我们需要设置父框为相对定位,使父框成为子框的相对框。

      • 用法:先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    top:50%;

 

    1.    transform:translateY(-50%);

 

    1. }

 

(3)优缺点

      • 优点:居中元素不会对其他的产生影响

      • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀

3)使用flex+align-items

(1)原理、用法

      • 原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

      • 用法:先将父框设置为position:flex,再设置align-items:center。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:flex;

 

    1.    align-items:center;

 

    1. }

 

(3)优缺点

      • 优点:只设置parent

      • 缺点:兼容性存在一定问题

水平垂直居中

1)使用absolute+transform

(1)原理、用法

      • 原理:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)。

      • 见水平居中的3)和垂直居中的2)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    position:relative;

 

    1. }

 

    1. .child {

 

    1.    position:absolute;

 

    1.    left:50%;

 

    1.    top:50%;

 

    1.    transform:tranplate(-50%,-50%);

 

    1. }

 

(3)优缺点

      • 优点:child元素不会对其他元素产生影响

      • 缺点:兼容性存在一定问题

2)使用inline-block+text-align+table-cell+vertical-align

(1)原理、用法

      • 原理:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将二者结合起来。详见:水平居中的1)和垂直居中的1)。

      • 见水平居中的1)和垂直居中的1)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    text-align:center;

 

    1.    display:table-cell;

 

    1.    vertical-align:middle;

 

    1. }

 

    1. .child {

 

    1.    display:inline-block;

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好

3)使用flex+justify-content+align-items

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的justify-content和align-items,从而达到水平垂直居中。详见:水平居中的4)和垂直居中的3)。

      • 见水平居中的4)和垂直居中的3)。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="child>DEMO</div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1.    justify-content:center;

 

    1.    align-items:center;

 

    1. }

 

(3)优缺点

      • 优点:只设置了parent

      • 缺点:兼容性存在一定问题

多列布局

定宽+自适应

1)使用float+overflow

(1)原理、用法

      • 原理:通过将左边框脱离文本流,设置右边规定当内容溢出元素框时发生的事情以达到多列布局。

      • 用法:先将左框设置为float:left、width、margin-left,再设置实际的右框overflow:hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    overflow:hidden;

 

    1. }

 

(3)优缺点

      • 优点:简单

      • 缺点:不支持ie6

2)使用float+margin

(1)原理、用法

      • 原理:通过将左框脱离文本流,加上右框向右移动一定的距离,以达到视觉上的多列布局。

      • 用法:先将左框设置为float:left、margin-left,再设置右框margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1. }

 

    1. .right {

 

    1.    margin-left:120px;

 

    1. }

 

(3)优缺点

      • 优点:简单,易理解

      • 缺点:兼容性存在一定问题,ie6下有3px的bug。right下的p清除浮动将产生bug

3)使用float+margin(改良版)

(1)原理、用法

      • 原理:在1)的基础之上,通过向右框添加一个父框,再加上设置左、右父框属性使之产生BFC以去除bug。

      • 用法:先将左框设置为float:left、margin-left、position:relative,再设置右父框float:right、width:100%、margin-left,最后设置实际的右框margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="rigth-fix">

 

    1.        <div class="right">

 

    1.            <p>right</p>

 

    1.            <p>right</p>

 

    1.        </div>

 

    1.    </div>

 

    1. </div>

 

    1. .left {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    position:relative;

 

    1. }

 

    1. .right-fix {

 

    1.    float:right;

 

    1.    width:100%;

 

    1.    margin-left:-100px;

 

    1. }

 

    1. .right {

 

    1.    margin-left:120px;

 

    1. }

 

(3)优缺点

      • 优点:简单,易理解

4)使用table

(1)原理、用法

      • 原理:通过将父框设置为表格,将左右边框转化为类似于同一行的td,从而达到多列布局。

      • 用法:先将父框设置为display:table、width:100%、table-layout:fixed,再设置左右框display:table-cell,最后设置左框width、padding-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table;

 

    1.    width:100%;

 

    1.    table-layout:fixed;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    padding-right:20px;

 

    1. }

 

    1. .right,.left {

 

    1.    display:table-cell;

 

    1. }

 

5)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。

      • 用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

(3)优缺点

      • 优点:flex很强大

      • 缺点:兼容性存在一定问题,性能存在一定问题

两列定宽+一列自适应

(1)原理、用法

      • 原理:这种情况与两列定宽查不多。

      • 用法:先将左、中框设置为float:left、width、margin-right,再设置右框overflow:hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="center">

 

    1.        <p>center</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left,.center {

 

    1.    float:left;

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    overflow:hidden;

 

    1. }

 

不定宽+自适应

1)使用float+overflow

(1)原理、用法

      • 原理:这种情况与两列定宽查不多。

      • 用法:先将左框设置为float:left、margin-right,再设置右框overflow: hidden,最后设置左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left{

 

    1.        float: left;

 

    1.        margin-right: 20px;

 

    1.    }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left p{

 

    1.    width: 200px;

 

    1. }

 

(3)优缺点

      • 优点:简单

      • 缺点:ie6下兼容性存在一定问题

2)使用table

(1)原理、用法

      • 原理:通过将父框改变为表格,将左右框转换为类似于同一行的td以达到多列布局,设置父框宽度100%,给左框子元素一个固定宽度从而达到自适应。

      • 用法:先将父框设置为display: table、width: 100%,再设置左、右框display: table-cell,最后设置左框width: 0.1%、padding-right以及左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent{

 

    1.    display: table; width: 100%;

 

    1.    }

 

    1. .left,.right{

 

    1.    display: table-cell;

 

    1. }

 

    1. .left{

 

    1.    width: 0.1%;

 

    1.    padding-right: 20px;

 

    1. }

 

    1. .left p{

 

    1.    width:200px;

 

    1. }

 

(3)优缺点

      • 缺点:ie6 ie7不支持

3)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

      • 用法:先将父框设置为display:flex,再设置右框flex:1,最后设置左框margin-right:20px、左框中的内容width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

    1. .left p{

 

    1.    width: 200px;

 

    1. }

 

(3)优缺点

      • 优点:flex很强大

      • 缺点:兼容性存在一定问题,性能存在一定问题

两列不定宽+一列自适应

(1)原理、用法

      • 原理:这个情况与一列不定宽+一列自适应查不多。

      • 用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最后给左中框中的内容设置width。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="center">

 

    1.        <p>center</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .left,.center{

 

    1.    float: left;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left p,.center p{

 

    1.    width: 100px;

 

    1. }

 

等分布局

公式转化:

l=w*n+g*(n-1)->l=w*n+g*n-g->l+g=w+g*n

因此,我们需要解决两个问题:

      • 如何让总宽度增加g(即:L+g)

      • 如何让每个宽包含g(即:w+g)

1)使用float

(1)原理、用法

      • 原理:增大父框的实际宽度后,使用CSS3属性box-sizing进行布局的辅助。

      • 用法:先将父框设置为margin-left: -*px,再设置子框float: left、width: 25%、padding-left、box-sizing: border-box。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="column"><p>1</p></div>

 

    1.    <div class="column"><p>2</p></div>

 

    1.    <div class="column"><p>3</p></div>

 

    1.    <div class="column"><p>4</p></div>

 

    1. </div>

 

    1. .parent{

 

    1.    margin-left: -20px;//l增加g

 

    1. }

 

    1. .column{

 

    1.    float: left;

 

    1.    width: 25%;

 

    1.    padding-left: 20px;

 

    1.    box-sizing: border-box;//包含padding区域 w+g

 

    1. }

 

(3)优缺点

      • 优点:兼容性较好

      • 缺点:ie6 ie7百分比兼容存在一定问题

2)使用table

(1)原理、用法

      • 原理:通过增加一个父框的修正框,增大其宽度,并将父框转换为table,将子框转换为tabel-cell进行布局。

      • 用法:先将父框的修正框设置为margin-left: -*px,再设置父框display: table、width:100%、table-layout: fixed,设置子框display: table-cell、padding-left。

(2)代码实例

    1. <div class="parent-fix">

 

    1.    <div class="parent">

 

    1.        <div class="column"><p>1</p></div>

 

    1.        <div class="column"><p>2</p></div>

 

    1.        <div class="column"><p>3</p></div>

 

    1.        <div class="column"><p>4</p></div>

 

    1.    </div>

 

    1. </div>

 

    1. .parent-fix{

 

    1.    margin-left: -20px;//l+g

 

    1. }

 

    1. .parent{

 

    1.    display: table;

 

    1.    width:100%;

 

    1.    table-layout: fixed;

 

    1. }

 

    1. .column{

 

    1.    display: table-cell;

 

    1.    padding-left: 20px;//w+g

 

    1. }

 

(3)优缺点

      • 优点:结构和块数无关联

      • 缺点:增加了一层

3)使用flex

(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到等分布局。

      • 用法:将父框设置为display: flex,再设置子框flex: 1,最后设置子框与子框的间距margin-left。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="column"><p>1</p></div>

 

    1.    <div class="column"><p>2</p></div>

 

    1.    <div class="column"><p>3</p></div>

 

    1.    <div class="column"><p>4</p></div>

 

    1. </div>

 

    1. .parent{

 

    1.    display: flex;

 

    1. }

 

    1. .column{

 

    1.    flex: 1;

 

    1. }

 

    1. .column+.column{

 

    1.    margin-left:20px;

 

    1. }

 

(3)优缺点

      • 优点:代码量少,与块数无关

      • 缺点:兼容性存在一定问题

定宽+自适应+两块高度一样高

1)使用float

(1)原理、用法

      • 原理:通过过分加大左右子框的高度,辅助超出隐藏,以达到视觉上的等高。

      • 用法:将父框设置overflow: hidden,再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px,最后设置左框float: left、width、margin-right,右框overflow: hidden。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. p{

 

    1.    background: none!important;

 

    1. }

 

    1. .left,.right{

 

    1.    background: #444;

 

    1. }

 

    1. .parent{

 

    1.    overflow: hidden;

 

    1. }

 

    1. .left,.right{

 

    1.    padding-bottom: 9999px;

 

    1.    margin-bottom: -9999px;

 

    1. }

 

    1. .left{

 

    1.    float: left;

 

    1.    width: 100px;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right{

 

    1.    overflow: hidden;

 

    1. }

 

(3)优缺点

      • 优点:兼容性好

      • 缺点:伪等高,不是真正意义上的等高

2)使用table

(1)原理、用法

      • 原理:将父框转化为tabel,将子框转化为tabel-cell布局,以达到定宽+自适应+两块高度一样高。

      • 用法:先将父框设置为display:table、width:100%、table-layout:fixed,再设置左右框为display:table-cell,最后设置左框width、padding-right。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:table;

 

    1.    width:100%;

 

    1.    table-layout:fixed;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    padding-right:20px;

 

    1. }

 

    1. .right,.left {

 

    1.    display:table-cell;

 

    1. }

 

3)使用flex(1)原理、用法

      • 原理:通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。

      • 用法:将父框设置为display: flex,再设置左框width、margin-right,最后设置右框flex:1。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">

 

    1.        <p>left</p>

 

    1.    </div>

 

    1.    <div class="right">

 

    1.        <p>right</p>

 

    1.        <p>right</p>

 

    1.    </div>

 

    1. </div>

 

    1. .parent {

 

    1.    display:flex;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right:20px;

 

    1. }

 

    1. .right {

 

    1.    flex:1;

 

    1. }

 

(3)优缺点

      • 优点:代码少,flex很强大

      • 缺点:兼容性存在一定问题

4)使用display

(1)原理、用法

      • 原理:通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。

      • 用法:将父框设置为display: -webkit-box、width: 100%,再设置左框width、margin-right,最后设置右框-webkit-box-flex: 1。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="left">left</div>

 

    1.    <div class="right">right </div>

 

    1. </div>

 

    1. .parent {

 

    1.    width: 100%;

 

    1.    display: -webkit-box;

 

    1. }

 

    1. .left {

 

    1.    width:100px;

 

    1.    margin-right: 20px;

 

    1. }

 

    1. .right {

 

    1.    -webkit-box-flex: 1;

 

    1. }

 

(3)优缺点

      • 缺点:兼容性存在较大的问题

全屏布局

全屏布局的特点
      • 滚动条不是全局滚动条,而是出现在内容区域里,往往是主内容区域

      • 浏览器变大时,撑满窗口

全屏布局的方法

1)使用position

(1)原理、用法

      • 原理:将上下部分固定,中间部分使用定宽+自适应+两块高度一样高。

      • 用法:见实例。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="top">top</div>

 

    1.    <div class="left">left</div>

 

    1.    <div class="right">

 

    1.        <div class="inner">right</div>

 

    1.    </div>

 

    1.    <div class="bottom">bottom</div>

 

    1. </div>

 

    1. html,body,.parent{

 

    1.    margin:0;

 

    1.    height:100%;

 

    1.    overflow:hidden;

 

    1. }

 

    1. body{

 

    1.    color:white;

 

    1. }

 

    1. .top{

 

    1.    position:absolute;

 

    1.    top:0;

 

    1.    left:0;

 

    1.    right:0;

 

    1.    height:100px;

 

    1.    background:blue;

 

    1. }

 

    1. .left{

 

    1.    position:absolute;

 

    1.    left:0;

 

    1.    top:100px;

 

    1.    bottom:50px;

 

    1.    width:200px;

 

    1.    background:red;

 

    1. }

 

    1. .right{

 

    1.    position:absolute;

 

    1.    left:200px;

 

    1.    top:100px;

 

    1.    bottom:50px;

 

    1.    right:0;

 

    1.    background:pink;

 

    1.    overflow: auto;

 

    1. }

 

    1. .right .inner{

 

    1.    min-height: 1000px;

 

    1. }

 

    1. .bottom{

 

    1.    position:absolute;

 

    1.    left:0;

 

    1.    right:0;

 

    1.    bottom:0;

 

    1.    height:50px;

 

    1.    background: black;

 

    1. }

 

(3)优缺点

      • 优点:兼容性好,ie6下不支持

2)使用flex

(1)原理、用法

      • 原理:通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。

      • 用法:见实例。

(2)代码实例

    1. <div class="parent">

 

    1.    <div class="top">top</div>

 

    1.    <div class="middle">

 

    1.        <div class="left">left</div>

 

    1.        <div class="right">

 

    1.            <div class="inner">right</div>

 

    1.        </div>

 

    1.    </div>

 

    1.    <div class="bottom">bottom</div>

 

    1. </div>

 

    1. html,body,.parent{

 

    1.    margin:0;

 

    1.    height:100%;

 

    1.    overflow:hidden;

 

    1. }

 

    1. body{

 

    1.    color: white;

 

    1. }

 

    1. .parent{

 

    1.    display: flex;

 

    1.    flex-direction: column;

 

    1. }

 

    1. .top{

 

    1.    height:100px;

 

    1.    background: blue;

 

    1. }

 

    1. .bottom{

 

    1.    height:50px;

 

    1.    background: black;

 

    1. }

 

    1. .middle{

 

    1.    flex:1;

 

    1.    display:flex;

 

    1. }

 

    1. .left{

 

    1.    width:200px;

 

    1.    background: red;

 

    1. }

 

    1. .right{

 

    1.    flex: 1;

 

    1.    overflow: auto;

 

    1.    background:pink;

 

    1. }

 

    1. .right .inner{

 

    1.    min-height: 1000px;

 

    1. }

 

(3)优缺点

      • 缺点:兼容性差,ie9及ie9以下不兼容

全屏布局相关方案的兼容性、性能和自适应一览表
方案 兼容性 性能 是否自适应
Position 部分自适应
Flex 较差 可自适应
Grid 较好 可自适应

当然,最最最最最后,如果您喜欢这片文章,可以疯狂点赞和收藏喔!!

 

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

常用在线工具网站

常用工具, 技术共享

 

 

 

 

 

 

 

推荐WordPress官网模板

官网模板, 技术共享

(请天阳安排维护此列表)

最好的开源信息系统

技术共享

(请管鹏波维护此列表)

免费模板库收藏

技术共享, 管理系统模板

(请李静安排维护此列表)

50道CSS基础面试题(附答案)

技术共享, 精选文章

(点击上方公众号,可快速关注)

作者:刘宁Leo 

https://segmentfault.com/a/1190000013325778

 

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

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

2 box-sizing属性?

用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽
border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3 CSS选择器有哪些?哪些属性可以继承?

CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)

可继承的属性:font-size, font-family, color

不可继承的样式:border, padding, margin, width, height

优先级(就近原则):!important > [ id > class > tag ]
!important 比内联优先级高

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

元素选择符: 1
class选择符: 10
id选择符:100
元素标签:1000

  1. !important声明的样式优先级最高,如果冲突再进行计算。
  2. 如果优先级相同,则选择最后出现的样式。
  3. 继承得到的样式的优先级最低。

 

5 CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

div:

border: 1px solid red;

margin: 0 auto;

height: 50px;

width: 80px;

 

浮动元素的上下左右居中:

border: 1px solid red;

float: left;

position: absolute;

width: 200px;

height: 100px;

left: 50%;

top: 50%;

margin: –50px 0 0100px;

 

绝对定位的左右居中:

border: 1px solid black;

position: absolute;

width: 200px;

height: 100px;

margin: 0 auto;

left: 0;

right: 0;

 

还有更加优雅的居中方式就是用flexbox,我以后会做整理。

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

 

inline(默认)–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值?

static(默认):按照正常文档流进行排列;
relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;
absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;
fixed(固定定位):所固定的参照对像是可视窗口。

9 CSS3有哪些新特性?

  1. RGBA和透明度
  2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
  3. word-wrap(对长的不可分割单词换行)word-wrap:break-word
  4. 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
  5. font-face属性:定义自己的字体
  6. 圆角(边框半径):border-radius 属性用于创建圆角
  7. 边框图片:border-image: url(border.png) 30 30 round
  8. 盒阴影:box-shadow: 10px 10px 5px #888888
  9. 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

 

10 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。

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

首先,需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;

height: 0;

bordertop: 40px solid transparent;

borderleft: 40px solid transparent;

borderright: 40px solid transparent;

borderbottom: 40px solid #ff0000;

 

12 一个满屏品字布局如何设计?

 

第一种真正的品字:

  1. 三块高宽是确定的;
  2. 上面那块用margin: 0 auto;居中;
  3. 下面两块用float或者inline-block不换行;
  4. 用margin调整位置使他们居中。

 

第二种全屏的品字布局:
上面的div设置成100%,下面的div分别宽50%,然后使用float或者inline使其不换行。

13 常见的兼容性问题?

  1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
  2. IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性。
  3. 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

     

    {

    backgroundcolor:#f1ee18;/*所有识别*/

    .backgroundcolor:#00deff\9; /*IE6、7、8识别*/

    +backgroundcolor:#a200ff;/*IE6、7识别*/

    _backgroundcolor:#1e0bd1;/*IE6识别*/

    }

     

  4. 设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。hack:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  5. IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
  6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  7. 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

 

 

14 为什么要初始化CSS样式

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

15 absolute的containing block计算方式跟正常流有什么不同?

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:

  1. 若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;
  2. 否则,则由这个祖先元素的 padding box 构成。

 

如果都找不到,则为 initial containing block。

补充:

  1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)
  2. absolute: 向上找最近的定位为absolute/relative的元素
  3. fixed: 它的containing block一律为根元素(html/body)

 

16 CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?

当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。

  1. chrome中,使用collapse值和使用hidden没有区别。
  2. firefox,opera和IE,使用collapse值和使用display:none没有什么区别。

 

17 display:none与visibility:hidden的区别?

display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

18 position跟display、overflow、float这些特性相互叠加后会怎么样?

display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。

19 对BFC规范(块级格式化上下文:block formatting context)的理解?

BFC规定了内部的Block Box如何布局。
定位方案:

  1. 内部的Box会在垂直方向上一个接一个放置。
  2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box 的左边,与包含块border box的左边相接触。
  4. BFC的区域不会与float box重叠。
  5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  6. 计算BFC的高度时,浮动元素也会参与计算。

 

满足下列条件之一就可触发BFC

  1. 根元素,即html
  2. float的值不为none(默认)
  3. overflow的值不为visible(默认)
  4. display的值为inline-block、table-cell、table-caption
  5. position的值为absolute或fixed

 

20 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题:

  1. 父元素的高度无法被撑开,影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素(内联元素)会跟随其后
  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

 

清除浮动的方式:

  1. 父级div定义height
  2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
  3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
  4. 父级div定义zoom

 

21 上下margin重合的问题

在重合元素外包裹一层容器,并触发该容器生成一个BFC。
例子:

<div class=“aside”></div>

<div class=“text”>

    <div class=“main”></div>

</div>

<!–下面是css代码–>

.aside {

            marginbottom: 100px;  

            width: 100px;

            height: 150px;

            background: #f66;

        }

        .main {

            margintop: 100px;

            height: 200px;

            background: #fcc;

        }

         .text{

            /*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/

            overflow: hidden;  //此时已经触发了BFC属性。

        }

 

22设置元素浮动后,该元素的display值是多少?

自动变成display:block

23 移动端的布局用过媒体查询吗?

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。

  1. <head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
  2. CSS : @media only screen and (max-device-width:480px) {/css样式/}

 

24 使用 CSS 预处理器吗?

Less sass

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

  1. 避免过度约束
  2. 避免后代选择符
  3. 避免链式选择符
  4. 使用紧凑的语法
  5. 避免不必要的命名空间
  6. 避免不必要的重复
  7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
  8. 避免!important,可以选择其他选择器
  9. 尽可能的精简规则,你可以合并不同类里的重复规则

 

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

CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

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

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

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

何时使用margin:

  1. 需要在border外侧添加空白
  2. 空白处不需要背景色
  3. 上下相连的两个盒子之间的空白,需要相互抵消时。

 

何时使用padding:

  1. 需要在border内侧添加空白
  2. 空白处需要背景颜色
  3. 上下相连的两个盒子的空白,希望为两者之和。

 

兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决。

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

当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

30 全屏滚动的原理是什么?用到了CSS的哪些属性?

  1. 原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位,也可以通过margin-top实现
  2. overflow:hidden;transition:all 1000ms ease;

 

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

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name=“’viewport’” content=“”width=device-width,” initialscale=“1.” maximumscale=“1,user-scalable=no””/>

32 视差滚动效果?

 

视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

  1. CSS3实现
    优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
  2. jQuery实现
    通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
    优点:能兼容到各个版本的,效果可控性好
    缺点:开发起来对制作者要求高
  3. 插件实现方式
    例如:parallax-scrolling,兼容性十分好

 

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

  1. 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
  2. ::before就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在于dom之中,只存在在页面之中。

 

:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after

34 你对line-height是如何理解的?

行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。

多行文本垂直居中:需要设置display属性为inline-block。

 

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

p{fontsize:10px;webkittransform:scale(0.8);} //0.8是缩放比例

 

36 让页面里的字体变清晰,变细用CSS怎么做?

 

-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。

37 position:fixed;在android下无效怎么处理?

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”/>

38 如果需要手动写动画,你认为最小时间间隔是多久,为什么?

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

 

39 li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:

  1. 可以将<li>代码全部写在一排
  2. 浮动li中float:left
  3. 在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px

 

40 display:inline-block 什么时候会显示间隙?

  1. 有空格时候会有间隙 解决:移除空格
  2. margin正值的时候 解决:margin使用负值
  3. 使用font-size时候 解决:font-size:0、letter-spacing、word-spacing

 

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

外层div使用position:relative;高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

42 png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?

  1. png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。
  2. jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
  3. gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
  4. webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。

 

43 style标签写在body后与body前有什么区别?

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。

45 阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。

 

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

测试 JavaScript 函数的性能

技术共享, 精选文章

(点击上方公众号,可快速关注)

 

编译:伯乐在线/Wing 

 

在软件中,性能一直扮演着重要的角色。在Web应用中,性能变得更加重要,因为如果页面速度很慢的话,用户就会很容易转去访问我们的竞争对手的网站。作为专业的web开发人员,我们必须要考虑这个问题。有很多“古老”的关于性能优化的最佳实践在今天依然可行,例如最小化请求数目,使用CDN以及不编写阻塞页面渲染的代码。然而,随着越来越多的web应用都在使用JavaScript,确保我们的代码运行的很快就变得很重要。

假设你有一个正在工作的函数,但是你怀疑它运行得没有期望的那样快,并且你有一个改善它性能的计划。那怎么去证明这个假设呢?在今天,有什么最佳实践可以用来测试JavaScript函数的性能呢?一般来说,完成这个任务的最佳方式是使用内置的performance.now()函数,来衡量函数运行前和运行后的时间。

在这篇文章中,我们会讨论如何衡量代码运行时间,以及有哪些技术可以避免一些常见的“陷阱”。

Performance.now()

高分辨率时间API提供了一个名为now()的函数,它返回一个DOMHighResTimeStamp对象,这是一个浮点数值,以毫秒级别(精确到千分之一毫秒)显示当前时间。单独这个数值并不会为你的分析带来多少价值,但是两个这样的数值的差值,就可以精确描述过去了多少时间。

这个函数除了比内置的Date对象更加精确以外,它还是“单调”的,简单说,这意味着它不会受操作系统(例如,你笔记本上的操作系统)周期性修改系统时间影响。更简单的说,定义两个Date实例,计算它们的差值,并不代表过去了多少时间。

“单调性”的数学定义是“(一个函数或者数值)以从不减少或者从不增加的方式改变”。

我们可以从另外一种途径来解释它,即想象使用它来在一年中让时钟向前或者向后改变。例如,当你所在国家的时钟都同意略过一个小时,以便最大化利用白天的时间。如果你在时钟修改之前创建了一个Date实例,然后在修改之后创建了另外一个,那么查看这两个实例的差值,看上去可能像“1小时零3秒又123毫秒”。而使用两个performance.now()实例,差值会是“3秒又123毫秒456789之一毫秒”。

在这一节中,我不会涉及这个API的过多细节。如果你想学习更多相关知识或查看更多如何使用它的示例,我建议你阅读这篇文章:Discovering the High Resolution Time API。

既然你知道高分辨率时间API是什么以及如何使用它,那么让我们继续深入看一下它有哪些潜在的缺点。但是在此之前,我们定义一个名为makeHash()的函数,在这篇文章剩余的部分,我们会使用它。

function makeHash(source) {

 var hash = 0;

 if (source.length === 0) return hash;

 for (var i = 0; i < source.length; i++) {

   var char = source.charCodeAt(i);

   hash = ((hash<<5)hash)+char;

   hash = hash & hash; // Convert to 32bit integer

 }

 return hash;

}

我们可以通过下面的代码来衡量这个函数的执行效率:

var t0 = performance.now();

var result = makeHash(‘Peter’);

var t1 = performance.now();

console.log(‘Took’, (t1 – t0).toFixed(4), ‘milliseconds to generate:’, result);

如果你在浏览器中运行这些代码,你应该看到类似下面的输出:

Took 0.2730 milliseconds to generate: 77005292

这段代码的在线演示如下所示:

记住这个示例后,让我们开始下面的讨论。

缺陷1 – 意外衡量不重要的事情

在上面的示例中,你可以注意到,我们在两次调用performance.now()中间只调用了makeHash()函数,然后将它的值赋给result变量。这给我们提供了函数的执行时间,而没有其他的干扰。我们也可以按照下面的方式来衡量代码的效率:

var t0 = performance.now();

console.log(makeHash(‘Peter’));  // bad idea!

var t1 = performance.now();

console.log(‘Took’, (t1 – t0).toFixed(4), ‘milliseconds’);

这个代码片段的在线演示如下所示:

但是在这种情况下,我们将会测量调用makeHash(‘Peter’)函数花费的时间,以及将结果发送并打印到控制台上花费的时间。我们不知道这两个操作中每个操作具体花费多少时间, 只知道总的时间。而且,发送和打印输出的操作所花费的时间会依赖于所用的浏览器,甚至依赖于当时的上下文。

或许你已经完美的意识到console.log方式是不可以预测的。但是执行多个函数同样是错误的,即使每个函数都不会触发I/O操作。例如:

var t0 = performance.now();

var name = ‘Peter’;

var result = makeHash(name.toLowerCase()).toString();

var t1 = performance.now();

console.log(‘Took’, (t1 – t0).toFixed(4), ‘milliseconds to generate:’, result);

同样,我们不会知道执行时间是怎么分布的。它会是赋值操作、调用toLowerCase()函数或者toString()函数吗?

缺陷 #2 – 只衡量一次

另外一个常见的错误是只衡量一次,然后汇总花费的时间,并以此得出结论。很可能执行不同的次数会得出完全不同的结果。执行时间依赖于很多因素:

  • 编辑器热身的时间(例如,将代码编译成字节码的时间)

  • 主线程可能正忙于其它一些我们没有意识到的事情

  • 你的电脑的CPU可能正忙于一些会拖慢浏览器速度的事情

持续改进的方法是重复执行函数,就像这样:

var t0 = performance.now();

for (var i = 0; i < 10; i++) {

 makeHash(‘Peter’);

}

var t1 = performance.now();

console.log(‘Took’, ((t1 – t0) / 10).toFixed(4), ‘milliseconds to generate’);

这个示例的在线演示如下所示:

这种方法的风险在于我们的浏览器的JavaScript引擎可能会使用一些优化措施,这意味着当我们第二次调用函数时,如果输入时相同的,那么JavaScript引擎可能会记住了第一次调用的输出,然后简单的返回这个输出。为了解决这个问题,你可以使用很多不同的输入字符串,而不用重复的使用相同的输入(例如‘Peter’)。显然,使用不同的输入进行测试带来的问题就是我们衡量的函数会花费不同的时间。或许其中一些输入会花费比其它输入更长的执行时间。

缺陷 #3 – 太依赖平均值

在上一节中,我们学习到的一个很好的实践是重复执行一些操作,理想情况下使用不同的输入。然而,我们要记住使用不同的输入带来的问题,即某些输入的执行时间可能会花费所有其它输入的执行时间都长。这样让我们退一步来使用相同的输入。假设我们发送同样的输入十次,每次都打印花费了多长时间。我们会得到像这样的输出:

Took 0.2730 milliseconds to generate: 77005292

Took 0.0234 milliseconds to generate: 77005292

Took 0.0200 milliseconds to generate: 77005292

Took 0.0281 milliseconds to generate: 77005292

Took 0.0162 milliseconds to generate: 77005292

Took 0.0245 milliseconds to generate: 77005292

Took 0.0677 milliseconds to generate: 77005292

Took 0.0289 milliseconds to generate: 77005292

Took 0.0240 milliseconds to generate: 77005292

Took 0.0311 milliseconds to generate: 77005292

请注意第一次时间和其它九次的时间完全不一样。这很可能是因为浏览器中的JavaScript引擎使用了优化措施,需要一些热身时间。我们基本上没有办法避免这种情况,但是会有一些好的补救措施来阻止我们得出一些错误的结论。

一种方式是去计算后面9次的平均时间。另外一种更加使用的方式是收集所有的结果,然后计算“中位数”。基本上,它会将所有的结果排列起来,对结果进行排序,然后取中间的一个值。这是performance.now()函数如此有用的地方,因为无论你做什么,你都可以得到一个数值。

让我们再试一次,这次我们使用中位数函数:

var numbers = [];

for (var i=0; i < 10; i++) {

 var t0 = performance.now();

 makeHash(‘Peter’);

 var t1 = performance.now();

 numbers.push(t1 – t0);

}

 

function median(sequence) {

 sequence.sort();  // note that direction doesn’t matter

 return sequence[Math.ceil(sequence.length / 2)];

}

 

console.log(‘Median time’, median(numbers).toFixed(4), ‘milliseconds’);

缺陷 #4 – 以可预测的方式比较函数

我们已经理解衡量一些函数很多次并取平均值总会是一个好主意。而且,上面的示例告诉我们使用中位数要比平均值更好。

在实际中,衡量函数执行时间的一个很好的用处是来了解在几个函数中,哪个更快。假设我们有两个函数,它们的输入参数类型一致,输出结果相同,但是它们的内部实现机制不一样。

例如,我们希望有一个函数,当特定的字符串在一个字符串数组中存在时,函数返回true或者false,但这个函数在比较字符串时不关心大小写。换句话说,我们不能直接使用Array.prototype.indexOf方法,因为这个方法是大小写敏感的。下面是这个函数的一个实现:

function isIn(haystack, needle) {

 var found = false;

 haystack.forEach(function(element) {

   if (element