前端css基础面试题全面解析

一 :CSS的“重置”和“规范化”有什么区别？你会选择哪个，为什么？

重置 - 重置旨在去除元素上的所有默认浏览器样式。对于例如margins，paddings，font-sizes，所有元素的s被重置为相同。您必须为常见的印刷元素重新设计样式。
规范化 - 规范化保留有用的默认样式而不是“取消”所有内容。它还纠正了常见浏览器依赖项的错误。
当我有一个非常定制或非常规的网站设计时，我会选择重置，这样我需要做很多自己的样式，不需要保留任何默认样式

二 :描述float它们以及它们如何工作?

Float是一个CSS定位属性。浮动元素仍然是页面流的一部分，并且将影响其他元素的定位（例如，文本将在浮动元 素周围流动），这与position: absolute从页面流中移除的元素不同。
CSS clear属性可用于定位在left/ right/ both浮动元素下方。
如果父元素只包含浮动元素，则其高度将折叠为空。可以通过在容器中的浮动元素之后但在容器关闭之前清除浮动 来修复它。

三 :描述z-index以及如何形成堆叠上下文。

z-indexCSS中的属性控制重叠元素的垂直堆叠顺序。z-index仅影响position值不是的元素static。
没有任何z-index值，元素按它们在DOM中出现的顺序堆叠（在同一层次结构级别的最低层显示在顶部）。无论 HTML层次结构如何，具有非静态定位的元素（及其子元素）将始终显示在具有默认静态定位的元素之上。
堆叠上下文是包含一组图层的元素。在本地堆栈上下文中，z-index其子项的值是相对于该元素而不是文档根设置的 。在该上下文之外的层 - 即本地堆叠上下文的兄弟元素 - 不能位于其中的层之间。如果元素B位于元素A的顶部， 则元素A的子元素（元素C）永远不会高于元素B，即使元素C具有高于z-index元素B.
每个堆叠上下文都是自包含的 - 在堆叠元素的内容之后，整个元素被视为父堆叠上下文的堆叠顺序。少数CSS属性 会触发新的堆叠上下文，例如opacity小于1，filter而不是none，而transform不是no

四:什么是各种清算技术，哪些适合哪种情况？

空div方法 :

 <div style="clear:both;"></div>

Clearfix方法 - 请参阅.clearfix上面的类。
overflow: auto或overflow: hidden方法 - Parent将建立一个新的块格式化上下文并展开以包含其浮动的子项。
在大型项目中，我会编写一个实用程序.clearfix类，并在需要它的地方使用它们。overflow: hidden如果孩子比父母高，并且不是很理想，可能会夹住孩子。
1、父级div定义 height
2、结尾处加空div标签 clear:both
3、父级div定义 伪类:after 和 zoom
4、父级div定义 overflow:hidden
5、父级div定义 overflow:auto
6、父级div 也一起浮动
7、父级div定义 display:table

五: 解释CSS精灵，以及如何在页面或网站上实现它们。

CSS sprites将多个图像组合成一个较大的图像。这是一种常用的图标技术（Gmail使用它）。如何实现它：
使用sprite生成器将多个图像打包成一个并为其生成适当的CSS。
每个图像都有一个相应的CSS类background-image，background-position并background-size定义了属性。
要使用该图像，请将相应的类添加到元素中。
好处：
减少多个映像的HTTP请求数（每个spritesheet只需要一个请求）。但是使用HTTP2，加载多个图像不再是一个问 题

六: 如何为功能受限的浏览器提供页面服务？你使用什么技术/流程？

优雅降级 - 为现代浏览器构建应用程序的做法，同时确保它在旧版浏览器中保持功能。
渐进增强 - 为基本级别的用户体验构建应用程序的实践，但在浏览器支持时添加功能增强功能。
使用caniuse.com检查功能支持。
Autoprefixer用于自动供应商前缀插入。
使用Modernizr进行特征检测。
使用CSS功能查询@support

七: 可视隐藏内容的不同方法有哪些（并且仅供屏幕阅读器使用）？

  visibility: hidden。但是，元素仍然在页面流中，仍然占用空间。
  width: 0; height: 0。使元素完全不占用屏幕上的任何空间，导致不显示它。
  position: absolute; left: -99999px。将它放在屏幕之外。
  text-indent: -9999px。这仅适用于block元素中的文本。
 元数据。例如，使用Schema.org，RDF和JSON-LD。
  WAI-ARIA。W3C技术规范，指定如何增加网页的可访问性

提前下载在需要之前不会下载的资产，例如仅出现在:hover伪状态的图像。不会看到眨眼。

八: 你能给出除屏幕以外的@media属性的例子吗？

是的，@ media属性有四种类型（包括屏幕）：
all - 适用于所有媒体类型的设备
print - 适用于打印机
speech - 用于大声“读取”页面的屏幕阅读器
screen - 用于电脑屏幕，平板电脑，智能手机等

九:使用CSS预处理器有哪些优点/缺点？

CSS更易于维护。
易于编写嵌套选择器。
用于一致主题的变量。可以跨不同项目共享主题文件。
Mixins生成重复的CSS。
循环，列表和映射等Sass功能可以使配置更容易，更简洁。
将代码拆分为多个文件。CSS文件也可以拆分，但这样做需要HTTP请求才能下载每个CSS文件。
缺点：
需要工具进行预处理。重新编译时间可能很慢。
不写当前可能有用的CSS。例如，通过使用postcss-loader和webpack之类的东西，您可以编写可能与未来兼容的 CSS，允许您使用CSS变量而不是Sass变量。因此，您正在学习新的技能，如果/何时它们变得标准化，可以获得回报

十:描述您对所使用的CSS预处理器的喜好和不喜欢。

喜欢：
主要是上面提到的优点。
Less用JavaScript编写，与Node一起使用。
不喜欢：
我使用Sass via node-sass，它是用C ++编写的LibSass的绑定。在节点版本之间切换时，我必须经常重新编译它。
在更短的，变量名前缀@，可与本地CSS关键字等混淆@media，@import而@font-face规律

十一:描述伪元素并讨论它们的用途。

CSS伪元素是添加到选择器的关键字，它允许您设置所选元素的特定部分的样式。它们可用于装饰（:first- line，:first-letter）或向标记添加元素（与之组合content: …），而无需修改标记（:before，:after）。
:first-line并且:first-letter可以用来装饰的文本。.clearfix如上所示在hack中使用以添加零空间元素clear: both。
工具提示中的三角箭头使用:before和:after。鼓励分离关注点，因为三角形被认为是样式的一部分而不是DOM。在 不使用额外HTML元素的情况下，仅使用CSS样式绘制三角形是不可能的。

十二:解释您对盒子模型的理解，以及如何告诉CSS中的浏览器在不同的盒子模型中渲染您的布局。

CSS框模型描述了为文档树中的元素生成并根据可视格式化模型布局的矩形框。每个包厢有一个内容区域（如文本，图像等），以及可选的周围padding，border和margin地区。
CSS框模型负责计算：
块元素占用多少空间。
边框和/或边距是否重叠或折叠。
盒子的尺寸。
盒子模型具有以下规则：
块元件的尺寸由计算width，height，padding，borderS，和margin秒。
如果未height指定，则块元素将与其包含的内容一样高padding（加上除非有浮点数，如下所示）。
如果未width指定，则非浮动块元素将展开以适合其父减号的宽度padding。
该height元素是由内容的计算height。
该width元素是由内容的计算width。
默认情况下，paddings和borders不是元素width和height元素的一部分

十三: 怎么* { box-sizing: border-box; }办？它的优点是什么？

默认情况下，已box-sizing: content-box应用元素，并且仅考虑内容大小。
box-sizing: border-box改变如何width和height元件的被计算出的，border并且padding也被包括在计算中。
现在height，元素的内容是height+垂直padding+垂直border宽度。
所述width元素的现在由内容的计算width+水平padding+水平border宽度。
考虑到paddings和borders作为我们的盒子模型的一部分，可以更好地与设计师如何实际想象网格中的内容产生共鸣
Content-box : padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding) 此属性表现为标准模式下的盒模型 .
Border-box : padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型

十四:什么是CSS display属性，你能举几个例子来说明它的用法吗？

none，block，inline，inline-block，table，table-row，table-cell，list-item
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

十五: 什么是之间的区别relative，fixed，absolute和static盟友定位的元素？

static - 默认位置; 元素将像往常一样流入页面。在top，right，bottom，left和z-index属性不适用。
relative - 元素的位置相对于自身进行调整，而不改变布局（从而为元素留下一个间隙，如果它没有被定位）。
absolute - 元素从页面流中移除并定位在相对于其最近定位祖先的指定位置（如果有的话），或相对于初始包含 块。绝对定位的盒子可以有边距，并且它们不会与任何其他边缘一起折叠。这些元素不会影响其他元素的位置。
fixed - 元素从页面流中移除并定位在相对于视口的指定位置，并在滚动时不移动。
sticky - 粘性定位是相对定位和固定定位的混合。该元素被视为已relative定位，直到它超过指定的阈值，此时它被 视为已fixed定位。

十六 :您能否解释一下网站编码响应与使用移动优先策略之间的区别？

使网站响应意味着一些元素将通过根据设备的屏幕大小（通常是视口宽度）通过CSS媒体查询调整其大小或其他功能来响应，例如，使较小的设备上的字体大小更小

十七:响应式设计与自适应设计有何不同？

 响应式和自适应式设计都尝试优化不同设备的用户体验，调整不同的视口大小，分辨率，使用上下文，控制机制等。

响应式设计基于灵活性原则 - 一个流畅的网站，可以在任何设备上看起来很好。响应式网站使用媒体查询，灵活网 格和响应式图像来创建基于多种因素进行灵活变化的用户体验。就像一个球生长或缩小以适应几个不同的篮球。
自适应设计更像是渐进增强的现代定义。自适应设计不是采用一种灵活的设计，而是检测设备和其他功能，然后根 据预定义的一组视口大小和其他特征提供适当的功能和布局。该站点检测所用设备的类型，并为该设备提供预设布局。而不是单个球穿过几个不同大小的篮球，根据篮圈的大小，你可以使用几种不同的球。
这两种方法都有一些需要权衡的问题：
响应式设计可能非常具有挑战性，因为您基本上使用一个尽管响应式布局来适应所有情况。如何设置媒体查询断点就是这样一个挑战。您是否使用标准化断点值？或者，您是否使用对您的特定布局有意义的断点？如果布局发生变化怎么办？
自适应设计通常需要用户代理嗅探或DPI检测等，所有这些都可以证明是不可靠的

十八 :关于定位

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative，sticky
◆position:static　无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
◆position:absolute　绝对定位
使用position:absolute，能够很准确的将元素移动到你想要的位置，
◆position:fixed　相对于窗口的固定定位
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。
◆position:relative　相对定位
所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

十八 :　3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000

十九:css: hover顺序

正确的排列顺序是：L-V-H-A，L-V-H-A是link、visited、hover、active的简写。

二十:Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

15.display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibili

16、BFC（Block Formatting Context） 是什么？应用？

1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
2. 应用场景：
3. 解决margin叠加的问题
4. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
5. 用于清除浮动，计算BFC高度

17、如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

18、CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

19、前端性能优化的方式

1、减少DOM操作
2、部署前，图片压缩，代码压缩
3、优化js代码结构，减少冗余代码
4、减少http请求，合理设置HTTP缓存
5、使用内容分发cdn加速
6、静态资源缓存
7、图片延迟加载

20、对前端工程化的理解

开发规范
模块化开发
组件化开发
开发仓库
性能优化
项目部署
开发流程
开发工具

21.animation对应的属性

写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

22.transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素

23.解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

IE当padding+border的值小于width或者height:
盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）
当padding+border的值大于width或者height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。
以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

24.px/em/rem有什么区别？ 为什么通常给font-size 设置的字体为62.5%

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem是相对于浏览器进行缩放的。1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，所以重置rem
区别是em是针对父元素的font-size做计算，而rem是相对与根元素做计算。我们在移动端使用rem作为所有大小的单位来解决适配的问题。
body{font-size=62.5% } 此时1rem = 10px;若是12px则是1.2rem.

25.常见兼容性问题？

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
• 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
• 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }
• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。
• IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
• 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
• 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>
• 上下margin重合问题
  ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
  解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
• ie6对png图片格式支持不好(引用一段脚本处理)

26.如何让一个div 上下左右居中?

有宽高情况下
方法1： .div1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <div class="div1"></div> 
方法2： .div2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <div class="div2"></div> 
方法3： .div3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <div class="div3"></div> 

27.transform？animation？区别?animation-duration

Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

28、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率

29.CSS实现盒子模型水平垂直居中方法

<div class="parent">
    <div class="child"></div>
</div>

第一种

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

第二种

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

第三种

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;    /* 自身 height 的一半 */
    margin-left: -25px;    /* 自身 width 的一半 */
}

第四种

.parent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child {
	display: inline-block;
}

第五种

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

30. rem、px、em区别

px像素 ：相对长度单位。相对于显示器屏幕分辨率而言
em : 相对于父节点的font-size做出改变
rem: 相对长度单位，指相对于根元素的字体大小的单位。