百度暑期前端实习一面(提前批)

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


  
  
  
  test

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

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

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

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

方法3:

 5
 

存在浏览器兼容问题:

比如火狐浏览器它不兼容spandivinnerText属性.
方法四:

5


使用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文档中在开头如果使用申明则在任何浏览器下都会使用标准盒子模式。
5 举例说一下你常用的字符集
常用的字符集有ASCII,以及utf-8。
6 flex盒子模型实现内容水平垂直居中:
弹性布局默认不改变项目的宽度,但是它会改变其高度。

 
 
 
   
   
   
   flexbox
   
 
 
    
我是水平垂直居中的

7 圣杯布局:




  
  
  
  圣杯布局
  


  
header
mediu
footer

8 块级元素和行内元素:
块级元素:高度及行高可控制,内外边距可控制。宽度默认为100%,占一行。可以嵌套行内元素。
行内元素:宽高不可控制,设置高度只能通过行高,内外边距只能改变左右间距,上下间距不能改变,只能嵌套文本或其他行内元素。
可以通过display属性进行行内元素和块级元素的转换:
display:block;
display:inline;(默认值)
display:inline-block;(行内块元素)
inline-block是可以设置宽高的行内元素,该元素虽然不占一行,但是可以设置宽高。
常用的块级元素:

:定义文档中的节

:标签列表
    :无序列表
      :有序列表

      ~

      :标题系列
      表单系列

      :水平线
      :预定义文本
      :定义文章
      :定义音频
      :定义图形
      常用的行内元素:
      :定义图片
      :输入
      :定义锚
      :定义缩写
      :定义视频
      :定义斜体
      :定义强调
      :组合文档中的行内元素
      :定义强调
      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)不要使用

      标签布局
      (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内核。

      你可能感兴趣的:(百度暑期前端实习一面(提前批))