前端面试内容1

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

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

目录

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

---

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN