标签：utf-8 中断 小白 文档 重复 没有 默认事件 code 十分
相信很多软件工程专业的学生，在面临就业的这个阶段中，都处在一个很尴尬的位置：有一定基础，但没有实打实的工作经验，这就导致在学习时无法找到适合自己的定位。
网络上现有的教学视频，大多是针对工作了一定年限的程序员开设的高阶课程，对我们来说显然不合适，还有一些是零基础的入门视频，内容又太过简单，学校早已做过系统的讲解，就算当时学的不是太好，也不愿一次又一次的重复听那些熟悉的内容，毕竟工作的压力时刻悬在头。
对于现阶段的我们来说，需要的是有针对性的讲解和训练，内容脱离最原始的基础概念（当然我不是说基础不重要），而逐步涉及那些高阶程序员们觉得很简单的常识，但大多数小白其实都不清楚的技术和技巧，还有实用且必要的面试技巧，对于某些不善言辞的程序员来说，这一点尤为重要！
总而言之，就是干货！
针对自己的所学查漏补缺，我认为最好的方式是能找一个随时为自己解答疑惑的老师，或是编程大牛，毕竟我们遇到的某些问题只有自己才能解释清楚，看网上的视频课程很难准确涉及到。
下面，笔者将分享一些有关前端的“干货”，仅作为随堂笔记整理下来，某些地方可能只有自己能看懂，望勿怪！
1、面试要自信！
面试要自信！
面试要自信！
（重要的事情说三遍）
展露自信会为你赢得更大的成功几率，毕竟，自信的人总有独特的人格魅力，不是吗？建议面试前拍拍自己的脸颊，深吸几口气，甩甩头，振奋精神后再推门不迟，况且，面试官不是家长，也不是班主任，不必畏畏缩缩。
2、诚信面试
公司聘用员工，需要的是能带来价值的高质量员工，因此人品也是衡量面试者的一大要点，因此弄虚作假没有半点好处，对于吃技术饭的软件行业，虚假简历，面试作弊，夸大其词，进入工作后很快就会暴露出自己的不足，丢人丢脸丢工作！
3、掌握面试节奏
常见的前端面试题一共就那么几种类型，也没有后端那么复杂的算法逻辑运算，所以很容易反客为主，总结下来大概有以下几点：
① 侃侃而谈：面试官通常都会问，你在以往的开发中遇到过什么问题，是怎么解决的，这是一道开放题，你可以在此之前专门对某一问题做专门研究，不需要它的难度有多高，但一定要尝试多种解决方式，在面试时就可以拿出来逐一列举，并对比优缺点，最后给出推荐方案，这样一共三十分钟的面试，一个问题就能用掉近十分钟，把节奏掌握在自己熟悉的领域之中。
注意：这里一定要在平时多积累，多储备，若只是空谈，很容易被认为是话痨，打上虚有其表的标签。
② 料敌于先：俗话说“实话最哄人”，有时意识到面试官问的这个问题自己并不擅长，一定要提前说明，比如首先回答“这个技术需要用到jsbridge，它是Android和JavaScript相互调用的桥梁”，然后后面紧跟一句“但是它的具体原理我并不是很清楚”之类的话，堵住面试官的嘴，这样做，总比面试官提出问题后你答不上来要好得多。
注意：还是要品势多积累，若是提问时你连使用jsbridge都不知道，那就GG了。
4、多说专业名词
能说专业术语尽量别说人话，当然仅限于专业术语，别瞎扯其他，比如“我的hobby是编程，公司的style也let我very舒服...”这样听着想吐的内容。
下面列举一些不是很常见的词汇（部分）：
FE：Front End 前端
PM：Product Manager 产品经理
UE: User Experience 用户体验师
Service：后端
mock数据：模拟后台数据（适用于没有后端接口时，调试前端界面）
Showcase测试：测试到开发的电脑上进行，主要执行一下关键测试用例、流程用例，由开发操作，测试人员一起查看。showcase不通过，则打回，邮件发出。
SEO:搜索引擎优化
BFC：块状格式化上下文，产生一块独立的区域，里面的子元素不会影响外面的布局
区别一位面试者是否真的拥有实际开发经验，下面是一个项目的完整开发流程。
1、PM提需求，出原型
2、UE定交互，UI出设计图
3、需求评审（PM，FE，Service，设计，测试） 估工时
4、开发阶段（独立完成各自的部分）
5、前后端联调（mock数据）
6、showcase（测试）
7、提测
8、修复bug
9、上线
10、回归（回归测试）
1．HTML 超文本标记语言
2．CSS 层叠样式表（即多维立体）
3．<!Doctype> 标签：Doctype告诉了浏览器以什么规则去解析当前文档。
4．<html>是文档的根节点：很重要，也是很容易忽视的一个点，操作DOM对象时谨记。
5．<meta name=’decscription’ content=’’>有利于网页SEO
6．<meta name=”viewport” content=””> 进行不同设备的适配
7．将Js在页面内容后面，body之中引入，防止中断页面渲染，使白屏时间过长。
8．标签语义化的主要好处：1.有利于SEO 2.有利于项目的维护与开发
9．a标签：跳转链接，当同时拥有href属性和Onclick事件时，首先执行Js文件中的方法，阻止默认事件。
10．首屏样式可以写在style样式里，防止白屏时间过长
11．对于CSS的优先级问题
(1) ID 权值100；class 权值10；标签 权值1；*>=0 权值可以相加。最终比大小
(2) 对于同一元素，有相同权值的多个样式，按照样式的先后顺序决定（注意：这里不是说调动的顺序，而是指文档解析时加载的顺序，即在Head中谁写在后面，谁显示 ）
例：
<head> <meta charset="UTF-8"> <style type="text/css"> .classA{ background-color: red; } .classB{ background-color: green; } </style> </head> <body> <div class="classB classA"></div> </body>
就选先调用的是classB，后调用classA，但后者并不会覆盖前者的样式，因为文档解析时，先读到classA的样式是红色，然后又发现classB是绿色，因此覆盖掉了前面的classA，最后显示为绿色。
(3) !importent > 行内样式（style） > #ID > .class > 标签
(4) 内联样式和外联样式也是看谁写在后面
(5) !importent 是最无敌的，无敌！
12．相关样式
① A 标签:text-decoration:none;
② 缩进：text-indent:1em;
③ 单行省略（必须有宽度）：
{
overflow:hidden; //超出部分隐藏
white-space:nowrap; //强制不换行
text-overflow:ellipsis //省略号
};
④ 设置背景图片大小：
1) Background-size: 100%;
2) Background-size：cover 图片宽高比不变，铺满整个容器的宽高，图片多出来的部分会被裁减掉。
3) Background-size：contain 图片宽高比不变，缩放至图片自身能完全显示出来，容器会有留白区域。
13．标签分类：
① 常用块状元素：div p h1~h6 table ul ol form
独占一行
支持宽高、margin、padding （四个方向）
默认宽度为父容器高度
② 行内元素： span a strong b em i
共享一行
不支持宽高 margin、padding只支持左右，不支持上下
默认宽度为内容
③ 行内块元素：img
共享一行
支持宽高
默认宽度为内容
14．盒模型：由里到外依次为：content padding border margin
(1) 标准盒模型：width=content
(2) IE盒模型：width=content+padding+border
(3) Padding:百分比
参照的是父元素的“宽度”！
可用于16:9的头布局（即padding-bottom:56.25%;）
(4) Margin
① 重叠：兄弟节点在同一方向（竖直）设置margin和padding会发生重叠现象
1) 正正取最大值
2) 正负相加
3) 负负取最小值
② 拖拽：父子节点之间，子节点设置值margin（竖直方向），会拖累父节点，即在父节点上实现margin效果
解决拖拽：
1) overflow:hidden （触发当前元素变成BFC）
2) 添加border-top
3) 添加padding-top
15．Auto Margin: 0 auto;——填充剩余空间
① block元素：不设置宽，默认占100% 自动填充。
设置了宽，破坏掉自动填充。
② 规则：对于设置了宽度的block元素的剩余空间：
一边设定值，一边设auto，那么auto就是剩余空间
两边设auto，则两边共同平分剩余空间
③ 问题：margin: auto 0; 无法垂直居中
解决：改变文档流变为垂直布局
writing-mode: vertical-lr //垂直方向自左向右书写
16．浮动：
(1) 用法要求
① 每次用浮动后，都要清浮动（解决父容器高度塌陷问题——即设置浮动后，若父元素没有具体高度，则不再显示）
② 用浮动是尽量设置元素宽度
③ 一个元素设置浮动后，同级别元素也设置浮动
(2) 清浮动方法：
① 添加一个具有clear: both 属性的元素
.clearfix:after {
content:’’;
dislay:block;
height:0;
visibility:hidden;
clear:both;
}
② 触发BFC（overflow:hidden）
17．z-index:
子元素永远比父元素高。
标签：utf-8 中断 小白 文档 重复 没有 默认事件 code 十分
原文地址：https://www.cnblogs.com/hong-sky/p/9425951.html
