• 前端部分知识点总结


    1、分区标签的作用以及有哪些区分标签
    作用:可以理解为容器,将多个相关性的标签添加到一个分区标签里面便于统一管理
    div:块级分区元素独占一行
    span:行内分区元素共占一行
    HTML5中新增的分区标签,作用是和div一样,为了提高代码的可读性
    header、footer、main、nav、section
    2、form表单的控件
    文本框:
    密码框:
    单选框:
    多选框:
    日期:
    文件:
    下拉选:
    提交按钮:
    重置按钮:
    自定义按钮:
    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-show="变量":控制元素是否显示  true显示  flase不显示(隐藏元素)

  • 相关阅读:
    【html】图片多矩形框裁剪
    GFS分布式存储
    【C语言】qsort函数
    基于算术优化算法优化概率神经网络PNN的分类预测 - 附代码
    pykafka的基本使用及统计kafka消息总数
    细说GaussDB(DWS)复杂多样的资源负载管理手段
    常用颜色的英文和十六进制
    【漏洞复现】浙大恩特CRM大客户系统sql注入0day(三)
    盘点6款装机必备软件
    JVM(5)
  • 原文地址:https://blog.csdn.net/weixin_70634087/article/details/127539673