前端基础练习题（请查收）

时间：2023-09-07 16:06:01 | 来源：网站运营

时间：2023-09-07 16:06:01 来源：网站运营

前端基础练习题（请查收）：

1. css的优先级算法如何计算？

*或继承 0.0.0.0 *

元素（标签） 0.0.0.1 p

类，伪类 0.0.1.0 .

Id 0.1.0.0 #

行内样式 1.0.0.0 元素后直接使用

！Important +∞

权重相同，就近原则

权重会叠加，没有进制




从小到大排列：

*或继承<标签<类，伪类<id<行内<！Important

1. display:none与visibility：hidden的区别？

（1）Display:none 隐藏

隐藏后不保留位置

（2）Visibility:hidden 隐藏

隐藏后保留位置

1. position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

https://www.cnblogs.com/wulinzi/p/8426383.html

1. CSS优化、提高性能的方法有哪些？

1、尽量将样式写在单独的css文件里面，在head元素中引用

　　有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：

　　(1)内容和样式分离，易于管理和维护

　　(2)减少页面体积

　　(3)css文件可以被缓存、重用，维护成本降低

2、不使用@import

　@import影响css文件的加载速度

3、避免使用复杂的选择器，层级越少越好

　　有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。

建议选择器的嵌套最好不要超过三层

　　简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。

4、精简页面的样式文件，去掉不用的样式

　　很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS同时引用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题：

　　(1)样式文件偏大，影响加载速度

　　(2)浏览器会进行多余的样式匹配，影响渲染时间。

　　正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。

　　PS：合并成一个文件有一个优点：样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待，如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。

5、利用CSS继承减少代码量

　　我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。

　　常见的可以继承的属性比如：

　　color，font-size，font-family等等

　　不可继承的比如：

　　position，display，float等

6、慎重使用高性能属性：浮动、定位；

1. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

可以将<li>代码全部写在一排

浮动li中float：left

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

1. 什么叫img3px问题，怎么解决？

将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来

1、设置div{ font-size: 0}

2、设置img{ display: block}

3、设置img{ vertical-align:top;}

当然推荐第二种方法，让img对象成为块级元素。

1. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

1. 文本超出显示省略号如何实现？

white-space：nowrap; 强制在同一行内显示所有文本，知道文本结束或遇到br

overflow:hidden;

text-overflow：clip/ellipsis;直接裁切/溢出部分...标记

1. 对WEB标准以及W3C的理解与认识？

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）。标签字母要小写

2）。标签要闭合

3）。标签不允许随意嵌套

2.对于css和js来说

1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

1. xhtml和html有什么区别？

一、其基础语言不同

1、XHTML是基于可扩展标记语言（XML）。

2、HTML是基于标准通用标记语言（SGML）。

二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。

1. 前端页面有哪三层构成，分别是什么，作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。

HTML：结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的CSS访问权限的客户（如果不是所有功能）。

CSS：样式层

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需要HTTP请求才能获取它，从而影响站点性能。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最常用的语言，但CGI和PHP也经常被使用。

当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。