css

CSS面试问题

2021-05-26  本文已影响0人  天马行空_eaa7

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

我的理解：

  1. 由上面两个公式发现：怪异模式时，width/height=content+padding+border

  2. 标准盒子模式是盒子的content的宽和高固定，但是实际的宽和高会通过padding，border,margin向外拓展空间,从而增大宽和高；而怪异盒子模型是向内拓展空间，导致宽和高固定，但是压缩了内容(content)的空间【通过padding和border】

2.display的几种取值

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

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

  1. 嵌套

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

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

    div可以嵌套div

    td可以嵌套div

    li可以嵌套div

    dd，dt可以嵌套div

    结构标记 可以嵌套div

  2. margin和padding

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

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

  3. 设置宽高

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

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

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

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性能优化

  1. 尽量使用缩写

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

    改成=> p { margin: 1px 2px 3px 4px; }

  2. 内联关键css代码

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

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

  1. 不用import,改用link引入css

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

    改成=> < link rel="stylesheet" href="c.css">

  2. 删除不必要的零和单位

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

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

    改成=> padding: .2em; margin: 20em; avalue: 0;

  3. 避免使用需要性能要求的属性

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

    border-radius ,box-shadow, transform,filter :nth-child , position: fixed;

  4. 多利用css继承减少代码量。

    .a , .b{

    xxxxxx

    }

9.src,href和URL的区别

src: script, img
href: a, link

3.href和src的区别

3.1 请求资源类型不同

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

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

3.2 作用结果不同

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

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

10.对BFC的理解

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

通俗理解

  1. BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

  2. 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

  3. 浮动元素会创建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.实现垂直水平居中

  1. 垂直居中

    在该元素中设置：

    margin：0 auto；

  2. 垂直水平居中

    在父元素设置

    display:flex;

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

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

12.line-height和height的关系

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

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

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

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

  1. DNS缓存(缓存IP地址)

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

    DNS缓存是指在正常范文IP后，系统会将这个IP存储起来，当再次访问时，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析

  2. 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）,来拉取最新的数据。

  3. 浏览器缓存（客户端缓存）

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

    3.1 浏览器缓存刷新

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

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

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

  4. 服务器缓存

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

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浏览器。

  1. 属性级Hack：比如IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，而firefox两个都不能认识。

  2. 选择符级Hack：比如IE6能识别 html .class{}，IE7能识别+html .class{}或者:first-child+html .class{}

  3. IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<![endif]–>，针对IE6及以下版本：<![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

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

16.Sass和Less是什么？

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

  1. Sass是成熟的css预处理器之一，有一个稳定，强大的团队在维护。

  2. 拥有丰富的参考资源

  3. Sass有一些成熟稳定的框架，特别是compass，新秀还有foundation之类。

  4. Sass使用人数更多一些

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

18.对HTML语义化的理解

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

19.对浏览器引擎的理解

  1. 分类

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

  2. 渲染引擎

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

  3. 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浮动

       .clearfix:after{
            content:"";
            display:block;
            visibility:hidden;
            clear:both;
            }
上一篇 下一篇

猜你喜欢

热点阅读