什么是BFC：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算

其触发方式：

float的值不为none;overflow的值为auto,scroll或hidden; display的值为table-cell, table-caption, inline-block中的任何一个; position的值不为relative和static。

其应用：

1. 自适应两栏布局；2. 清除内部浮动；3. 防止垂直 margin 重叠

xunyunyun 发表于 2015年5月12日

同源：两个文档同源需满足：协议相同、域名相同、端口相同

跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法：

如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe> 元素，通过src，href属性设置为目标url。实现跨域请求

如果请求json数据，使用<script>进行jsonp请求

现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用

内部服务器代理请求跨域url，然后返回数据

跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源

xunyunyun 发表于 2015年5月2日

我认为前端是架起视觉、交互和后端程序员的桥梁。认为需要做到以下几点：

1.对于一个产品，需要了解产品的设计和交互实现的细节，从而使前端代码结构更加的合理，及可扩展性比较强。

2.随着智能设备的更新换代，前端需要能够处理各种浏览器和设备的兼容问题。

3.用最精简的代码和最高的效率实现交互和设计的细节，可用性和可访问性的提升。

4.把握住新技术和用户体验的结合，使得web和移动应用有更优和更加合理的实现方式。

5.实现网站的前端性能优化。

xunyunyun 发表于 2015年4月20日

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息

为什么需要语义化：

1.去掉样式后页面呈现清晰的结构

2.盲人使用读屏器更好地阅读

3.搜索引擎更好地理解页面，有利于收录

4.便团队项目的可持续运作及维护

xunyunyun 发表于 2015年4月12日