YY面试准备(一)

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.给一组无序的数组排序;

效率最高的是堆排序和快速排序:

快速排序:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 先前在学习CSS float时,有同学提到了BFC这个词,作为求知好问的好学生,哪里不懂查哪里,那么今天就来研究一...
    这名字真不对阅读 6,524评论 3 19
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 851评论 0 4
  • 转载自(http://web.jobbole.com/83274/) BFC BFC全称是Block Format...
    居客侠阅读 2,126评论 0 20
  • 什么是BFC BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    陌客百里阅读 530评论 3 4