众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。
html篇
html应该是前端中最简单的知识点了，标签用着用着就熟记于心，在面试过程中对html的提问更是少之又少，话不多说，上干货。
1. 常见块级元素、行内元素、行内块元素的特点和区别
- 块级元素 (常见的块级元素div，p，h，form，li)
- 一行显示一个;
- 宽度默认为容器的100%；
- 可以设置高度宽度内外边距
- 块级元素可以包含其他的块级元素和文本（如div下可包含div）
- 行内元素（常见的行内元素a,span.img）
- 一行显示多个
- 宽度为内容的宽度
- 不可以设置高度和宽度
- 标签内一般不包含标签（如a标签内包含a标签）
- 行内块元素
- 行内块元素包含块级元素和行内元素的特征
2. html5有哪些新特性
- 语义标签（header，footer，nav，artice，section，aside）
- 音视频标签（audio，video）
- 画布（canvas）
- 地理（geolocation）
- web存储api（localstorage，sessionstorage）
3. img标签上的title属性和alt属性的区别
- alt属性为了给不能看到图片的人提供文字说明，图片加载失败时
- title属性可以实现鼠标悬停时提示的内容
css篇
学习css重点就是清楚的了解布局，给你一个页面，你能一眼知道这个页面如何布局。
1. css盒模型
- 标准盒模型 ：height/width = content(默认)
- IE盒模型：height/width = content padding border
- 通过css3的box-sizing属性设置，设为content-box即为标准盒模型，设为border-box即为IE盒模型
2. css选择器
- 优先级！important（infinite）>id（1000）>class（100）>伪类选择器（:first-of-type）>伪元素选择器（::after）元素选择器（div）
- 如果优先级相同，选择最后出现的样式
3. css3新增伪类
- p:first-of-type 选择属于父元素的首个p元素
- p:last-of-type 选择属于父元素的最后一个p元素
- p:only-of-type 选择属于父元素的唯一p元素
- p:first-child 选择属于属于父元素的唯一子元素
扩展: 伪元素：::before，::after，::first-line，::first-letter，::selection、::placeholder
4. BFC原理（块级格式化上下文）
- 含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。（属于普通流）
- 如何创建BFC
- overflow不为visible
- float不为none
- position不为static或者relative
- display属性为inline-block、flex、table-cell等
- BFC作用
- 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。（或者把其中一个margin改为padding）
- 解决高度塌陷
- 阻止元素被浮动元素覆盖
5. 高度塌陷
原因
- 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0
解决方案
在浮动元素末尾加一个空标签，设clear:both
父级添加overflow:hidden
使用after伪元素
代码语言：javascript复制:after {
content:’’,
dispaly:block,
height:0,
visibilty:hidden,
clear:both,
}6. 自适应布局
- 两栏布局
- 左边左浮动，右边margin-left（float margin）
- 左元素float:left 右边父元素BFC（float BFC）
- 左元素绝对定位，left:0;右边margin-left（定位 margin）
- 父元素display:flex；右边元素flex:1（flex）
- 三栏布局
- 左元素左浮 右元素右浮，中间设置margin-left和margin-right（浮动 margin）
- 左右元素absolute，left:0 right:0 中间margin:0 宽
- 父元素display:flex;中间元素flex:1;（flex）
- 表格布局:父元素display:table;width:100% 所有子元素：display:table-cell
- calc布局：全部float:left .main:calc(100% - 两宽度) 使用calc符号两边一定要有空格
7. 如何用css创建一个三角形
箭头向下的三角为例
代码语言：javascript复制 width : 0
height : 0
border : 6px solid transparent
border-top : 6px solid red8. display:none、visibilty:hidden和opacity:0的区别
代码语言：javascript复制 display:none //不显示对应元素，在文档中不占位置
visibilty:hidden //隐藏对应元素，在文档中仍保留位置
opacity：0 //隐藏元素，占位置，可添加事件9. css中的overflow属性
代码语言：javascript复制 scroll //必会出现滚动条
auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示
visible //溢出内容出现在父元素之外
hidden //溢出隐藏10. 溢出文字的省略显示
- 单行文本
white-space: nowrap //(强制一行显示)
overflow: hidden //(溢出隐藏)
text-overflow: ellipsis //(显示省略标记)- 多行文本
-webkit-line-clamp:2 //（用来限制在一个块元素显示的文本的行数）
display: -webkit-box//（将对象作为弹性伸缩盒子模型显示）
overflow: hidden;
-webkit-box-orient: vertical; //（设置对齐模式）
text-overflow: ellipsis //（以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本）11. 为什么要初始化css
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。
- 初始化css的方式
* {
padding：0；
margin：0；
}12. 如何使英文单词发生词内断行
代码语言：javascript复制word-wrap:break-word。13. div水平垂直居中的几种方式。
- 绝对定位(子绝父相)
<div class="father">
这里是父容器
<div class="child">
这里是子容器
</div>
</div>.father {
width: 200px;
height: 200px;
background: yellowgreen;
position: relative;
}.child {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}- flex布局
<div class="father">
<div class="child">这里是子div</div>
</div>.father {
width: 200px;
height: 200px;
background: yellowgreen;
display: flex;
justify-content: center;
align-items: center;
}.child {
width: 100px;
height: 100px;
background: slateblue;
}- div绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中)
<body>
<div class="center">这里是div</div>
</body>.center {
width: 200px;
height: 200px;
background: yellowgreen;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}14. px和em的区别是什么
- px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。
- 浏览器的默认字体高都是16px，所以未经调整的浏览器都符合lem=16px，那么12px=0.75em，10px=0.625em。
- 与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。
- vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。
15.z-index(层叠上下文)
触发条件： 根层叠，html本身的层叠 position非static css3的新特性：
- flex
- transform
- opacity
- filter z-index设置为
auto或者0时，后出现的覆盖前面的；
16.各种居中方案
参考文章juejin.cn/post/717980… 水平居中：
行内元素给父元素设置text-align：center
定宽：margin：0，atuo
定宽：absolute，left：50%，margin-left：-1/2宽度
不定宽：父：flex，子：margin：0，auto
不定宽：父。flex，justify-content: center
垂直居中
单行文本：line-height：高度
定高：margin：auto ， 0
定高：absolute，top：50%，margin-top
不定高：父：flex，子：margin：auto，0
不定高：父：flex，align-items: center
水平垂直居中
子元素为块级元素：父：flex，子：margin：auto
子元素未知：display：flex；justify-content: center；align-items: center
子元素用绝对定位，上下左右为0，margin：auto，父：relative，
17.如何实现小于12px的字体
transform: scale(0.7);相对于12px缩小0.7
代码语言：javascript复制水平有限，如有错误，敬请指正。
