1.块元素display属性设置为inline-block,并且当它们换行的时候,左右会出现3px的空白,不换行的话不会出现3px的空白;
不换行:<ul><li>1</li><li>2</li><li>3</li></ul>
换行:<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
为了解决这种换行出现空白的尴尬我们可以给其添加font-size:0;这样可以消除display:inline-block之间的留白;
2.一个元素浮动之后为什么要清除浮动,清除浮动的方法有哪些?
(1)浮动的原理:一个浮动的元素会向左或者向右浮动,直到遇到它的父元素或者最近的浮动元素后停止;
由于浮动框不在普通流中,所以普通流会表现出浮动框不存在的样子
当一个元素浮动之后，不会影响到该元素后面的块级框的布局(会向上占据浮动元素的位置)而只会影响内联框（通常是文本）的排列(文本框依然在原来的位置,并不会随着浮动框向上)，文档中的普通流就会表现得和浮动框不存在一样;当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
对元素的影响:
(1)位于浮动元素后面,且紧挨着浮动元素,这个元素会受到浮动元素的影响
(2)位于浮动元素之前的元素,不会受到浮动元素的影响;
(3)位于浮动元素之后,但是不和浮动元素直接相邻的元素不受浮动元素的影响
高度塌陷:
文档中的普通流表现的好像不存在浮动元素一样,当浮动元素高度增加的时候,包含框并不会自动增加高度来闭合浮动元素,使其包含框表现出正常的高度.
由于原来在普通流中的元素浮动之后,又没有其他元素,所以包含框中没有其他普通流元素了,也就表现出了高度为0
清除浮动的理由:
当设置浮动元素时，紧邻其后的元素会受到浮动元素的影响，且其父元素可能出现高度塌陷，这样可能会使布局错乱，所以我们需要想办法来清除浮动。
清除浮动的方法:
(1)方法一:在浮动元素之下,增加一个空元素,设置clear:both属性,则清除浮动
(2)方法二:在浮动元素的末尾增加一个br标签,
<br clear="all"/> (清除float:left 和 float:right的影响)
<br clear="left"/> (只能用来清除float:left 的影响)
<br clear="right"/> (只能用来清除float:right的影响)
(3)方法三:给浮动元素的父元素加上overflow:hidden;属性,
在IE6中还需要触发hasLayout，例如zoom：1;
代码如下:
.clear{
overflow:hidden/auto;
*zoom:1; //IE6之下的代码
}
(4)方法四（差）：父元素也设置浮动//不能一直浮动到body
(5)方法五（差）：父元素设置display:table//会改变盒模型的属性
(6)方法六（可）：使用:after伪元素
.clearfix:after{
content: ".";
display:block;
height: 0;
clear:both;
visibility:hidden;
}
.clearfix{*zoom:1;}//IE6-7不支持:after,使用zoom:1触发 hasLayout。
扩展:
为什么设置父元素overflow 或者 display:table 可以闭合浮动?
其原理为:Block formatting contexts （块级格式化上下文），以下简称 BFC。
如何触发BFC?
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
BFC的特性：
(1)块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
(2)块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
(3)块级格式化上下文通常可以包含浮动
3.javascript的跨域问题
(1)主域相同但是子域不同,用document.domain+iframe;
主域受到安全攻击的时候,其他域的文件也会受到影响,而且iframe框架太多,页面很难控制
(2)动态创建Script标签,通过回调函数去处理;
判断节点是否加载完毕用的是js.onload;
js.onload = js.onreadystatuschange = function () {
if(!this.readyState || this.readyStatu === 'loaded' || this.readyState === 'complete') {
//callback函数在此
js.onload = js.onreadystatechange = null;
}
}
(3)iframe+location.hash
原理:利用location.hash传值
(4)window.name实现跨域数据传输
(5)HTML5中postMessage:
otherWindow.postMessage(message, targetOrigin);
(6)利用flash
详情点击:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
4.Reflow是什么?
布局(reflow) -因为 浏览器构建渲染树完成时不包含位置和大小信息。所以计算元素位置和其他几何信息的过程称为布局
Reflow采用基于流的布局模型,大多数情况下遍历一遍就能计算出几何信息,流中靠后的位置不会影响前面元素的布局,采用从左到右,从上到下的顺序遍历文档,但是HTML表格遍历文档需要不止一次;
触发布局的操作
(1)增加、删除、修改DOM结点。
(2)移动DOM的位置，使用动画效果。
(3)修改CSS样式。
(4)Resize窗口，或是滚动的时候。
(5)修改网页的默认字体。
触发重绘的操作(repaint)
(1)透明度更改
(2)文字颜色变化
(3)背景颜色变化
(4)背景图片替换
太多的reflow会影响页面的性能,所以要尽量减少eflow:
(1)预先定义好CSS的class,修改DOM的className;
(2)把DOM离线后修改
(3)为动画的HTML元件使用fixed或者absolute;
(4)避免使用table布局
5.输出一个字符串中没有重复的字符。如“baaca”输出“bac”
6.对于一个多叉树，设计TreeNode节点和函数，返回先序遍历情况下的下一个节点。
函数定义为TreeNode* NextNode（TreeNode* node）
7. 分割字符串。
对于一个字符串，根据分隔符seperator，把字符串分割，如果存在多个分隔符连在一起，则当做一个分隔符。如果分隔符出现在" "符号之间，则不需要分割" "之间的字符。
比如a++abc ，分隔符为+，输出a abc
a+"hu+" 输出a hu+
a++"HU+JI 输出a "HU JI。
请根据上述需求完成函数：void spiltString(string aString，char aSeperator)。
8.给一组无序的数组排序;
效率最高的是堆排序和快速排序:
快速排序:
网友评论