6常见的HTML和CSS面试问答

小灰灰 2022-12-15 11:25 104阅读 0赞

在本文中，我将介绍一些面试官最常见的问题和答案。会有关于HTML和CSS的问题。如果您喜欢阅读，请继续。

1.  CSS选择器的特异性是什么？它如何工作？

使用CSS选择器时，可以使用许多不同的方法来选择某个元素或元素组，但是有四种类别：内联样式（1000），ID（100），类（10）和元素（1 ）。

你注意到数字了吗？程序员很少知道这一点，但是它们代表了每种类别的特殊性。数字越大，特异性越高，它加起来！例如，如果您使用 \#home h1，特异性是 100 + 1 = 101，这将不仅仅是\#home

2.什么是可访问性？如何使您的Web应用程序最易于访问？

在网页上，高可访问性意味着，例如，无论他们使用的是不同设备还是视力障碍，所有用户都将拥有相同的体验。

为了使您的网页更易于访问，您应该执行多个实现细节，让我给您举一些例子：

使用语义HTML。  
内容应该可以通过键盘（无鼠标用户）进行浏览。  
提供媒体内容（图像和视频）的替代文本。  
使用可访问的颜色（您可以在此处检查颜色对比度 ）。  
使用可访问字体（必须可读）。

> 我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

3.什么是渐进式渲染？

渐进式渲染是在网页中缓慢渲染数据的行为，以在用户的互联网连接或设备速度太慢时增加用户体验。我可以举三个例子说明网页进行渐进式渲染时可能发生的情况：

图像开始加载，但是不是一次加载小的高质量位，而是选择加载整个低质量图像并逐步提高其质量。由于可以更快地可视化整个图像，因此可以改善用户的体验。  
一个网页包含多个图像，但是用户看不到其中的某些图像，因为它们需要向下滚动。该图像尚未加载，从而减少了用户花费的数据量。当图像到达用户的视口时，最终可以将其加载。  
网页包含HTML，CSS和Javascript内容。当页面开始加载时，它首先加载HTML内容，以防用户在连接失败时清楚地阅读它们。然后，如果一切正常，则加载CSS，最后加载Javascript。

4.什么是渐进增强？

在最后一个答案的最后一个示例中，我提到了网页使用渐进式渲染先加载HTML，然后加载CSS，最后加载Javascript。这是渐进增强的定义。

首先，程序员计划项目的基础和结构（HTML）。如果它在网页上正常工作（用户可以正确看到内容），则进行了增强，程序员将添加CSS。添加CSS之后，程序员可以通过添加Javascript向网页添加更复杂的功能。如果网页中断，例如，如果用户禁用了Javascript，则仍可以看到样式化的内容。

5.解释您对盒子模型的理解，以及如何告诉CSS中的浏览器以不同的盒子模型呈现布局。

盒子模型代表元素在网页上的行为方式以及相互之间的交互方式，涉及元素的某些属性，例如宽度，高度，边距，填充和边框。每个元素还有不同的显示类型，例如块，行内块，伸缩，网格等，它们将改变它们在页面上的位置。

就大小而言，元素的标准行为由以下公式给出：

total = width + padding + margin + border

如果您在确定布局的实际宽度时不希望布局出现问题，可以使用 box-sizing: border-box

，这样，元素的总宽度将是您指定的宽度，而与边框，边距和填充的数量无关。

在定位方面，元素的标准行为取决于其类型。例如，一个 div元素有 display: block

如果代码中未指定，则 a元素有一个标准display: inline-block。如果要更改这些元素的行为，则需要指定它。

6.有哪些清算技术？哪种清算技术适合于什么情况？

首先让我们了解什么是浮动元素。当你 float元素，它们会影响同一容器中其他元素的位置。例如，您有两个图像，并且它们之间有一些文本，然后您给出第一个图像 float: left 和第二个float: right。文本将在图像周围流动。

clear属性确定浮动元素除了cleared元素之外是否不存在，它可以清除左侧，右侧或两侧。在上图中，我们可能不希望文本位于左侧图像的右侧或右侧图像的左侧。我们有一些技术可以用来解决此问题：

空的 div与 clear: both：此技术不是最语义化的，但是它解决了我们的问题。您需要做的是创建一个 div浮动元素之后的元素，然后给它 clear: both，请确保它占用了浮动元素旁边的所有剩余空间，并使以下所有元素都定位在其下方。  
父元素溢出：您可以使用 overflow: auto包含浮动元素的父元素上的属性，这将使所有下一个元素自己定位在其下方。这也不是最语义化的策略，尤其是如果您仅为此目的创建父元素时。  
.clearfix方法：这是解决此问题的最佳方法，因为您无需创建任何非语义元素，并且将使用伪选择器来坚持使用CSS。将以下属性应用于浮动对象，您将看到魔力：

.clearfix:after { 
       content: '';
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }

我希望您可以通过阅读本文来学到一些东西。这些只是其中的一些HTML和CSS问题，