上海视频面试
1.自我介绍
2.css浮动实现三栏布局
<!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>
<!--
1.两边固定 当中自适应
2.当中列要完整显示
这里有五种方法：
--浮动
--绝对定位
--flexbox
--表格布局
--网格布局
-->
<style>
*{
margin: 0;
padding:0;
}
.layout{
margin-top: 3.125rem;
}
.layout article div{
min-height: 6.25rem;
}
</style>
</head>
<body>
<!-- 浮动布局解决方案 -->
<section class="layout float">
<style>
.float .left{
float: left;
width: 18.75rem;
background: red;
}
.float .right{
float: right;
width: 18.75rem;
background: red;
}
.float .center{
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动布局解决方案</h1>
<p>这里是布局中间部分</p>
<p>这里是布局中间部分</p>
</div>
</article>
</section>
<section class="layout absolute">
<!-- 绝对定位方案 -->
<style>
.absolute .left-center-right>div{
position: absolute;
}
.absolute .left{
left: 0rem;
width: 18.75rem;
background: red;
}
.absolute .right{
right: 0rem;
width: 18.75rem;
background: red;
}
.absolute .center{
left: 18.75rem;
right: 18.75rem;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位布局解决方案</h1>
<p>这里是布局中间部分</p>
<p>这里是布局中间部分</p>
</div>
</article>
</section>
<!-- flex布局方案 -->
<section class="layout flexbox">
<style>
.flexbox{
margin-top: 200px;
}
.flexbox .left-center-right{
display: flex;
}
.flexbox .left{
width: 18.75rem;
background: red;
}
.flexbox .center{
flex: 1;
/* 让中间部分适配整个宽度 */
background: yellow;
}
.flexbox .right{
width: 18.75rem;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>filebox布局解决方案</h1>
<p>这里是布局中间部分</p>
<p>这里是布局中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 表格布局方案-->
<section class="layout table">
<style>
.table .left-center-right{
display: table;
width: 100%;
height: 100px;
}
.table .left-center-right>div{
display: table-cell;
}
.table .left{
width: 18.75rem;
background-color: red;
}
.table .center{
background-color: yellow;
}
.table .right{
width: 18.75rem;
background-color: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table布局解决方案</h1>
<p>这里是布局中间部分</p>
<p>这里是布局中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 网络布局解决方案 -->
<section class="layout grid">
<style>
.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 18.75rem auto 18.75rem;
}
.grid .left{
background: red;
}
.grid .center{
background: yellow;
}
.grid .right{
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
<p>这里是布局中间部分</p>
<p>这里是布局中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
3.rem有了解过么
px像素:相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)
em是相对长度单位。相对于当前对象内文本的字体尺寸。相对于父级元素的字体
- em的值并不是固定的；
- em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
使用EM时，为了简化font-size的换算，
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem是CSS3新增的一个相对单位（root em，根em），相对根元素的字体大小
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小
4.js创建元素和不是js创建元素的区别
元素创建的三种方式:
* 1. document.write("标签的代码及内容");
* 2. 对象.innerHTML="标签及代码";
* 3. document.createElement("标签的名字");
5.原型链的特点
1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
2.每个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。
3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。
6.vuex有了解过么
vuex是vue的状态管理工具，状态即数据。 状态管理就是管理vue中的数据
