[前端基础]前端开发基础整理(基础篇)

1.0 BFC

BFC(Block Format Context)块级格式化上下文，在CSS中不同的display属性和元素类型会呈现不同的Formatting Content（一个决定如何渲染文档的容器），以下是在CSS2.1中出现的Format Context.

Block-level box：display属性为block、list-item、table的元素，会生成Block-level box。并且参与Block Formatting Content

Inline-level box：display属性为inline、inline-block、inline-table的元素，会生成Inline-level box。并且会参数Inline Formatting Content

所谓FormatContext就是一块渲染区域，其中决定了其子元素之间如何定位以及和相邻元素之间的定位关系，常听说的格式化上下文有BFC,IFC，对于网上所说的GFC和FFC目前没有去了解，不做分析。

1.0.1 BFC的规则

BFC内部的Box会在垂直方向，一个接一个的设置；（Box级元素一行显示）

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（Margin重叠，取最大的）

每个元素的margin box的左边会与 包含块 border box的左边相接触（对>于从左到右的格式化，否则相反），即使存在浮动也会如此。（）

BFC不会和浮动元素重叠。

BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算，BFC可以包裹浮动。

1.0.2 BFC触发的条件

根元素或其它包含它的元素

float属性不为none

position属性为absolute或fixed

display属性为inline-block、table-cell、table-caption、flex、inline-flex

overflow属性不为visible

上述内容摘录自前端精选文摘：BFC 神奇背后的原理

2.0 清除浮动

2.0.1 一些常见的清除浮动的手段：

给浮动元素的父级加上指定高度(治标不治本)

浮动元素父级页浮动(要是有多个父级呢)

浮动元素父级设置为inline-block (IE6 7不支持)

在浮动元素下加

.clear{ height:0px;font-size:0;clear:both;overflow:hidden;}(鸡肋)

在浮动元素下加
clear{ height:0px;font-size:0;clear:both;}(不符合W3C标准)

2.0.2 利用BFC清除浮动
通过BFC的了解，我们可以通过触发父级的BFC中的特性，就可以包含浮动元素。通过以下方法可以设置父级为BFC格式：

float为 left 或 right

overflow为 hilien|auto|scroll

display为 table-cell|table-caption|inline-block|flex|inline-flex

position为 absolute|fixed

上面设置父级为BFC格式的弊端：我们不可能为所有的父容器都添加float属性（虽然现实中确实有网页是这么做的）；overflow属性会影响滚动条和绝对定位元素；diaplay很多属性低版本IE并不支持；position影响元素的定位，会出现我们不想要的效果。

2.0.3 hasLayout的特性
在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当元素的hasLayout属性值为flase的时候，元素的尺寸和位置由其最近的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责自身及其子元素的尺寸的定位，同时当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。

详情请看百度百科：https://baike.baidu.com/item/hasLayout/2682564

2.0.4 清除浮动目前最佳方法

.clear{
    *zoom:1;//触发元素的haslayout
}
.clear:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.clear {
  *zoom: 1;//触发元素的haslayout
}
.clear:after {
  content: "";
  display: table;
  clear: both;
}

3.0 层级定位

在没有定位属性的兄弟元素中，在HTML结构中排列在后面的元素层级高于前面的同级兄弟元素
兄弟元素中有定位属性的元素层级高于没有定位属性(static 默认为没有定位)的其他兄弟元素。
兄弟元素中有position:relative和position:absolute(暂时不考虑fixed属性值，他不在一个频道，它相对视窗定位)定位属性的元素，结构下面的元素层级高于结构上面的元素，但是有z-index设置时，z-index值大者居上。
非兄弟元素(假设有两个)，任意一个或其祖元素拥有动态定位时，同时各自向上寻找这些元素的动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。无论这两个非兄弟元素的zindex值有多大，只有他们的最高阶定位祖元素zindex大时层级才高，同时综合上述三者与最后一项的运用，相信项目中遇到与之类似的问题都可以迎刃而解啦。

4.0 CSS Hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种：条件Hack、属性级Hack、选择符级Hack。

        4.0.1 条件Hack
        01-条件Hack 语法: < !--[if ? IE ?]> HTML代码块
         取值：if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：指定是否IE或IE某个版本。关键字：空

大于：选择大于指定版本的IE版本。关键字：gt（greater than）

大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

小于：选择小于指定版本的IE版本。关键字：lt（less than）

小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

非指定版本：选择除指定版本外的所有IE版本。关键字：!

4.0.2 css属性hack

css选择器hack.png

4.0.3 标签选择符hack

标签选择器hack.png

01-区别IE于非IE浏览器
    background:blue;/*非IE背景蓝色 因为所有浏览器都能解释*/
    background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，被覆盖 */
02-区别IE6,IE7,IE8,FF
    background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
    background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
    *background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
    _background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
03-区别IE6、IE7、Firefox(方法一)
    background:blue;/*标准浏览器背景变蓝色*/
    *background:black;/*IE7背景变黑色*/
    _background:orange;/*IE6背景变橘色*/
04-区别IE6、IE7、Firefox(方法二)
    background:blue;/*Firefox背景变蓝色*/
    *background:green!important;/*IE7背景变绿色*/
    *background:orange;/*IE6背景变橘色*/
05-区别IE7、Firefox
    background:blue;/*Firefox背景变蓝色*/
    *background:green!important;/*IE7背景变绿色*/

5.0 事件委托原理

事件委托原理:利用事件冒泡的原理，把事件加到父级上，触发执行效果
事件委托的好处:
1.1 提高网站性能
1.2 对后添加的元素仍然拥有之前的事件

//HTML代码


   100
   200
   300
   400

//JS代码
window .onload = function(){
   var oUl  = document.getElementById('ul1');
   var oLi  = oUl.getElementById('li');
   var oBtn = document.getElementById('input1');
   var iNow = oLi.length;
         oUl.onmouseover = function(ev){
              var ev  = ev||window.event
              var target  = ev.target || ev.srcElement;
              if(target.nodeName.toLowerCase()=="li"){
               target.style.background = 'red';
               } 
         };
           oUl.onmouseout = function(ev){
              var ev  = ev||window.event
              var target  = ev.target || ev.srcElement;
              if(target.nodeName.toLowerCase()=="li"){
               target.style.background = '';
               } 
         };
         oBtn.onclick = function(){
               iNow++;
              var aLi  = createElement("li");
              aLi.innerHTML = 100*iNow;
              oUl.appendChild(aLi);
               } 
         };
}

6.0 JSPON用途及原理

JSONP用途：在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略使得JavaScript只能访问与包含它的文档在同一域下的内容，而JSONP就是为了解决这种限制的而来。

原理：记得我们在使用JQuery的时候可能会这样引入，那么为什么我们就可以从自己的网站调用Jquery的内容呢？这就是就是利用