百度暑期前端实习一面（提前批）

1 自我介绍
2 你知道页面跳转吗？说说页面跳转的几种实现方式
方法1：
在 <head></head>标签内插入<meta http-equit="refresh" content="10">。解释：refresh代表刷新，content为10代表过10秒进行刷新。
如果在conent属性后加入URL的内容，则会在10秒后跳转到url所在的地址。注意这里的表达方法是content="10;url=https://www.baidu.com/"
代码如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content = " 5 ; url = https://www.baidu.com/">
  <title>test</title>
</head>

缺点：不适用于struts框架
优点：简单操作
方法2:
使用javascript实现，方法：利用bom的location属性href

window.location.href='http://www.baidu.com/'

页面在打开时会直接跳转
定时跳转：(2s后跳转到百度首页)

setTimeout("javascript:location.href='https://www.baidu.com/'",2000)

方法3:

 <span id="totalSecond">5</span>
 <script type="text/javascript">
 var second = totalSecond.innerText;
 setInterval("a()",1000);
 function a(){
       totalSecond.innerText=second--;
       if(second<0)
       location.href="https://www.baidu.com/"
      }
 </script>

存在浏览器兼容问题：

比如火狐浏览器它不兼容span和div的innerText属性.
方法四：

<span  id="totalSecond">5</``span``>
<script  type="text/javascript">
var second = document.getElementById('totalSecond').textContent;

if (navigator.appName.indexOf("Explorer") > -1)  {

second = document.getElementById('totalSecond').innerText;
} else {

second = document.getElementById('totalSecond').textContent;

}

setInterval("redirect()", 1000);

function redirect() {

if (second <0) {

ocation.href = 'hello.html;

} else  if

(navigator.appName.indexOf("Explorer") > -1) {

document.getElementById('totalSecond').innerText = second--;
} else {

document.getElementById('totalSecond').textContent = second--;

        }
    }
   }


</script>

使用navigator.appName.indexOf("Explorer")<-1navigator是Bom的一个对象，其中appName为它的一个属性。可以显示浏览器的名字。火狐是Explorer。chorme是Netscape。
3 你知道怎么用css画一个三角形吗？
https://www.cnblogs.com/v-weiwang/p/5057588.html

.div1{
    border-style:solid;
    border-width:0px 100px 100px 100px;
    border-color:red transparent yellow transparent;
    width:0px;
    height:0px;
  }

4 盒模型
http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html
盒子模型又分为标准（W3C）盒子模型和IE盒子模型
标准盒子模型：content(width)
IE盒子模型：content+padding-left+padding-right+border-left+border-right（width）
注意：在我们的html文档中在开头如果使用<!DOCTYPE html>申明则在任何浏览器下都会使用标准盒子模式。
5 举例说一下你常用的字符集
常用的字符集有ASCII,以及utf-8。
6 flex盒子模型实现内容水平垂直居中：
弹性布局默认不改变项目的宽度，但是它会改变其高度。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>flexbox</title>
   <style type="text/css">
   body{
     display:flex;
     height:100vh;
     justify-content:center;
     align-items:center;
   }
   div{
     border:1px black solid;
   }

   </style>
 </head>
 <body>
    <div>
      我是水平垂直居中的
    </div>
 </body>
 </html>

7 圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圣杯布局</title>
  <style type="text/css">
  .container{
    display:flex;
    flex-direction:column;


  }
  header,footer{
    height:100px;
    flex:1;
    background:#ccc;
    height:100px;
    align-text:center;

  }
  .mediu{
    display:flex;
    flex:1;
    height:400px;
  }
  .the-mediu{
    flex:1;
    background:pink;
  }
  .the-left,.the-right{
    flex:0 0 12em;
    background:orange;
  }
  .the-left{
    order:-1;
  }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">header</header>
    <div class="mediu">
        <nav class="the-left">left</nav>
        <main class="the-mediu">mediu</main>
        <aside class="the-right">right</aside>
    </div>
    <footer class="footer">footer</footer>
  </div>
</body>
</html>

8 块级元素和行内元素：
块级元素：高度及行高可控制，内外边距可控制。宽度默认为100%，占一行。可以嵌套行内元素。
行内元素：宽高不可控制，设置高度只能通过行高，内外边距只能改变左右间距，上下间距不能改变，只能嵌套文本或其他行内元素。
可以通过display属性进行行内元素和块级元素的转换：
display:block;
display:inline;(默认值)
display:inline-block;（行内块元素）
inline-block是可以设置宽高的行内元素，该元素虽然不占一行，但是可以设置宽高。
常用的块级元素：
<div></div>：定义文档中的节
<p></p> ：标签列表
<ul></ul>：无序列表
<ol></ol>：有序列表
<h1>~<h6>:标题系列
表单系列
<hr>:水平线
<pre>:预定义文本
<article>:定义文章
<audio>:定义音频
<canvas>:定义图形
常用的行内元素：
<img>：定义图片
<input>：输入
<a>:定义锚
<abbr>:定义缩写
<vedio>:定义视频
<i>:定义斜体
<strong>:定义强调
<span>：组合文档中的行内元素
<em>:定义强调
9 position
position:static;:静态定位的元素不会受到top,bottom,left,right的影响，（它是每个元素的默认值）
position:absolute;:绝对定位以浏览器右上角为基准设置位置，当一个盒子包含在另一个盒子中，它不占用空间位置。当父元素指定位置，子元素以父元素的左上角为基准；当父元素没有指定位置，子元素以浏览器的左上角为基准指定位置。
position:relative;:相对定位：以元素自身的位置为基准设置位置,该定位会占用空间位置，一般子元素设置相对定位，父元素设定绝对定位。
position:ffixed;:固定定位：不占空间，相对与浏览器位置绝对。
10 清除浮动：
（1）在浮动元素的父级添加overflow:hidden;即可，兼顾到低版本IE浏览器再加上一句zoom:1;
(2) 给浮动元素后面添加clear:both属性；
（3）给父级元素加上clearfix类，并对它设置after属性；

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

11 选择器标签的优先级：
规则1:行内>页内>外部引用>浏览器默认
规则2：！important >内联>ID>伪类|类|属性>标签>伪对象>继承；
权重相同时，css遵守就近原则。排在最后的元素优先级最大。
12 em 和 rem 的区别：
两者都是相对的单位元素。em是继承父元素的字体，rem是相对于html根节点的。
13 事件委托：
https://www.cnblogs.com/liugang-vip/p/5616484.html
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
总结；也就是利用冒泡事件的原理使得父级元素来管理DOM事件，达到减少DOM的使用而使得页面优化的效果。

14 重绘与回流
他们是浏览器渲染步骤中的两个步骤，对浏览器的性能影响会很大。
重绘是当外观改变时，会引起页面重绘。
以下几个动作可能会导致性能问题：
改变 window 大小
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型
很多人不知道重绘与回流与事件循环有关（event loop)
减少回流的方式：
（1）用translate 来代替 top
(2) 减少动画的速度
（3）少改动盒子模型
（4）少使用DOM，可以用事件委托
（5）不要使用<table>标签布局
（6）将频繁使用的动画转化成图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

15 js Promise原理及应用
https://github.com/Zenquan/promise
17 BFC和防抖
https://www.cnblogs.com/libin-1/p/7098468.html

18 浏览器内核
Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。
另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核。