面试|前端面试内容1 java|前端

写在前面

CSDN话题挑战赛第1期

活动详情地址：CSDN

参赛话题：前端面试宝典

话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

【面试|前端面试内容1】目录
HTML5 新特性
css3 新特性
css 选择器
margin 合并
margin 塌陷

HTML5 新特性语义化标签， header, footer, nav, aside,article,section
增强型表单
视频 video 和音频 audio
Canvas 绘图
SVG绘图
地理定位
拖放 API
WebWorker
WebStorage( 本地离线存储 localStorage、sessionStorage )
WebSocket
css3 新特性
1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用 RGBA 实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。

1、颜色：新增RGBA、HSLA模式 2、文字阴影：（text-shadow） 3、边框：圆角（border-radius）边框阴影：box-shadow 4、盒子模型：box-sizing 5、背景：background-size,background-origin background-clip(削弱) 6、渐变：linear-gradient(线性渐变): eg: background-image: linear-gradient(100deg, #237b9f, #f2febd); radial-gradient (径向渐变) 7、过渡：transition可实现动画 8、自定义动画： animate@keyfrom 9、媒体查询：多栏布局@media screen and (width:800px) 10、border-image 11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放 12、3D转换 13、字体图标：Font-Face 14、弹性布局：flex

css 选择器
id 选择器（ #myid）
类选择器（.myclassname）
标签选择器（div, h1, p）相邻选择器（h1 + p）
子选择器（ul > li）后代选择器（li a）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li:nth-child）
通配符选择器（ * ）

!Important > 行内式 > id > 类/伪类/属性 > 标签选择器>全局（对应权重：无穷大∞ > 1000> 100 >10>1>0）

margin 合并
在垂直方向上的两个盒子，他们的 margin 会发生合并（会取最大的值），比如上边盒子设置margin-bottom:20px，下边盒子设置margin-top:30px; ，那么两个盒子间的间距只有30px，不会是50px
解决 margin 合并，我们可以给其中一个盒子套上一个父盒子，给父盒子设置 BFC
margin 塌陷
效果：一个父盒子中有一个子盒子，我们给子盒子设置margin-top:xxpx结果发现会带着父盒子一起移动（就效果和父盒子设置margin-top:xxpx的效果一样）
解决： 1、给父盒子设置 border，例如设置border:1px solid red; 2、给父盒子设置 BFC
写在最后