⼀到三年经验前端⾯试题总结——看完这些⽉薪过万没问题（持续更新中）前⾔：以下是根据⾃⼰复习的资料和⾯试遇到的问题整理出来的，后⾯逐渐更新，复习⽤！！希望⼤家都能到满意的⼯作我⾃⼰的技术栈是vue加⼩程序，所以react这⽅⾯写的少因为是⾯试题总结，我就不详细的写知识点，只写最简洁的话术，⾯试能直接回答上来的⼀、思想1、说⼀下你是怎么学习前端的？padding是外边距还是内边距这⾥每个⼈都不⼀样，...

html⾃定义列表⼀⾏排列,WEB前端设计完美的⾃定义列表dl，dt，dd经常会在⽹页上看见类似这样的页⾯效果：下⾯就应⽤⽆懈可击的WEB设计⽅案来实现它：(HTML代码添加在BODY之中，CSS代码添加在之间，⼀定要编辑在之间)HTML代码：class="box-left">href="images/moon1.jpg"target="_blank">src="images/suo-...

浏览器兼容性问题和解决⽅案简述    所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。常见的浏览器内核（渲染引擎）    四种内核： Trident、Gecko、Blink、Webkit浏览器内核IE浏览器Trident 内核，也成为 IE 内核Chrome浏览器Webkit 内核，现在是 Blink 内核...

css vh单位和百分比的区别首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用百分比就不多解释了，都明白，那么来看看区别...

html中最⼩宽度,css最⼩缩放宽度css让图⽚按最⼤长或宽等⽐例缩放0到9⼩数字符号：上标：º¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ ′ ½下标：₀₁₂₃₄₅₆₇ Scss或js如何控制浏览器最⼩宽度？浏览器的边缘可以⽤⿏标拖动改变⼤⼩，html代码中css或js如何设置浏览器css: body{min-width:1000px} js: varswidth=$("body").width(); if...

响应式布局@mediascreenand（max-width：像素值）{}设计思路很简单，⾸先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后⽤Media Query来监测浏览器的尺⼨变化，当浏览器的分辨率⼩于1024px的时候，则通过Media Query预设的样式表来将页⾯的宽度设置为百分⽐显⽰，这样⼦页⾯的结构元素就会根据浏览器的的尺⼨...

如何⽤css实现元素固定宽⾼⽐？如何⽤css实现元素固定宽⾼⽐？⼀、img、video 可替换元素的固定宽⾼⽐实现原理指定img、video的宽度或者⾼度，另⼀边设置auto⾃动计算。⽐较简单。html：<div class="img-wrapper"><img src="" alt=""></div>css：.img-wrapper {width: 50%;}...

css中100vh加减运算vh/vwvh: 相对于视窗的⾼度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或⾼度中较⼤的那个。其中最⼤的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或⾼度中较⼩的那个。其中最⼩的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域⼤⼩，即window.innerW...

HTML字体可以设百分⽐嘛，使⽤百分⽐字体⼤⼩？我最近阅读了⼀些关于调整字体⼤⼩的⽂章，其中⼤部分是⽤px作为不可饶恕的犯罪(好吧，也许不是那么糟糕，你明⽩了)，因为它在旧版浏览器中不能正确调整⼤⼩。margin属性值可以为百分比我真的想拥有⼀个我⾃⼰使⽤的标准，过去⼀直是px，因为它很简单，易于理解，并且很容易实现设计中指定的确切字体⼤⼩ - 但我现在怀疑使⽤PX。我最近在⼀个项⽬中使⽤了em，...

margin四个属性的顺序margin-top ，margin-right ，margin-bottom ，margin-left 。⽅向为上右下左，顺时针⽅向，值可以是：百分⽐（基于⽗对象总⾼度或宽度的百分⽐）长度值（定义⼀个固定的边距）auto（浏览器设定的值）。margin指的是元素边界外的距离，padding指的是元素边界内的距离margin：1px 1px 1px 1px;padding...

button⼩⼿设置css的cursor 需要对元素的css属性cursor进⾏设置。cursor可能的值：1. default 默认（通常是⼀个箭头）2. auto 默认。浏览器设置的光标3. crosshair ⼗字线形状。4. pointer ⼩⼿形状。<button >测试按钮</button>5. move 此光标指⽰某对象可被移动6. e-resize 在边框显...

cursor（⿏标⼿型）属性㈠简单介绍在浏览⽹页时，通常看到的⿏标光标形状有箭头、⼿形、沙漏等，⽽在 windows 中实际看到的⿏标指针种类⽐这个还要多。⼀般情况下，⿏标光标的形状由浏览器负责控制，⼤多数情况的光标形状为箭头形状，当指向链接时，光标形状会变成⼿指形状。cursor 属性规定要显⽰的光标的类型（形状）。该属性定义了⿏标指针放在⼀个元素边界范围内时所⽤的光标形状。㈡属性值㈢属性简单讲...

CSS3中filter（滤镜）属性使⽤详解最近在修改内⽹门户的时候，恰好遇到了需要使⽤滤镜的地⽅；刚开始⽤的是两张图⽚；⿏标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致⿏标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了⼀下常⽤的滤镜效果。使⽤滤镜：box shadow怎么设置前⾔css3的滤镜filter属性，可以对⽹页中的图⽚进⾏类似Photoshop图⽚处理的效果...

CSS实现输⼊框的⾼亮效果-------Day50⼜到周末了，这⼀天天过的真快，明天应该回⽼家了。不知道会不会有机会进⾏编写。尽量争取吧，实在不想就这样间断。假设说从前会⼀天天⽆聊到爆，那如今⾃⼰应该是⼀天天忙的要死，⽋缺了太多东西，那些浪费的时间可不是懊恼就能解决的。出来混。终归是要还的啊。先来幅图画，显⽰下什么是所谓的⾼亮效果在输⼊框周围出现了亮光，或者说阴影造成边框发亮的假象。这就是我所说的...

input range 轨道滑过区域的样式input range 轨道滑过区域的样式可以通过以下方式进行设置：```cssbox shadow怎么设置input(type=range)::-webkit-slider-runnable-track {    width: 100%;    height: 8.4px;    cursor:...

css3box-shadow阴影（外阴影与外发光）讲解基础说明：外阴影：box-shadow: X轴  Y轴  Rpx  color;属性说明（顺序依次对应）： 阴影的X轴(可以使⽤负值)    阴影的Y轴(可以使⽤负值)    阴影模糊值（⼤⼩）    阴影的颜⾊内阴影：box-shadow: X轴&nbs...

box-shadow属性的参数设置取值box shadow怎么设置阴影类型：此参数可选。如不设值，默认投影⽅式是外阴影；如取其唯⼀值“inset”，其投影为内阴影；X-offset：阴影⽔平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；Y-offset：阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；阴...

box-shadow全⾯解析⼀、box-shadow语法：box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影⽔平偏移量，正⽅向为right） y-offset（阴影垂直偏移量，正⽅向为bottom） blur-radius（阴影模糊半径，为正，0为⽆模糊效果，值越⼤，越模糊） spread-radius（阴影扩展半径，可正可负） c...

html中背景加阴影，简单介绍CSS3中的阴影、背景和圆⾓边框样式CSS2.1 发布⾄今已有7年的历史。CSS3的出现就是增强CSS2.1的功能，减少图⽚的使⽤次数以及解决HTML页⾯上的特殊效果当前，CSS3技术最适合在移动Web开发中使⽤的特性包括：●增强的选择器●阴影●强⼤的背景设置●圆⾓边框阴影：现在的CSS3样式已经⽀持阴影样式效果。⽬前可使⽤的阴影的效果分为两种：⽂本内容的阴影效果和元...

详解css-vars-ponyfill在ie环境下使⽤问题（nextjs构建）css-vars-ponyfill通过css变量来实现⽹页换肤的过程中，会出现兼容性问题。为了解决ie，qq，百度浏览器等兼容性问题，引⼊css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的在nextjs下表现不佳，主要缺陷是由于页⾯是服务端渲染，因此⽤户在看到界⾯后，动态主题⾊...

css-vars-ponyfill 用法css变量cssvarsponyfill 是一个用于支持浏览器不支持 CSS 变量（也称为 CSS 自定义属性）的 JavaScript 库。它提供了一种在旧版本浏览器上使用 CSS 变量的解决方案。使用 cssvarsponyfill 非常简单，只需按照以下步骤进行操作：1. 下载 cssvarsponyfill：  你可以在 [GitHub]...

前端开发中常见的兼容性问题是困扰开发人员的头疼问题之一。不同浏览器对于 HTML、CSS 和 JavaScript 的解析方式存在差异，这就导致了同一份代码在不同浏览器中呈现效果不一致的情况。为了解决这些问题，我们需要采取一些策略和技巧。一、了解不同浏览器的差异在处理兼容性问题之前，首先要了解不同浏览器对于标准的支持程度和解析方式的差异。各大浏览器的官方文档和开发者社区是我们获取这方面信息的好途径...

前端必读：浏览器内部工作原理  目录  一、介绍  二、渲染引擎  三、解析与DOM树构建  四、渲染树构建  五、布局  六、绘制  七、动态变化  八、渲染引擎的线程  九、CSS2可视模型  英文原文：How Browsers Work: Behind the Scenes of M...

前端防止浏览器缓存的方法在前端开发中，我们经常会遇到浏览器缓存的问题。当我们修改了前端代码后，重新加载页面时，有时候浏览器会使用缓存的旧版本代码，导致我们修改的内容无法生效。为了解决这个问题，我们需要采取一些方法来防止浏览器缓存。1. 版本号控制一种常见的方法是通过给资源URL添加版本号来控制缓存。我们可以在每次发布新版本时，更新资源的URL，这样浏览器会认为这是一个新的资源，从而不再使用旧的缓存...

Rendering Engine(浏览器内核)与浏览器常见浏览器的内核简介2012-8-2BLYKBLYK1．浏览器内核介绍1.1浏览器内核概念浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的...

HTML5标准目录1.    简介    22.    特性    23.    新特性    34.    重要标记    45.    程序接口    56.    元素变化&...

项目一测试1.在＜body＞标记中有不同的属性，用来规定整个文档的基本设置，link属性的作用是（ ）。A:指定HTML文档中待连接的超连接对象的颜B:HTML超链接的颜C:HTML超链接的标记D:指定HTML文档中悬停的超连接对象的颜答案:A2.表示打开一个新的浏览器窗口的是（ ）。A:【_self】B:【_top】C:【_parent】D:【_blank】答案:D3.以下说法不正确的是...

一、什么是htmlunitHtmlUnit是一种用Java语言编写的开源框架，主要用于模拟浏览器行为。它可以用于测试web应用程序、与web页面进行交互，并且可以解析和操作HTML页面。二、为什么选择htmlunit1. 良好的兼容性：HtmlUnit支持HTML5、JavaScript、CSS3等最新的Web标准，可以准确地模拟各种浏览器。2. 强大的功能：HtmlUnit可以模拟用户在浏览器中...

前端开发中常见的兼容性问题与解决方法在前端开发中，无论是网站还是移动应用，都会遇到兼容性问题。由于不同浏览器的内核和标准解读存在差异，导致同一个网页或应用在不同浏览器中的呈现效果会有所不同。本文将介绍一些常见的兼容性问题，并提供相应的解决方法。1. CSS样式兼容性问题CSS样式是页面布局和视觉呈现的关键部分，但在不同浏览器中，对CSS属性的支持程度可能会有差异。一个常见的问题是浏览器前缀，比如-...

前端开发中常见的兼容性问题一直是开发者们头疼的问题。不同浏览器的存在使得同一份代码在不同的浏览器上可能呈现出不同的效果，甚至出现布局错乱、功能失效等问题。本文将从不同维度出发，探讨如何处理前端开发中常见的兼容性问题，帮助开发者们更好地应对这些挑战。一、CSS兼容性问题CSS兼容性问题主要涉及不同浏览器对CSS属性的支持程度不同而带来的样式差异。在处理这类问题时，我们可以采取以下策略：1. 使用CS...