CSS面试问题

作者: 天马行空_eaa7 | 来源:发表于2021-05-26 10:52 被阅读0次

1.什么是盒子模型？

CSS 盒子模型就是在CSS技术中使用的一种思维模型。

盒模型=content+padding+border+margin

盒模型有两种形式：标准盒子模型(content-box)【默认】，怪异盒子模型(border-box)

两种模式的区别：

先来看看如下代码：

.box{ 
 box-sizing:border-box; //没有添加时，按照标准模式计算， 添加时按照怪异模式解析 
 width:200px; 
 height:200px; 
 border:2px solid black; 
 padding:50px; 
 margin:50px; 
 }

标准模式：盒子总(实际)宽度/高度=content+padding+border+margin

css图片1.png

怪异模式：盒子总(实际)高度/宽度=width/height+margin

css图片2.png

我的理解：

由上面两个公式发现：怪异模式时，width/height=content+padding+border
标准盒子模式是盒子的content的宽和高固定，但是实际的宽和高会通过padding，border,margin向外拓展空间,从而增大宽和高；而怪异盒子模型是向内拓展空间，导致宽和高固定，但是压缩了内容(content)的空间【通过padding和border】

2.display的几种取值

1. none: 元素不会显示，不占据页面空间
2. inline:行内元素
3. block:块级元素
4. inline-block:行内块级元素
5. flex:多栏多列布局</pre>

对上面取值的解释如下：
- none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
- inline 行内元素元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。(行内元素都是)
  
  示例元素：span, label, b , i(倾斜) , a , u , sub , sup ,strong ,em
- block 块级元素会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
  
  示例元素：div,h1-h6,ul,ol,dl,p
- inline-block 行内块元素与行内元素一样可以在一行内显示，而且可以设置宽高，可以设置margin和padding。
  
  示例元素：input,button,img
- flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。
  
  一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
  
  伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
  
  实例：
  
  HTML代码：
  
  < div class='container'>
  
  < div class='left'>左</div>
  
  < div class='center'>中</div>
  
  < div class='right'>右</div>
  
  </div>
  
  CSS代码：
  
  .container{
  
  display:flex; // 设置一个伸缩容器
  
  flex-flow(流动) : row wrap /布局方式,row:从左向右布局，column：从上到下布局，wrap：是否在一行显示，如果设置了此值，则伸缩项目会换行显示，如果没有设置此值，则不会换行显示/
  
  }
  
  .left{width:500px;}
  
  .center{flex:1;}
  
  .right{flex:2;}
  
  设置flex属性的元素会用伸缩容器减去有实际数值的元素的宽或者高，然后将差值按照flex设置的数值进行比例的分配。这里会减去500px,然后按照1：2将剩下的空间分配

3.行内元素(inline)和块级(block)元素的区别

嵌套

行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。

块级元素：块级元素可以嵌套行内元素，但是行内元素不可以嵌套块级元素。块级元素之间也可以进行嵌套，但是，并不是块级元素之间可以随意的嵌套。p元素是不能嵌套任何块级元素的，div可以嵌套任意的元素，但是div并不是能够被所有的块级元素嵌套的。

div可以嵌套div

td可以嵌套div

li可以嵌套div

dd，dt可以嵌套div

结构标记可以嵌套div
margin和padding

行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。

块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。
设置宽高

行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。

块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。

4.行内元素有哪些，块级元素有哪些，空元素（单标签）有哪些，请举例说明，每种至少3个？

知识储备

空元素：首先空元素下是没有子级节点和内容的。然后空元素是在开始标签中关闭的，也就是说空元素没有闭合标签的

行内元素：<span>,<button>,<input>,<img>,<a>,<i>,<em>,<strong>,< label>

块级元素：<div>,<h1>~<h6>,<ol>,<ul>,<table>,<form>,<p>

空元素：<input> ,<img>,<link>,< br>,< hr>,<meta>

行内块级元素: <img> <input> <button>

5.Strong和em

em是句意强调，加上不会引起语意的变化。

strong是重要性的强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意，并且在浏览器中，em默认为斜体，strong默认为粗体表示。

个人理解：两者都是强调，em表示斜体强调，strong表示粗体强调，是更强调的强调。

6.img的alt与title有什么不同

同属于img 的属性

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip）。

使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

个人理解：

title是鼠标悬浮在图片上面时候显示的文字信息

alt是当图片加载时候显示的文字信息

7.CSS的内联和外联

css内联：就是把CSS放在HTML的heah里用style标签包围。< style type="text/css">< /style>

css外联：就是把css放在一个单独的文件，然后通过link标签调用。< link rel="stylesheet" type="text/css" href="">。

我们要明白的是http的请求(加载css,图片要http请求)是昂贵的，如果我们使用的是内联，那肯定就很快，因为css放到了html中，这样就减少了一次请求。而外联的话就会发生一起http请求。

但是我们也要明白，这是可以缓存的，当浏览器加载过这个文件后我们第二次第三次的请求就是从缓存里来读取的，所以后面的请求很快的，并且外联的css还可以重用代码。

那我们该怎么来使用内联外联呢？具体看使用的情况。

比如，一个注册网页，一般情况下都只会进去一次，这就不需要缓存了，那就使用css内联，缩短加载时间，提高用户体验，而经常使用的网址，那就用外联更好。

8.CSS性能优化

尽量使用缩写

p { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; }

改成=> p { margin: 1px 2px 3px 4px; }
内联关键css代码

加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在 head 中

    < head> < style> .blue{color:blue;} < /style> < /head>

不用import,改用link引入css

@import url("c.css");//使用import会发起一次http请求，导致性能消耗

改成=> < link rel="stylesheet" href="c.css">
删除不必要的零和单位

CSS 支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零，如下面的代码片段所示。此外，请记住，零始终是零，添加维度不会为包含的信息附带价值。为 0 的数值默认单位是 px—— 删除 px 可以为每个数字节省两个字节。

padding: 0.2em; margin: 20.0em; avalue: 0px;

改成=> padding: .2em; margin: 20em; avalue: 0;
避免使用需要性能要求的属性

分析表明，一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况，尽量不要使用它们。

border-radius ,box-shadow, transform,filter :nth-child , position: fixed;
多利用css继承减少代码量。

.a , .b{

xxxxxx

}

9.src,href和URL的区别

src: script, img
href: a, link

URL

URL(Uniform Resource Locator) 统一资源定位符。（相对于网上的唯一定位地址）

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

结构：

模式（或称协议） + 服务器名称（IP地址）、路径和文件名，例如：https: //segmentfault. com/a/1190000002877022。带有授权部分的普通统一资源标识符。

分类: 绝对URL 和相对URL（以包含URL本身的文件夹的位置为参考点）
href和src的区别

1.href (Hypertext Reference【超文本引用】)网络资源的位置，浏览器识别当前资源是一个样式表，******页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在< style>标签里不相同，因此建议使用link标签(link中使用href)而不是@import来把css样式表导入到html文档里。（@import会发起一次http请求，导致网页显示时间长）

2. src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，在浏览器下载，编译，执行这个文件之前，页面的加载和处理会被暂停。这个过程与把js文件放到< script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

3.href和src的区别

3.1 请求资源类型不同

（1）href 指向网络资源所在位置，建立资源和当前元素（锚点）或当前文档（链接）之间的联系。

（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；

3.2 作用结果不同

（1）href 用于在当前文档(如HTML文档)和引用资源之间确立联系；

（2）src 用于替换(插入)当前内容；

10.对BFC的理解

BFC(Block Formating Content):块级格式化上下文；

通俗理解

BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

如何才会产生BFC

1. float：left, right
2. display：inline-block, flex
3. overflow：hidden，auto(与scroll相似，如有多，也会有滚动条，没多，则不会有), scroll(无论多不多，都会有条)
4. position：fixed，absolute
absolute:相对于除了static的父元素的相对位置；
fixed:相对于浏览器的位置；
relative:相对于该元素本来的正常流中的位置，如left:10px,则是相对于其本来位置向左移10px;
static:默认值，正常的流中的位置</pre>

11.实现垂直水平居中

垂直居中

在该元素中设置：

margin：0 auto；
垂直水平居中

在父元素设置

display:flex;

justify-content:center;(行对齐【居中】) 注意：如果使用justify-content来实现行居中时，同时要规定规定height。不然无效！

align-items:center;（垂直居中）

12.line-height和height的关系

line-height=行距+字体大小(font-size)

line-height.png

相信一部分人和我一样，知道line-height属性是因为遇到了一个问题，“如何垂直居中”，这时候就会看到一条答案，“设置 line-height 等于 height”，然后一试，果然可以。但不知道大家有没有想过为什么。

其实原因很简单，当我们设置 line-height 等于 height 时，根据刚才的公式我们可以得到，行距 + 字体大小 = height ，并且由于上下的半行距相等，而文字被夹在上下的半行距之间，所以无论字体大小是多少都会让文字垂直居中。但这种方法不可取，因为如果出现换行或者需要垂直居中的不是文字，就会出现意料之外的情况。

13.一次JS请求会有哪些地方的缓存？

浏览器缓存-->DNS缓存-->CDN（content delivery Network）缓存-->服务器缓存

DNS缓存(缓存IP地址)

DNS（域名解析系统），用于将域名解析成IP地址。

DNS缓存是指在正常范文IP后，系统会将这个IP存储起来，当再次访问时，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析
CDN缓存
1. CDN是什么
CDN是Content Delivery NetWork的简称，即‘内容分发网络'的意思，主要用于分地域的集群服务器，当用户浏览网站请求数据时，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低，大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。
1. CDN缓存是什么
  
  用户浏览器与服务器交互，没有接入CDN时：用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。
  
  接入CDN时：客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束；如果数据已经过期，那么CDN还需要向源站发出回源请求（back to the source request）,来拉取最新的数据。
浏览器缓存（客户端缓存）

客户端缓存减少了服务器请求，避免了文件重复加载，显著地提升了用户体验。但是当网站发生更新时(如替换了css，js以及图片文件)，浏览器本地仍保存着旧版本的文件，从而导致无法预料的后果。

3.1 浏览器缓存刷新

在地址栏中输入网址后按回车或点击转到按钮：浏览器以最少的请求来获取网页的数据，浏览器会对所有没有过期的内容直接使用本地缓存，从而减少了对浏览器的请求。所以，Expires，max-age标记只对这种方式有效。

按F5或浏览器刷新按钮：浏览器会在请求中附加必要的缓存协商，但不允许浏览器直接使用本地缓存，它能够让 Last-Modified、ETag发挥效果，但是对Expires无效。

按Ctrl+F5或按Ctrl并点击刷新按钮：这种方式就是强制刷新，总会发起一个全新的请求，不使用任何缓存。
服务器缓存

缓存指的是将需要频繁访问的网络内容存放在离用户较近、访问速度更快的系统中，以提高内容访问速度的一种技术。服务器缓存就是存放频繁访问内容的服务器。

14.超链接访问过后，hover(指针悬浮)样式就不会出现的问题

被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：

L-V-H-A（link，visited，hover，active）

快速记忆：love-hate

15.什么是CSS Hack？IE6,7,8的hack分别是什么？(IE浏览器在2022.6.16将退役)

简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。

CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题，如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}。

CSS Hack常见的有三种形式：

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

属性级Hack：比如IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，而firefox两个都不能认识。
选择符级Hack：比如IE6能识别 html .class{}，IE7能识别+html .class{}或者:first-child+html .class{}
IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<![endif]–>，针对IE6及以下版本：<![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

16.Sass和Less是什么？

相同点：两者都是CSS预处理器，都具有相同的功能，可以帮助我们快速编译代码，助我们更好的维护我们的样式代码或者说维护项目。不同点：语法规则不同，当然功能或许略有差别我选择Sass的原因：

Sass是成熟的css预处理器之一，有一个稳定，强大的团队在维护。
拥有丰富的参考资源
Sass有一些成熟稳定的框架，特别是compass，新秀还有foundation之类。
Sass使用人数更多一些

17.描述一个‘reset’的CSS文件并如何使用它。知道normalize.css吗？

使用方法

（vue项目中应用）在项目入口文件main.js中提前引入即可。
作用

不同的浏览器对一些元素有不同的默认样式，Normalize.css 和 Reset CSS都是用来重置浏览器默认样式。
reset.css和normalize.css的区别？

normalize.css要优于reset.css

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。

相对于普通的css reset，Normalize的的浏览器的兼容性更好，毕竟是专业人士经过不同版本浏览器测试打造的css文件，看看它的兼容性就知道多强悍：Google Chrome (latest)、Mozilla Firefox (latest)、Mozilla Firefox ESR、Opera (latest)、Apple Safari 6+、Internet Explorer 8+

18.对HTML语义化的理解

1. 在正确的标签做正确的事，让页面结构化，便于浏览器，搜索引擎解析。
2. 在没有css的情况下，HTML文档看起来也是以一种容易阅读的格式显示</pre>

19.对浏览器引擎的理解

分类

主要分为两种：渲染引擎和JS引擎
渲染引擎

网页浏览器的排版引擎也被称为页面渲染引擎，它负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入 CSS 等），以及计算网页的显示方式然后会输出至显示器或打印机。所有浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。
JS引擎

解析和执行javascript来实现网页的动态效果。

20.CSS动画

Css3提出的三个属性：transition(过渡)，transform（转换），animation（动画）

Transition：的另一了元素在变化过程中是怎么样的；

Transform：定义元素的变化结果；

Animation：（和@keyframes搭配使用）动画定义了动作的每一帧（@keyframes）有什么

{
 animation:move 5s infinite
}
@keyframes move{
 from{
 xxx;
 }
 to{
 xxx;
 }
}

21.CSS3新增的内容

css图片4.png

1、box-shadow（阴影效果）

2、border-color（为边框设置多种颜色）

3、border-image（图片边框）

4、text-shadow（文本阴影）

5、text-overflow（文本截断）

6、word-wrap（自动换行）

7、border-radius（圆角边框）

8、opacity（透明度）

9、box-sizing（控制盒模型的组成模式）

10、resize（元素缩放）

11、outline（外边框）

12、background-size（指定背景图片尺寸）

13、background-origin（指定背景图片从哪里开始显示）

14、background-clip（指定背景图片从什么位置开始裁剪）

15、background（为一个元素指定多个背景）

16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）

17、hsla（在hsl的基础上增加透明度设置）

18、rgba（基于rgb设置颜色，a设置透明度）

22.清除css浮动

什么是浮动？

css使用了浮动属性，导致父元素不能被撑开。
浮动的负作用
1. 背景不能显示【因为父元素不能撑开】
2. 边框不能被撑开【因为父元素不能撑开】
3. margin和padding的设置值不能被正确显示【因为父元素不能撑开】
如何清除浮动？
1. 对父级设置合适高度
2. clear：both 【会造成结构混乱，不利于后期维护，不推荐】
3. overflow：hidden| auto 【它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果】
4. 利用伪元素：给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

       .clearfix:after{
            content:"";
            display:block;
            visibility:hidden;
            clear:both;
            }