面试阿里、网易、滴滴前端碰到的问题1
HTML
** HTML5新增了哪些内容或API，使用过哪些**
HTML5新增了:
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas)
API地理(Geolocation)
API拖拽释放(Drag and drop)
API本地离线存储表单控件，calendar、date、time、email、url、search
使用过哪些？
经常使用更好的内容标签（header,nav,footer,aside,article,section）
用音频视频(audio,video)做移动端播放器
使用canvas配合原生js面向对象写各种动效和游戏的开发
使用本地离线存储localStorage
使用表单控件做一些简单的格式校验
** input和textarea的区别**
<input>是一个单行输入框，有value属性，但是它不能自动换行。
<textarea>是一个多行输入框，，没有value属性，但是它能自动换行。
如果要给后台提交数据，都必须写name属性
** 用一个div模拟textarea的实现**
- 首先敲一个div出来，设置属性属性 contenteditable=true；通过设置这一属性为true就可以对div里的内容像textarea一样进行编辑了，是不是很赞！
//html部分
<div id="textarea" contenteditable="true"></div>
- contenteditable确实是HTML5的属性，但是这一次IE却领先了一步，早在很早之前IE就支持了这一属性，至少IE6是没有问题的，所以兼容性ok。
- 咱们可以通过设置min-height、max-height来对高度进行设定，通过设置padding、outline、font-size、overflow来处理美化细节，代码如下
div{
width: 300px;
border: 1px solid #ccc;
min-height: 150px;
max-height: 300px;
overflow: auto; /*可以出滚动条*/
outline: none; /*去除边框的蓝色*/
padding:10px;
}
CSS
左右布局：左边定宽、右边自适应，不少于3种方法
- 第一：采用浮动元素，当然也得清浮动喽，左边浮动，右边用margin-left，看见word-break:break-all了没，是强制让内容换行，要不就跑远了。。。
//css样式部分
<style type="text/css">
*{margin: 0;padding: 0;}
div.contain{overflow: auto;zoom:1; background: yellow;}
div.left{float: left;width: 200px;height: 400px;background: red; word-break: break-all;}
div.right{margin-left:200px; height: 400px; background: blue; word-break: break-all;}
</style>
//html部分
<div class="contain">
<div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
</div>
<div class="right">
11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111 11111111111111111111111111111111
</div>
</div>
- 第二种：用相对定位,左边用position：absolute，右边用margin-left,其实跟浮动定位差不多
.container{
overflow: auto;
zoom: 1;
position: relative;
}
.left{
position: absolute;
width: 200px;
height: 400px;
background: #00ff00;
word-break: break-all;
}
.right{
height: 400px;
background: #ff0000;
margin-left: 200px;
word-break: break-all;
}
- 第三种：左边和右边都用绝对定位
.container{
position: relative;
height: 400px;
}
.left{
position: absolute;
width: 200px;
height: 400px;
background: #0000ff;
word-break: break-all;
left:0;
top:0;
}
.right{
position: absolute;
height: 400px;
background: #ff0000;
left: 200px;
top:0;
word-break: break-all;
}
- 第四种：使用css3的flex盒模型来实现两栏布局
.container{
display: flex; /*设置为伸缩容器*/
flex-direction: row; /*设置为伸缩项目为单行排列*/
}
.left{
width: 200px; /*左侧宽度固定*/
height: 400px; /*这里设置为占比1，填充满剩余空间*/
background: #f0ff00;
word-break: break-all; /*内容溢出自动换行*/
}
.right{
flex: 1;
height: 400px;
background: #ff0000;
word-break: break-all;
}
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
具体参考：
css3基础知识-选择器:http://www.jianshu.com/p/fa54fd377fe0
css3基础知识-其他新增样式:http://www.jianshu.com/p/387eb2ddf6b3
BFC、IFC
FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。
- BFC 块级格式化上下文”
-IFC 行内格式化上下文 - 参考文献：http://blog.csdn.net/mevicky/article/details/47008939
