本日由于要用mybatis做作业，以是我提前保存草稿以至于担保我能够每天定时的完成我的承诺；

如题顺序来吧，下面开始了 ；

1、CSS3过渡（PS：实现鼠标悬浮过渡放大效果）

html53d轮播CSS3过渡3D轮播器面试题聚集体 Python

素材如下：【四张放了两张】

HTML：

<body>

<div><img src=\"大众images/1437030245804_185766193b.jpg\公众 alt=\公众pic\公众 /></div>

<div><img src=\"大众images/1444623850992_185766193b.jpg\"大众 alt=\"大众pic\"大众 /></div>

<div><img src=\"大众images/1453967239975_185766193b.jpg\"大众 alt=\"大众pic\公众 /></div>

<div><img src=\公众images/1455592122915_132026710b.jpg\"大众 alt=\"大众pic\"大众 /></div>

</body>

CSS：

body{

margin: 0 auto;

width: 1200px;

height: 400px;

background-color: #000;

}

body div{

float: left;

width: 250px;

height: auto;

margin-right: 50px;

overflow: hidden;

}

body div img{

width: 250px;

height: auto;

transform: scale(1);

-webkit-transition-property: transform;

-moz-transition-property: transform;

transition-property: transform;

transform-origin: center center;

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

transition-duration: 0.5s;

}

body div img:hover{

transform: scale(1.5);

}

2、3D轮播器

效果图如下：

HTML：

<body>

<div class=\公众out\公众>

<ul class=\"大众box\公众>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

<dl class=\公众btns\公众>

<dd style=\"大众background:red\"大众></dd>

<dd></dd>

<dd></dd>

<dd></dd>

</dl>

</div>

</body>

CSS：

ul,

li,

dl,

dd {

margin: 0;

padding: 0;

list-style: none;

}

.out {

width: 150px;

height: 150px;

padding: 150px;

border: 1px solid red;

margin: 0 auto;

perspective: 500px;

position: relative;

}

.box {

width: 150px;

height: 150px;

position: relative;

transform-style: preserve-3d;

transform-origin: 50% 50% 75px;

}

.box li {

width: 150px;

height: 150px;

position: absolute;

line-height: 150px;

text-align: center;

font-size: 20px;

}

.box li:nth-of-type(1) {

background: red;

top: -150px;

left: 0;

transform: rotateX(-90deg);

transform-origin: bottom;

}

.box li:nth-of-type(2) {

background: pink;

top: 0px;

left: -150px;

transform: rotateY(90deg);

transform-origin: right;

}

.box li:nth-of-type(3) {

background: green;

top: -0;

left: 0;

}

.box li:nth-of-type(4) {

background: yellow;

top: 0px;

left: 150px;

transform: rotateY(-90deg);

transform-origin: left;

}

.box li:nth-of-type(5) {

background: blue;

top: 150px;

left: 0;

transform: rotateX(90deg);

transform-origin: top;

}

.box li:nth-of-type(6) {

background: orange;

top: 0px;

left: 0;

transform: translateZ(150px);

}

.btns {

position: absolute;

width: 300px;

height: 30px;

left: 150px;

top: 350px;

}

.btns dd {

width: 15px;

height: 15px;

border-radius: 50%;

box-shadow: 1px 1px 2px #111;

float: left;

margin-right: 15px;

background: #ccc;

cursor: pointer;

}

JavaScript：

window.onload = function()

{

var box = document.getElementsByTagName(\"大众ul\公众)[0];

var btns = document.getElementsByTagName(\公众dd\公众);

var num = 0;

function move()

{

num++;

if(num == 4)

{

num = 0;

}

changeA(box, (num - 1) 90, num 90);

for(var i = 0; i < btns.length; i++)

{

btns[i].style.backgroundColor = \公众#ccc\"大众;

}

btns[num].style.backgroundColor = \"大众red\"大众;

}

var t = setInterval(move, 4000)

for(var i = 0; i < btns.length; i++)

{

btns[i].index = i;

btns[i].onclick = function()

{

for(var i = 0; i < btns.length; i++)

{

btns[i].style.backgroundColor = \"大众#ccc\公众;

}

this.style.backgroundColor = \公众red\"大众;

changeA(box, (this.index - 1) 90, this.index 90);

num = this.index

}

btns[i].onmouseover = function()

{

clearInterval(t);

}

btns[i].onmouseout = function()

{

t = setInterval(move, 4000)

}

}

}

function changeA(obj, startA, endA)

{

clearInterval(obj.t);

obj.t = setInterval(function()

{

if(startA == endA)

{

clearInterval(obj.t);

}

else

{

var speed = (endA - startA) 0.3;

speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);

startA += speed;

setCss3(obj,

{

transform: \"大众rotateY(\"大众 + (startA + speed) + \"大众deg)\"大众

})

}

}, 100)

}

本日的内容实例已经完成了，下面开始口试题了~

前端开拓口试知识点大纲：

HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及利用、HTML5、CSS3、移动端适应。
JavaScript： 数据类型、面向工具、继续、闭包、插件、浸染域、跨域、原型链、模块化、自定义事宜、内存泄露、事宜机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他： HTTP、安全、正则、优化、重构、相应式、移动端、团队协作、可掩护、SEO、UED、架构、职业生涯

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据供应了方便，分担了做事器存储的包袱，但还是有很多局限性的。

第一：每个特定的域名下最多天生20个cookie

1.IE6或更低版本最多20个cookie 2.IE7和之后的版本末了可以有50个cookie。
3.Firefox最多50个cookie 4.chrome和Safari没有做硬性限定

IE和Opera 会清理近期最少利用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一样平常不能超过4095字节。

IE 供应了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。
每个数据最多128K，每个域名下最多1M。
这个持久化数据放在缓存中，如果缓存没有清理，那么会一贯存在。

优点：极高的扩展性和可用性

1.通过良好的编程，掌握保存在cookie中的session工具的大小。
2.通过加密和安全传输技能（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，纵然被盗也不会有重大丢失。
4.掌握cookie的生命期，使之不会永久有效。
偷窃者很可能拿到一个过期的cookie。

缺陷：

1.`Cookie`数量和长度的限定。
每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。
如果cookie被人拦截了，那人就可以取得所有的session信息。
纵然加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。
例如，为了防止重复提交表单，我们须要在做事器端保存一个计数器。
如果我们把这个计数器保存在客户端，那么它起不到任何浸染。

2.浏览器本地存储

在较高版本的浏览器中，js供应了sessionStorage和globalStorage。
在HTML5中供应了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储办法：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化确当地存储，仅仅是会话级别的存储。

而localStorage用于持久化确当地存储，除非主动删除数据，否则数据是永久不会过期的。

3.web storage和cookie的差异

Web Storage的观点和cookie相似，差异是它是为了更大容量存储设计的。
Cookie的大小是受限的，并且每次你要求一个新的页面的时候Cookie都会被发送过去，这样无形中摧残浪费蹂躏了带宽，其余cookie还须要指定浸染域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开拓者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的浸染是与做事器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完备支持(ie及FF需在web做事器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData实在便是javascript本地存储的办理方案。
通过大略的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

CSS 干系问题

display:none和visibility:hidden的差异？

display:none 隐蔽对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。
visibility:hidden 隐蔽对应的元素，但是在文档布局中仍保留原来的空间。

CSS中 link 和@import 的差异是？

A：(1) link属于HTML标签，而@import是CSS供应的; (2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; (4) link办法的样式的权重 高于@import的权重.

position的absolute与fixed共同点与不同点

A：共同点： 1.改变行内元素的呈现办法，display被置为block；2.让元素分开普通流，不霸占空间；3.默认会覆盖到非定位元素上 B不同点： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的间隔是不变的。

先容一下CSS的盒子模型？

1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading; 2）盒模型： 内容(content)、添补(padding)、边界(margin)、 边框(border).

CSS 选择符有哪些？哪些属性可以继续？优先级算法如何打算？ CSS3新增伪类有那些？

1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ ） 8.属性选择器（a[rel = \公众external\"大众]） 9.伪类选择器（a: hover, li:nth-child） 可继续的样式： font-size font-family color, text-indent; 不可继续的样式：border padding margin width height ; 优先级就近原则，同权重情形下样式定义最近者为准; 载入样式以末了载入的定位为准; 优先级为: !important > id > class > tag important 比 内联优先级高,但内联比 id 要高 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的末了 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 掌握表单控件的禁用状态。
:checked 单选框或复选框当选中。

列出display的值，解释他们的浸染。
position的值， relative和absolute分别是相对付谁进行定位的？

1. block 象块类型元素一样显示。
inline 缺省值。
象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2. absolute 天生绝对定位的元素，相对付 static 定位以外的第一个先人元素进行定位。
fixed （老IE不支持） 天生绝对定位的元素，相对付浏览器窗口进行定位。
relative 天生相对定位的元素，相对付其在普通流中的位置进行定位。
static 默认值。
没有定位，元素涌如今正常的流中 （忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继续 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow）， 对笔墨加殊效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image

为什么要初始化CSS样式。

由于浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化每每会涌现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情形下初始化。
最大略的初始化方法便是： {padding: 0; margin: 0;} （不建议） 淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

对BFC规范的理解？

BFC，块级格式化高下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到表面的元素。
在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
（W3C CSS 2.1 规范中的一个观点，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互浸染。
）

阐明下 CSS sprites，以及你要如何在页面或网站中利用它。

CSS Sprites实在便是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
这样可以减少很多图片要求的开销，由于要求耗时比较长；要求虽然可以并发，但是也有限定，一样平常浏览器都是6个。
对付未来而言，就不须要这样做了，由于有了`http2`。

下面便是便是让大家乐呵的韶光啦~

前方有高能，去找老司机吧~

1、本日和媳妇吵架，吵到激烈的时候，我就想一个大男人，为什么和女人一样平常见识呢？何况是自己的老婆！
当时我就跟媳妇道歉了，媳妇挺高兴的…她把刀放下了，小舅子的铁锹也放下了，小姨拽着我头发的手也松开了，二舅手里的钢管也扔了，老丈人也把砖头目丢了…看看，夫妻之间只要肯低头，生活还是蛮和谐的

2、

“小伙子，红旗广场怎么走？”又一次被人叫住问路。
换做因此前，定会指一条相反的方向见告他，然后志得意满的觉得自己整蛊到人了，但是现在我没有。
大概已经由了稚子的年纪，我耐心的见告他：“前面过两个红绿灯，第二个十字路口左转，再走50米会看到一个步辇儿街……那条街上人多，你问问他们怎么走。
”

3、有个男同学，他每天就知道上课睡觉，放学泡网吧，书包里的书从来都不看，有一次，一损友把他书包里的书本，全部换成砖头，那个呆子居然不知道，有次早自习迟到了，班主任罚他在门口背课文，结果他居然在众目睽睽下，拿出了一块砖头，班主任连退两步，问，你……你想干什么？当时，那位童鞋，一脸无辜样；

4、一道选择题：同学聚会上，你心中暗恋的女神喝醉了，而你则要卖力送她回家，而到了她家，你看到俏丽的面孔，你会怎么做？ A：轻轻的为她盖上被子 B：上去亲一口 C：把她摸一会 D：和她XXOO

我是这样选的：BCDDDDDDDDDDDCBA

怎么样？朋友你笑了吗？记得要笑口常开；

本日的内容就到这里了；

如果大家喜好发布的文章的话，记得评论，收藏，点赞以及转发哟！

希望大家能够多多关注我的头条号：全栈开拓者；

感谢大家；