听指挥的小孩——项目拾金（一）-优快云博客

本文深入探讨了CSS盒模型、浮动、BFC等布局概念，介绍了CSShack解决浏览器兼容性问题的方法，展示了如何利用CSS3制作动画效果。此外，还详细讲解了JavaScript定时器的工作原理及其常见问题解决技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码地址：https://github.com/zjjxj/Listen-command-kid.git

About CSS:

1.盒模型:

当你指定一个CSS元素的width和height属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加padding，border和margin。.
盒子模型分为两类：W3C标准盒子模型和IE盒子模型。这两者的关键差别就在于：
W3C盒子模型——height和width这两个值不包含 padding和border。
IE怪异模式中盒子模型——height和width这两个值包含 padding和border。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
解决IE8及更早版本不兼容问题可以在HTML页面声明即可。

参考文章：
http://www.runoob.com/css/css-boxmodel.html
http://blog.youkuaiyun.com/xujie_0311/article/details/42372871

2.float:

1.设置了浮动的元素会脱离普通流。

2.浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

3.元素同时应用了position: absolute及float属性，则float失效。

4.设置浮动的元素只会对它后一个元素造成影响，不会对它前面的元素造成影响。

5.设置浮动的元素display值会变成block。

6.清除浮动：
a.触发BFC，闭合浮动。

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
position（absolute，fixed）
fieldset元素

b.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。

在浮动元素末尾添加新标签。
使用 br标签和其自身的 html属性。
after 伪元素（最优）

参考文章：
http://www.cnblogs.com/lhb25/p/story-of-clear-float.html
http://luopq.com/2015/11/08/CSS-float/
http://www.cnblogs.com/coffeedeveloper/p/3145790.html

3.BFC （Block Formatting Contexts）：

参考文章：
http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html
http://sentsin.com/web/529.html

4.css hack:

什么是CSS hack？

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

参考文章：http://blog.youkuaiyun.com/freshlover/article/details/12132801

5.css制作动画：

1.transform(变形)：Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

demo: https://github.com/zjjxj/css-animate-demos/blob/master/demo1/transform.html
参考文章：http://www.w3cplus.com/content/css3-transform

2.transition(转换)：css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

demo:https://github.com/zjjxj/css-animate-demos/blob/master/demo2/transition.html
参考文章：http://www.w3cplus.com/content/css3-transition

3.animation(动画)：

参考文章：http://www.w3cplus.com/content/css3-animation

About JS

1.定时器：

//点击执行按钮（最终正确代码）
    $("button").onclick = function () {   
        setTimeout(function () {
            doCommand(inputValue.shift());
            if(inputValue.length>0){
                setTimeout(arguments.callee,1300);
            }
        },100)
        return false;
    };

写点击执行按钮依次执行指令这个功能的时候我遇到了两个问题。

第一个，我无法像预期一样逐条执行我存在数组inputValue中的指令并看到每条指令逐个执行的动画效果，因为我刚开始是这样写的：

$("button").onclick = function () {   
        inputValue.map(function(data){
            doCommand(data);
        })
        return false;
    };

这样做的后果就是我只能看到inputValue数组中所以指令并行后的效果。

于是，我想到了延时执行，就想到了setTimeOut，然后我就写了下面这段很扯的代码成功的把我的电脑跑卡了。

$("button").onclick = function () { 
        inputValue.map(function(data){
            setTimeOut(function(){
                doCommand(data);
            },500)
        })
        return false;
    };

最后通过各种google和看书，感觉这段代码出问题的原因应该是同时创建多个重复的定时器造成的性能损失，因为浏览器只有一个UI线程，而所有的定时器都在争夺运行时间。
同时，我也找到了解决这个bug的方法。就是使用链式setTimeout()调用。类似于下面这个模式：

   setTimeout(function(){

        //处理中

        setTimeout(arguments.callee,interval)
    },interval)

与这个方法相似的还有可以使用setInterval(),这个方法有一个天生的优点就是：当使用setInterval()时，仅当队列中没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这个优点就确保了不会同时有多个定时器在队列当中。但正是因为这个特点，导致重复定时器存在两个问题：1.某些间隔回被跳过。1.多个定时期的代码执行之间的间隔可能会比预期的小。幸运的是，这两个问题使用链式setTimeout()调用都能避免。

所以，总结来说，链式setTimeout()调用有3个优点：

同一时间，队列里只有一个定时器，不会出现性能问题或多个定时器连续运行导致无延迟。
不会有任何损失的间隔
可以起到分割任务的作用，避免了因为js代码过长导致用户界面被锁定的问题。

最后还要说一下我遇到的第二个问题，具体代码就不引了，总结下来就一句话需要一定记住：定时器是在执行完创建定时器代码那一刻才插入任务队列的，并且，队列里的任务必须要等到UI线程空闲的时候才能逐个执行。

在浏览器中，Javascript执行与UI更新是发生在同一个进程(浏览器UI线程)中的。UI线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲时被提取出来执行。所以Javascript的执行会阻塞UI更新;反之，UI更新也会阻塞Javascript的执行。给用户的表现就是浏览器在工作时短暂或长时间失去反应，用户的操作不能及时得到响应。而UI线程的阻塞很多时候是由于我们要在代码里进行长时间的脚本运算，超过了浏览器限制，导致浏览器失去响应，冻结用户界面。