前端部分知识点总结

1、分区标签的作用以及有哪些区分标签
作用：可以理解为容器，将多个相关性的标签添加到一个分区标签里面便于统一管理
div:块级分区元素独占一行
span:行内分区元素共占一行
HTML5中新增的分区标签，作用是和div一样，为了提高代码的可读性
header、footer、main、nav、section
2、form表单的控件
文本框：<input type='text' name='username' value='设置默认值' placeholder='占位文本' readonly maxlength='5'>
密码框：<input type='password' name value placeholder readonly maxlength>
单选框：<input type='redio' name value checked>
多选框：<input type='checkbox' name value checked>
日期：<input type='date'>
文件：<input type='file'>
下拉选：<select name><option>*****</option></select>
提交按钮：<input type='submit'>
重置按钮：<input type='reset'>
自定义按钮：<input type='button'>
3、相对定位于绝对定位的区别
相对定位：元素不脱离文档流（占着原来的位置），通过left/right/top/bottom让元素相对于初始位置做偏移
绝对定位：元素脱离文档流（不占原来的位置），通过left/right/top/bottom让元素相对于窗口（默认）或者一个上级
元素做偏移（需要在上级元素中设置相对定位）
4、说说你对浮动定位的理解
格式：float:left/right
元素脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边缘或其他浮动元素时停止移动
多个浮动元素一行装不下时会自动拆行，拆行时如果有凸出的元素会卡主
当某个元素的所有子元素全部浮动时，自动识别的高度会为0，后面的元素会定上来导致显示异常，通过给元素添加overflow:hidden解决
应用场景:当需要将纵向排列的元素改成横向排列时使用浮动定位
5、盒子模型包含哪些样式？作用是什么？包括content和boder边框相关的内容
盒子模型包含：content内容、margin外边距、border边框相关的内容
盒子迷行相关样式控制元素的显示效果content控制元素的显示尺寸，margin控制元素的显示位置
border边框控制边框效果，padding控制元素内容的位置
content包含：width和height  行内元素不能修改宽高
border边框  赋值方式：border：粗细  样式  颜色；圆角  border-radius:20px;值越大越圆
6、什么是外边距，什么事内边距
margin外边距：元素距离上级元素或相邻兄弟元素的距离称为外边距，行内元素上下外边距无效
黏连问题：当元素的上边缘和上级元素的上边缘重叠时给元素添加上边距会出现黏连问题，给元素添加overflow:hidden解决
padding内边距：元素边缘距离内容的距离称为内边距，给元素添加内边距会影响元素的显示宽高
7、元素显示方式包含哪几种
通过display样式控制元素的显示方式
block：块级元素的默认值，特点：独占一行，可以修改元素宽高，包括：h1-h6，p,div
inline:行内元素值，特点：共占一行，不能修改元素宽高，包括：span,b ,i,s,u,a
inline-block:行内块元素的默认值，特点：共占一行，可以修改元素宽高，包括；input,img
none:隐藏元素
8、CSS三大特性以及相关信息
继承性：元素可以继承上级元素文本和字体相关的样式，部分标签自带效果不受继承影响
层叠行：元素不同的样式可以层叠，多个选择器可以能选择到同一个元素，如果作用的样式不同则全部层叠生效，如果作用的样式相同由优先级来决定
优先级：指选择器的优先级，作用范围越小优先级越高，id>class>标签名>继承（属于间接选中），加上！important关键字的样式优先级最高
9、window对象中常用的方法
inNaN（表量）判断变量是否是NaN，NaN是Not a Number的缩写，代表不是一个数
alert(“***”)弹出提示框
confirm("****")弹出确认框
prompt("***")弹出文本框
parseFloat()将字符串转换成小数
let timer=setInterval(方法，时间间隔)开启定时器
clearInterval(timer)停止定时器
setTimeout(方法，时间间隔)开启只执行一次的定时器
10、前端MVC设计模式
MVC设计模式，将实现一个前端业务的所有代码划分为三部分，包括以下三部分
M：Modle模型，一般指数据模型相关代码
V：View试图，指页面标签相关代码
C：Controller控制器，指将数据展示到页面中的过程代码
MVC设计模式Controller里面将数据展示到页面的过程中需要频繁的进行DOM相关操作，频繁的DOM操作影响执行效率
MVVM设计模式可以解决此问题
11、前端MVVM设计模式
MVVM设计模式，将实现一个前端业务的所有代码划分到三部分，包括以下三部分：
M：Modle模型，一般指数据模型相关代码
V：View试图，指页面标签相关代码
VM:视图模型，负责将页面中可能发生改变的元素和某个变量进行绑定，并且会一直监听这变量值的改变，当变量的值发生改变时，
会从内存中找到变量对应的元素，将元素的内容进行改动，这样的话就避免了每次进行DOM操作遍历查找元素，从而提高执行效率
12、vue相关指令
{{变量}}：插值，将此处显示的文本内容和变量进行绑定，这种写法不依赖标签
v-text="变量":让元素的文本内容和变量进行绑定
v-html="变量":让元素的标签内容和变量进行绑定
v-model="变量":双向绑定（变量的值会影响页面控件显示的内容，控件内容的改变也会影响变量）
v-bind:属性名="值":属性绑定，让元素某个属性的值和变量进行绑定，去掉v-bind是简写
v-on:事件名="方法":事件绑定，当事件触发会调用指定的方法，@事件名是简写
v-for="变量 in 数组": 循环遍历，遍历的同时生成元素
v-if="变量":控制元素是否显示 true显示  false不显示（删除元素）v-else必须要和v-if匹配使用，v-else不能单独使用。只有v-if的值为false时，v-else模块才会显示出来。
v-show="变量":控制元素是否显示  true显示  flase不显示（隐藏元素）