前端面试要点简述（一）

更多文章请参加我的个人网站：chenkaixin.cn
更多网站实战源码可以在我的github上找到：https://github.com/KaixinChen0512

各种height

以下针对textarea：
* height：即元素的style.height
* clientHeight：可视内容所占的高度
height+paddingTop+paddingBottom-横向滚动条的高度（通常为17px）
即clientHeight=height+2+2-17
* offsetHeight：即元素外尺寸
offsetHeight = 上下padding + height + 上下border=height+2+2+1+1
* scrollHeight：指的是包含滚动内容的元素大小（元素内容的总高度）
不同浏览器处理方式不同，IE6、IE7 认为scrollHeight 是内容高度，可以小于clientHeight。FF 认为scrollHeight 是内容高度，不过最小值是clientHeight。
但是scrollHeight >=paddingTop + paddingBottom + 内容margin box的高度

严格模式？

设立”严格模式”的目的

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
• 消除代码运行的一些不安全之处，保证代码运行的安全；
  提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。

语法和行为改变（常见）

• 禁用默认全局变量
  在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明
• 静态绑定
  Javascript语言的一个特点，就是允许”动态绑定”，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时（runtime）确定的。
  严格模式对动态绑定做了一些限制。某些情况下，只允许静态绑定。也就是说，属性和方法到底归属哪个对象，在编译阶段就确定。这样做有利于编译效率的提高，也使得代码更容易阅读，更少出现意外。主要是：禁止使用with语句&创设eval作用域
• 禁止删除变量
  严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
• 重名错误
  对象不能有重名的属性&函数不能有重名的参数，同时注意严格模式下不能够调用caller和arguments.callee
• 禁止八进制表示法
  正常模式下，整数的第一位如果是0，表示这是八进制数，比如0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。
• 新增保留字
  为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。使用这些词作为变量名将会报错。

BFC？应用？

BFC解释

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC如何生成

• float的值不为none；
• overflow的值不为visible；
• display的值为inline-block、table-cell、table-caption；
• position的值为absolute或fixed；

display：table可以生成BFC的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

BFC的约束规则

• 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，俩个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。
• 生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接触，（对于从右到左的格式化，右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

BFC在布局中的应用

• 防止margin重叠：
  同一个BFC中两个相邻的box才会发生重叠与方向无关，不过由于约束规则第一条的限制，我们甚少看到水平方向的margin重叠。这在IE这中是个特例，IE可以设置write-mode。
  要阻止margin重叠，只要将两个元素别放在一个BFC中即可（可以用上文提到的BFC生成方式让相邻元素其中一个生成BFC）。阻止两个相邻元素的重叠看起来没有意义，主要用于嵌套元素。
• 浮动相关问题：
  使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。
• 多栏布局的一种方式
  上文提到的一条规则：与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
  这种布局的特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应。
  左float，右float，中间通过overflow：hidden触发BFC

其他规则总结

1. 内部的BOX会在垂直方向上一个接一个的放置；
2. 垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；
4. BFC的区域不会与float的元素区域重叠；
5. 计算BFC的高度时，浮动子元素也参与计算；
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；