前端里面类和id区别是什么？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-01 05:17 标签： css类选择器和id选择器的区别

问：如何理解html标签语义化？

  • html5新出的标签，每个标签都有自己语义，什么标签做什么事。让人看的懂，也让机器可以看的懂，利于SEO。

问：css权重是什么？

  • 设置节点样式的方式有很多种，不同的方式它们的权重并不相同，当它们给一个节点设置同一个样式时，谁的权重高谁就生效。
  • 行内样式：权重值为1000
  • id选择器：权重值为100
  • 类、伪类、属性选择器：权重值为10
  • 元素选择器：权重值为1

问：盒模型有几种，它们区别是什么？

  • 标准盒模型：设置的宽高只是包括内容区，内边距和边框另算。
  • 怪异盒模型：设置的宽高包含了内边距和边框。
  • 块级格式上下文，一句话来说就是让块级元素有块级元素该有的样子，触发BFC可以清除浮动、让margin不重叠。

问：你常用的清除浮动方式是什么？

问：em、rem的区别？

  • em：如果父级有设置字体大小，1em就是父级的大小，没有1em等于自身默认的字体大小。
  • rem：相对于html标签的字体大小。

问：不使用border属性画一条1px的线？

问：移动端1px问题？

问：定位的方式有哪几种，它们的区别是什么？

  • relative：相较于自身定位，设置的位置相对于自己进行位移。不脱离文档流。
  • absolute：相较于最近有定位的父节点定位，设置的位置相较于父节点。会脱离文档流，导致父节点高度塌陷。
  • fixed：相较于当前窗口进行定位，设置的位置相较于窗口。脱离文档流。

问：垂直水平居中的实现方式有哪些？

问：你知道的左右宽度固定，中间自适应的三栏布局方案有哪些？

问：实现三个圆形的水平自适应布局？

问：vuex语法糖方法有哪些以及如何使用？

在Home组件中获取参数 在Home组件中获取参数 在Home组件中获取参数

问：vue-router有哪些导航守卫钩子？以及它们的执行顺序？

beforeRouteEnter：在渲染组件对应路由被确认之前调用，不能访问this，在路由beforeEnter钩子之后执行。
beforeRouteUpdate：在当前路由改变但组件被复用时调用，例如在动态子路由之前调转时。

问：如何实现异步组件？

方式2：可以指定多个路由为相同`chunk`名，会打包在一起

问：请实现一个最小化vue响应式示例？

  • 主要作用就是把创建对象的过程进行更进一层的封装，相同的部分进行提取，不同的地方传递参数即可。
简单封装，不同再去一个个的new具体的角色 将角色抽象成User类，使用工厂进一步封装
  • 只创建一次类的实例，其余情况都返回创建好的实例结果。例如vue里的插件，安装一次之后不会再次安装，直接返回之前已经实例化的结果。

问：实现一个全局唯一的模态框？

问：观察者模式和发布订阅模式的区别？

  • 如果发布者直接触及到订阅者，就可以说明是观察者模式；
  • 如果发布者不直接触及到订阅者，而是由第三方来完成实际的通信操作，就叫做发布-订阅模式。
  • 简单来说，它们就是解耦的程度不同，vue内的自定义事件的Event Emitter，发布者完全不用感知到订阅者，事件的注册和触发都发生在事件总线上，实现了完全的解耦。

　　最近面试了一些公司，趁着疫情期间，总结一波。大家可以看看  会有用的。 

loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件。而plugin的功能更加的丰富，而不仅局限于资源的加载。

3、webpack中可以有哪些优化

3、懒加载、按需加载、分包、压缩 4、提取公共代码与第三方代码 6、区分dev、product环境，减少不必要 解析HTML文件，创建DOM树（解析执行JS脚本时，会停止解析后续HTML） 解析CSS,形成CSS对象模型 将CSS与DOM合并，构建渲染树 绘制渲染树（可能触发回流和重绘） 经过几个公司问题总结出，一般多会问第六步。前面就是听听而已。
async函数就相当于自执行的Generator函数，async函数就相当于自执行的Generator函数，较于Promise，async 的优越性就是把每次异步返回的结果从 then 中拿到最外层的方法中，不需要链式调用，只要用同步的写法就可以了。

js的比较多，我只是选了一部分比较常问的，其他还有像设计模式、mvc、mvvm、jq组件、还有各种数组对象的方法的作用参数等就不总结了

1、watch和计算属性区别 

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）
computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响）

2、watch也可以实现监听为什么还要计算属性这个？ 

1、首先vue官方推荐的是如果可以用计算属性就不要用watch，为什么呢？因为计算属性是有缓存的，对性能来说是更好的。
2、其次两种功能是不一样的，computed针对于一个值依赖于多个，watch虽然也可以，但是代码会很臃肿

3、data为什么是一个函数？ 

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

4、双向数据绑定原理？ 

利用了 Object.defineProperty() ,让数据变得可观测，结合订阅者发布者模式，当数据变化时候会由发布者来通知订阅者更新数据和view
vue3利用proxy来让数据可观测。

5、组件怎么实现双向数据绑定

6、生命周期（8+3）官网去看

mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程 
数据流向是单向的，即父能给子，子不能修改父，写组件时我都会声明一个类似box的东西，当我子组件发生变化我都会通知到box再由box进行分发，这么做可以保证出现bug时候的调试
同级：新声明一个vue作为中间，来转发。或者原生写一个eventbus 跨层级：provide 和 inject（不建议日常开发使用，主要在开发高阶插件/组件库时使用。）、同级的在这里也可以使用 
1、不加key的话，更新机制的进行diff的时候是会全部比较的，对性能不好。
2、不加可能会出现数据变化而没有渲染视图
3、根据diff算法，同一层级的一组节点，他们需要通过唯一的id进行区分。

11、vue中如果数据更新了视图没有渲染怎么办

12、如果我需要在视图更新后进行一些操作可以怎么做

v-if如果为false，页面都不会渲染这个dom，适用于不经常切换的场景。 
hash 值变化不会导致浏览器向服务器发出请求
hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了
如果路由找不到，就始终返回一个html，不然会由刷新404的问题

更多的会慢慢完善，我过滤掉了很多比如根据自己理解去解答的，代码题也过滤了不少，因为最近电话面试居多，程序题几乎没有。过滤了很多基础的，基本用过的人都会的。只取其中最经典，最常问，最有误区的，可能会由一些疏漏我之后想起来或者遇到再补上

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子：

类选择器还是 ID 选择器？

在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。

区别 1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）： 






  

    

      【 前端开发日报】再也不学AJAX了（三）跨域获取资源 ② – JSONP & CORS；JavaScript 权威面试指南； 前端开发日报；听说你用JavaScript写代码？本文是你的机器学习指南；卷两根Weeds，搞懂Promise；一步一步将支付宝...详情→
    

  

  

    

      【Bootstrap响应式布局瀑布流】bootstrap响应式瀑布流布局，bootstrap标签选项卡流式布局，Bootstrap是当下比较热门的web前端开发框架之一，通过引入Bootstrap，你可以很快的给你的项目做一个自适应的页面。 #前端开发博客#
    

  

  

    

      【HTML5 video视频兼容实践】我们都知道HTML5 video标签是现在比较流行的播放器，几乎很多高级的浏览器如chrome、firefox和Safari都支持HTML5 video标签，但是仍然有一部分老的浏览器不支持，特别是IE9以下的浏览器，这样子你需要提...详情→ #前端开发博客#
    

  

  

    

      【rem自适应布局-移动端自适应必备:flexible.js】本文通过使用一个开源代码flexible.js，结合rem的特性，1rem等于根元素html的字号，来解决移动端多种设备的自适应问题。通过rem与px的换算，你可以把设计稿从px转到rem。再也不用为各...详情→ #前端开发博客#
    

  

  

    

      【详解响应式布局设计】响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。
    

  

  

    

      【CSS3弹性盒模型flexbox布局基础版】最近看了社区上的一些关于flexbox的很多文章，感觉都没有我这篇文章实在，最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和...详情→ #前端开发博客#
    

  

  

    

      前端开发周报】css实现图片背景填充的正六边形；网页适配 iPhoneX，就是这么简单；如何用 CSS 修出好看的照片；JS中动态添加元素并绑定事件，造成程序重复执行；前端重构之路（组件化）；如何使用ES6箭头函数使JavaScript代码更易读...详情→
    

  

  

    

      【 前端开发日报】掌握JS中this指向只需记忆5大原则；JavaScript 如何工作的: 事件循环和异步编程的崛起 + 5 个关于如何使用 async/await 编写更好的技巧；React 整洁代码最佳实践；Web 性能优化 – TCP； 前端开发日报；V...详情→
    

  

  

    

      【弹窗Modal实现和有滚动条偏移解决方法】弹窗也叫modal（模态）在网页设计中是一个常见的功能。实现方法也不会太复杂，可以通过css实现居中（bootstrap的modal是使用靠上边距来实现），然后JS控制点击显示和消失。在弹窗中也许你会...详情→ #前端开发博客#
    

  

  

    

      【 前端开发日报】SegmentFault 技术周刊 Vol.38 – 神奇的 CSS；前端工程师的 CI 进阶之路；【JavaScript从入门到精通】第十九课；7 款前端开发者重制的经典游戏 总有一款能让你回味童年时光；CSS自适应导航菜单；JavaScript学习...详情→
    

  

  

    

      【CSS 实用 Tips】  作为前端，日常开发充满了各种挑战与乐趣，我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众需求，并提供解决方案以供参考。 一、修改鼠标手势图标 很多童鞋可能都用
    

  

  

    

      【CSS3 pointer-events允许鼠标点击穿透后面的元素】CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。代码如下：<styl...详情→ #前端开发博客#
    

  

  

    

      【 前端开发日报】如何用 CSS 修出好看的照片；开发更好用的 JavaScript 模块；你还要我怎样的JS系列（4） — 作用域链；HTTPS的协议需求与密钥交换过程；自己动手做一个识别手写数字的 Web 应用（四）；Typescript 构建命令行工具...详情→
    

  

  

    

      【GET和POST的区别】1. GET是从服务器上获取数据，POST是向服务器传送数据。2. GET是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段...详情→ #前端开发博客#
    

  

  

    

      【CSS自适应导航菜单】本文教程旨在教你如何创建一个使用HTML5+CSS的自适应导航菜单，它不需要用到javascript，而且可以居左，居中和居右，这个菜单不是通过点击显示的，它是鼠标滑过的时候显示出来的，并且兼容各种浏览器包括手机客...详情→ #前端开发博客#
    

  

  

    

      【 前端开发日报】分享7款个性化jQuery/HTML5地图插件；2017 年前端开发者必学清单；前端重构之路（组件化）；now.js 0.1.0 发布了；JavaScript优化模式；关于JavaScript对象，你所不知道的事（二）- 再说属性；Vue实现一个页面缓存、左...详情→
    

  

  

    

      【纯CSS3制作TAB选项卡的两种方式】css tab,纯CSS3制作tab,不用JavaScript就可以制作选项卡是不是很神奇，而且效果跟不适用jQuery是一个样的，本站独创的CSS3 Tab绝对让你眼前一亮。 #前端开发博客#
    

  

  

    

      【手机端页面自适应解决方案—rem布局】原文：手机端页面自适应解决方案—rem布局相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果...详情→ #前端开发博客#
    

  

  

    

      【 前端开发日报】前端开发人员如何搭建数据库；一步步打造自己的纯CSS单标签图标库；React Diff 算法 – 众成翻译；关于JavaScript对象，你所不知道的事（一）- 先谈对象；vue中慎用style的scoped属性；JavaScript 正则表达式笔记...详情→
    

  

  

    

      【jQuery中的show是inline还是inline-block？】jQuery里面的show是inline或者block取决于你的css代码里面怎么写，如果没有写 相关属性，则是按照CSS默认内联和块级元素。同样，如果设置为不可见，则也是按照CSS默认内联或者块级元素...详情→ #前端开发博客#
    

  

  

    

      【Vue与React两个框架的区别和优势对比】Vue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么，本文将为你呈现。 #前端开发博客#
    

  

  

    

      【 前端开发日报】如何使用ES6箭头函数使JavaScript代码更易读；css实现图片背景填充的正六边形；一个行为标准Popup组件(vue), 强大的过度动画支持, 和定位支持；10个有趣的Javascript和CSS库-2017年11月； 前端开发日报；JS中...详情→
    

  

  

    

      【jquery圆环百分比进度条制作】最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的：demo1demo2实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过jQuery和CSS实现的，下面就一一道来：方法一：jQuery + C...详情→ #前端开发博客#
    

  

  

    

      【CSS自适应布局等分比例实践】CSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。一：浮动布局+百分比emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}.float-ul{w...详情→ #前端开发博客#
    

  

  

    

      【 前端开发日报】js中的正则表达式(1)；iOS开发者的大前端感悟：向前端说对不起；GitHub 上 82% 的代码是重复代码；使用 ClojureScript 开发浏览器插件的过程与收获；Node.js 应用的可视化调试与性能分析；用 Jest 测试 JavaScript 应...详情→
    

  

  

    

      【Swipe-移动前端端触摸滑动插件swipe.js】swipe.js是一个比较有名的前端触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。 #前端开发博客#
    

  

  

    

      【 前端开发日报】一次 H5 「保存页面为图片」 的踩坑之旅；纯 CSS 实现波浪效果；前端本地文件操作与上传；函数声明、函数表达式、匿名函数、立即执行函数详解；Chromium 新的弹窗机制以及 HTML 的 dialog 元素；RxJS 5 中文文档；CSS ...详情→
    

  

  

    

      【一个普通本科在校生的前端学习之路】本文从如何选择前端方向、学习前端的历程，学习的资源、需要掌握的基础知识，到最后写简历以及找工作，和心态准备多方面给大家分享作者的前端学习之路，值得看看。 #前端开发博客#
    

  

  

    

      【美化表单的CSS高级技巧】  学习一些新的和旧的选择器，你可以根据需求、有效性和更多的方式来美化表单。 表单一直以来对于CSSer来说都是一件不易的事情，很难用CSS处理好表单要样式。但是有一些很少使用的选择器，
    

  

  

    

      【Bootstrap Modal遮罩弹出层】之前发表过一篇文章叫Bootstrap Modal弹窗代码，其实那个只是一个弹窗代码而已，并不是仿造Bootstrap的，Bootstrap Modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章...详情→ #前端开发博客#
    

  

  

    

      【原生js的常用方法】  前言：随着前端市场日新月异的发展，现如今的市场要的不只是会切切图的小仔、小妹了，而是需要真正懂原生js闭包，继承，原型链，node,以及熟读源码的大神，那么我们也不能太落后各位大神，撸起袖
    

  

  

    

      【 前端开发日报】美化表单的CSS高级技巧；如何优雅的编写 JavaScript 代码；CSS3 径向渐变语法及辅助理解案例 10 则；前端防御从入门到弃坑：CSP 变迁；CSS3 radial-gradient径向渐变语法及辅助理解案例10则；JSON: 不要误会,我真的不...详情→
    

  

  

    

      【WEB 前端菜鸟，感觉很迷茫，该怎么做？】  前几天看到这样的问题 先说问题吧：感觉前端涉及到的东西太多了，自己也很浮躁，看了挺多书，可是代码缺敲得却不多。技术菜，又什么都想学，比如现在纠结要不要先学scss或者
    

  

  

    

      前端开发周报】生产环境中选择性的部署ES6+；基于 HTML5 Canvas 实现地铁站监控；这一次，彻底弄懂 JavaScript 执行机制；CSS 在线交互式速查表；WEB 前端菜鸟，感觉很迷茫，该怎么做？；不使用 JS 匿名函数的三个理由；探究 CSS 解...详情→
    

  

  

    

      【纯CSS3多列的瀑布流布局演示】网上的瀑布流布局大部分都是通过JS来求定位，但现在CSS3也可以做到了，你不需要使用一点JS，就可以做出一个反应快速的CSS3瀑布流布局。html代码：<div class="container"><div class="waterf...详情→ #前端开发博客#
    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 css类选择器和id选择器的区别 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐