前言：本文主要分享CSS和JavaScript基础面试题。CSS和JavaScript都是前端基础知识，是前端学习必学的内容，也是前端面试必不可少的内容。CSS面试题1.介绍标准的CSS盒模型？盒子模型与早期版本的IE有何不同？相关知识点：盒子模型有两种：IE盒子模型（border-box）、W3C标准盒子模型（content-box）盒子模型：分为内容（content）、填充（padding）、边框（margin）、边框（border)IE盒模型四部分与W3C标准盒模型的区别：W3C标准盒模型：属性width和height只包含content内容，不包含border和paddingIE盒模型：属性width和height包含content、border和padding，指的是什么是content+padding+border。在ie8+浏览器中使用哪种盒模型可以通过box-sizing（一个新的CSS属性）来控制，默认值为content-box，即标准的盒模型；如果box-sizing设置为border-box，则IE使用框模型。如果在ie6、7、8中缺少DOCTYPE，盒子模型将被解释为IE盒子模型。如果在页面中声明了DOCTYPE类型，所有浏览器都会将框模型解释为W3C框模型。2.什么是CSS选择器？id选择器(#myid)类选择器(.myclassname)标签选择器(div,h1,p)后代选择器(h1p)相邻后代选择器(child)选择器(ul>li)兄弟选择器(li~a)相邻兄弟选择器(li+a)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)伪元素选择器(::before,::after)通配符选择器(*)3.::before和:after中的双冒号和单冒号有什么区别？解释这两个伪元素的作用。相关知识点：单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是浏览器需要同时支持已有的旧伪元素，如:first-line,:first-letter,:before,:after等，而CSS3引入的新伪元素则不支持允许支持旧的。单冒号的书写。如果希望插入的内容出现在其他内容之前，使用::before，否则使用::after；在代码顺序上，::after生成的内容也晚于::before生成的内容。从栈的角度来看，::after生成的内容会在::before生成的内容之上。4、伪类和伪元素的区别CSS引入了伪类和伪元素的概念来格式化文档树以外的信息。即伪类和伪元素用于修饰不在文档树中的部分，例如句子的第一个字母，或列表的第一个元素。伪类用于在现有元素处于某种状态时为其添加相应的样式，该状态会根据用户行为动态变化。例如，当用户悬停在指定元素上时，我们可以使用:hover来描述这个元素的状态。伪元素用于创建和设置不在文档树中的元素的样式。它们允许我们为元素的某些部分设置样式。例如，我们可以使用::before在元素之前添加一些文本并为文本添加样式。虽然用户可以看到文本，但文本实际上并不在文档树中。5.CSS中哪些属性是可以继承的？继承属性：字体族属性font,font-family,font-weight,font-size,font-style,font-variant,font-stretch,font-size-adjust文本族属性text-indent,text-align,text-shadow,line-height,word-spacing,letter-spacing,text-transform,direction,color表格布局属性caption-sideborder-collapseempty-cells列表属性-position,list-stylecursor属性游标元素可见性，有一些不常用的；speak、page、quote类型的引号等属性用于设置嵌套引用注意：当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应该从父元素继承它的值，使用inherit关键字明确指定继承，可用于任何继承/非继承的属性。6、CSS优先级算法是如何计算的？相关知识点：CSS的优先级是根据样式声明的特异性值来判断的。选择器的特异性值分为四个等级，分别为：标签内选择器x,0,0,0ID选择器0,x,0,0类选择器/属性选择器/伪类选择器0,0,x,0元素和伪元素选择器0,0,0,x计算方法：每一层初始值为0，每一层叠加就是选择器出现次数的相加，比如0,99,99,99表示为：0,0,0,0各个级别的计数之间没有相关性。从左到右判断级别。如果某位的值相同，则判断下一位的值。如果两个优先级相同，最后一个出现的优先级高，也适用!important。通配符选择器的特异性值为：0,0,0,0继承样式的优先级最低，通配符样式的优先级高于继承样式！important（权重），它没有特异性值，但其优先级最高。为了方便记忆，可以认为它的特异性值为1,0,0,0,0。计算示例：#demoa{color:orange;}/*具体值：0,1,0,1*/div#demoa{color:red;}/*具体值：0,1,0,2*/注意：应用样式时，css会先检查规则的权重(!important)，添加权重的优先级最高。当权重相同时，会比较规则的特殊性。具有更高特异性值的声明具有更高的优先级。对于具有相同特异性值的声明，按照引入样式的先后顺序，后声明的规则具有更高的优先级（最接近元素外观）。部分浏览器由于字节溢出问题，不考虑进位性能。7、关于伪类LVHA的解释?a标签有四种状态：链接访问前，链接访问后，鼠标悬停，激活对应四个伪类：link,:visited,:悬停，：活动；当链接还没有被访问过时：当鼠标悬停在一个链接上时，满足:link和:hover两种状态。要改变a标签的颜色，必须在:link伪类之后声明:hover伪类；当鼠标点击激活一个链接时，:link和:hover都满足,:active三种状态，要显示a标签激活时的样式（:active），:active语句必须放在:link和:之后徘徊。因此，得到LVHA的阶数。当链接已经被访问过时，情况和上面基本一样，只是需要把:link换成:visited。可以更改此顺序吗？可以，但是只有:link和:visited可以交换位置，因为一个链接要么被访问要么不被访问，不可能两者都满足，所以不存在覆盖的问题。8.CSS3中有哪些新的伪类？elem:nth-child(n)选择父元素下的第n个子元素，这个子元素的标签名称为elem，n可以接受具体的值或函数。elem:nth-last-child(n)效果同上，只是从末尾开始查找。elem:last-child选择最后一个子元素。elem:only-child如果elem是父元素下唯一的子元素，则选择它。elem:nth-of-type(n)选择父元素下的第n个elem类型元素。n可以接受特定的值或函数。elem:first-of-type选择父元素下的第一个elem类型元素。elem:last-of-type选择父元素下的最后一个elem类型元素。elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选择该元素。elem:empty选择不包含子元素和内容的elem类型元素。elem:target选择当前活动的elem元素。:not(elem)选择不是elem元素的每个元素。:enabled控制表单控件的禁用状态。:disabled控制表单控件的禁用状态。:checked单选或复选框被选中。9.如何让div居中？水平居中：给div设置一个宽度，然后加上margin:0auto属性div{width:200px;margin:0auto;}水平居中：使用text-align:center实现.container{background:rgba(0,0,0,0.5);文本对齐：居中；font-size:0;}.box{display:inline-block;宽度：500px；高度：400px；background-color:pink;}居中绝对定位的divdiv{position:absolute;宽度：300px；高度：300px；保证金：自动；顶部：0；左：0；底部：0；右：0；背景色：粉色；*确定容器的宽高设置层的外边距宽500，高300*/div{position:absolute;/*绝对定位*/width:500px;高度：300px；顶部：50%；左：50%；margin:-150px00-250px;/*外边距是自身宽高的一半*/background-color:pink;/*效果一目了然*/}水平和垂直居中二/*未知的宽高容器，使用`transform`属性*/div{position:absolute;/*可以使用相对定位或者绝对定位*/width:500px;高度：300px；顶部：50%；左：50%；转换：翻译（-50%，-50%）；背景色：粉色；/*很容易看到效果*/}水平和垂直居中3/*使用flex布局时要考虑兼容性*/.container{display:flex;对齐项目：居中；/*垂直居中*/justify-content:center;/*水平居中*/}.containerdiv{width:100px;高度：100px；背景色：粉色；/*方便看效果*/}水平垂直居中四个/*使用text-align:center和vertical-align:middle属性*/.container{position:fixed;顶部：0；右：0；底部：0；左：0；背景：rgba(0,0,0,0.5);文本对齐：居中；字体大小：0；空白：nowrap；溢出：自动；}.container::after{内容：''；显示：内联块；高度：100%；vertical-align:middle;}.box{display:inline-block;宽度：500px；高度：400px；背景色：粉色；空白：正常；vertical-align:middle;}10.显示的值有哪些？说明它们的作用块类型，默认宽度是父元素的宽度，宽度和高度可以设置，并且会换行显示。none元素不显示并从文档流中删除。inline内联元素类型。默认宽度为内容宽度，宽度和高度不能设置，会平行显示。inline-block默认宽度为内容宽度，可以设置宽度和高度在一行中显示。list-item显示为块类型元素，添加了样式列表标记。table该元素将显示为块级表。inherit指定display属性的值应该从父元素继承。11、position值的相对和绝对定位原点是什么？相关知识点：absolute生成绝对定位的元素，相对于第一个值为非static的父元素的paddingbox定位。也可以理解为设置离自身level元素最近的一级位置为absolute或relative，以父元素paddingbox的左上角为原点。fixed（旧IE不支持）生成绝对定位的元素，相对于浏览器窗口定位。Relative生成??相对定位的元素，相对于元素本身的正常位置定位。静态默认值。没有定位，元素出现在正常流中（顶部、底部、左侧、右侧、z-index声明被忽略）。Inherit指定position属性的值是从父元素继承的。12、CSS3有哪些新特性？(根据项目答案)添加各种CSS选择器(:not(.input):所有class不是"input"的节点)圆角(border-radius:8px)多列布局(multi-columnlayout)阴影和倒影(Shadow\Reflect)文字效果(text-shadow)文字渲染(Text-decoration)线性渐变(gradient)旋转(transform)缩放、定位、倾斜、动画、多重背景13.请解释一下CSS3Flexbox(elasticbox)布局模型）和适用场景？相关知识点：Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。任何容器都可以指定为弹性布局。内联元素也可以使用Flex进行布局。注意设置flex布局后，子元素的float、clear、vertical-align属性将失效。采用弹性布局的元素称为弹性容器（flexcontainer），简称“容器”。它的所有子元素自动成为容器的成员，称为弹性项目（flexitem），简称“项目”。容器默认有两个轴：水平主轴和垂直横轴。默认情况下，项目沿主轴排列。在容器上设置了以下6个属性：flex-direction属性决定了主轴的方向（即item的排列方向）。flex-wrap属性定义了轴线不适合时如何换行。flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为rownowrap。justify-content属性定义项目如何在主轴上对齐。align-items属性定义项目如何在交叉轴上对齐。align-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。在项目上设置了以下6个属性：order属性定义了项目的排序顺序。值越小，排名越高，默认为0。flex-grow属性定义了item的放大比例，默认为0，即如果还有剩余空间，则不放大。flex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，item会收缩。flex-basis属性定义了一个项目在分配多余空间之前在主轴上占据了多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。align-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。14.纯CSS创建三角形的原理是什么？采用相邻帧交界处均分的原则。将元素的宽高设置为0，只设置边框，隐藏任意三边（颜色设置为透明），其余为三角形。#demo{宽度：0；高度：0；边框宽度：20px；边框样式：实心；border-color:transparenttransparentredtransparent;}如何设计全屏字符布局？如何实现CSS多列等高？经常遇到的浏览器的兼容性有哪些？原因是什么，解决方法是什么，常见的黑客攻击有哪些？是什么导致了li和li之间的无形空白？解决办法是什么？为什么要初始化CSS样式？什么是包含块，对包含块的理解是什么？CSS中visibility属性中的collapse属性的取值是多少？不同浏览器有什么区别？width:auto和width:100%的区别绝对定位元素和非绝对定位元素的百分比计算的区别简单介绍下使用图片base64编码的优缺点。“dsplay”、“位置”和“浮动”的相互关系？了解保证金重叠问题。BFC规范的理解（blockformattingcontext：块格式化上下文）？什么是国际金融公司？请解释为什么你需要清除浮动？清除浮点数的方法使用clear属性清除浮点数的原理？Zoom:1的清晰浮动原理？移动端的布局你用过媒体查询吗？使用CSS预处理器？你喜欢哪一个？优化CSS和提高性能的方法有哪些？浏览器如何解析CSS选择器？您应该在网页中使用奇数字体还是偶数字体？为什么？margin和padding适用于哪些场景？分离样式模块怎么写，说说思路，有实践经验吗？简单说一下css3的all属性。为什么不推荐使用通配符来初始化css样式。absolutecontainingblock（包含块）计算和正常流有什么区别？对hasLayout的理解？元素的垂直百分比设置是相对于容器的高度？全屏滚动的原理是什么？使用了CSS的哪些属性？什么是响应式设计？响应式设计的基本原则是什么？如何兼容低版本IE？视差滚动效果，如何为每个页面制作不同的动画？chrome记住密码后自动填表黄色背景怎么修改？如何使Chrome支持小于12px的文本？如何用CSS让页面上的字体更清晰更细？字体样式属性中斜体和斜体的区别？设备像素、css像素、设备独立像素、dpr、ppi之间的区别？布局视口、视觉视口和理想视口有什么区别？位置：固定；android下如何处理invalid？如果你需要手动编写动画，你认为最小的时间间隔是多少，为什么？如何删除行内块元素之间的间距？有一个高度自适应的div，里面有两个div，一个高度为100px，想让另一个填充剩下的高度。解释png、jpg和gif的图像格式，以及何时使用它们。你学过webp吗？浏览器如何判断是否支持webp格式的图片？什么是cookie隔离？body之后和body之前写的style标签有什么区别？什么是CSS预处理器/后处理器？讲解CSSSprites使用rem布局的优缺点？绘制一条0.5px的线transition和animation之间的区别首选的最小宽度是多少？为什么height:100%无效？覆盖最小宽度/最大宽度和最小高度/最大高度属性之间的规则？行内盒模型的基本概念什么是替换元素？替换元素的计算规则？内容和替换元素之间的关系？保证金的填充规则：自动？margin无效时border有什么特殊性？什么是基线和x高度？行高的特殊性？垂直对齐的特殊性？溢出的特殊性？什么是无依赖的绝对定位？absolute和overflow的关系？什么是剪辑？相对的特殊性？什么是堆叠上下文？什么是级联级别？元素的堆叠顺序？级联准则？font-weight的特殊性？文本缩进的特殊性？字母间距和字符间距？字间距和字间距？空白和控制换行符和空格？是否可以添加隐藏元素的背景图像？如何为单行/多行文本溢出实现省略号（...）？隐藏元素的常用方法？CSS实现固定上下的自适应布局？css两列布局的实现？css三栏布局的实现？实现一个自适应宽高的正方形实现一个三角形JavaScript基础面试题介绍JavaScript的基本数据类型谈谈编写JavaScript的基本规范？jQuery使用多少种类型的值来暗示Ajax使用JavaScript？你能画出它们的内存映射吗？栈和堆的区别？Javascript实现继承的几种方式Javascript创建对象有多少种方式？javascript角色链域说说理解这个eval是做什么的？什么是窗口对象？什么是文档对象？null和undefined的区别？["1","2","3"].map(parseInt）答案是什么？关于事件，IE和Firefox的事件机制有什么区别？如何停止冒泡？什么是闭包，为什么要使用它？什么是“严格使用”；在javascript代码中是什么意思？使用它有什么区别？如何判断一个对象是否属于某个类？new运算符到底做了什么？在Javascript中，在执行时查找对象时，它永远不会查找原型的功能吗？了解JSON？JS懒加载有哪些方式？同步和异步有什么区别？什么是跨域问题，如何解决跨域问题？如果页面代码和请求的资源代码不一致，如何处理？如何进行模块化开发？AMD和CMD规范有什么区别？requireJS的核心原理是什么？（如何动态加载？如何避免多次加载？如何缓存？）call和applydocumen.write和innerHTML的区别Reflow和重绘DOM操作数组对象的native方法有哪些，并列出那些会导致内存泄漏的操作什么是Cookie隔离？flash和js是如何交互响应事件的？Flash和Ajax的优点和缺点是什么？有效的javascript变量定义规则XML与JSON的区别？HTML和XML的区别？WebWorkers和WebSockets的渐进增强和优雅降级？JS垃圾回收机制？Web应用如何主动将数据从服务端推送到客户端？如何删除cookie？属性和属性的区别？Ajax请求的页面历史状态问题？
