前端面试题 6

最新推荐文章于 2023-08-14 17:09:28 发布

冷色系微风爱丶

最新推荐文章于 2023-08-14 17:09:28 发布

阅读量235

点赞数 2

分类专栏：前端面试题

本文链接：https://blog.csdn.net/czy279470138/article/details/105716050

版权

前端面试题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文列举了前端面试中常见的问题，包括CSS垂直居中、Flex布局、浏览器内核、URL到页面展示的过程、link与@import的区别、HTML的href与src、HTML、CSS、JavaScript的作用、a标签的用法、ID的唯一性、HTML基本结构以及display:none与visibility:hidden的差异。通过对这些知识点的讲解，帮助读者深入理解前端开发的核心概念。

摘要由CSDN通过智能技术生成

1. css 实现垂直居中

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

一般采用flex布局来实现元素居中，其他方法有 margin: 0 auto; 定位

2. flex布局

任意一个容器都可以使用flex 布局， Webkit 内核的浏览器需要添加-webkit 前缀，将容易设置为flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction 属性决定主轴的方向。
flex-wrap 属性决定是否换行。
flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在交叉轴上如何对齐。
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.

等其他一些属性详细查看链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

3. 浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

4.从输入URL到页面展示的详细过程
   1、输入网址
   2、DNS解析
   3、建立tcp连接
   4、客户端发送HTPP请求
   5、服务器处理请求　
   6、服务器响应请求
   7、浏览器展示HTML
   8、浏览器发送请求获取其他在HTML中的资源。

5. 页面导入样式时，使用link和@import 有什么区别
link属于XHTML标签，而@import 时css提供的
页面加载时，link会同时被加载，而@import引用的css会等到页面被加载完成在加载
@import只在IE5以上才能识别，而link时XHTML标签，无兼容问题
link方式的样式权重高于@import的权重

6.HTML中href和src的区别
1. href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
2. src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

7. HTML、CSS、JavaScript 在Web前端开发中的作用
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。（css3 也可以实现动画效果）

8.a标签
a标签可以定义超链接，就是页面跳转，也可以实现锚点打电话发邮件等其他作用。
写#会跳到页面顶端，而用 href="JavaScript:void(0);" 不会触发任何行为

9. id 唯一
ID唯一只是推荐的规范做法。并没有说一定不行。
但这也不意味着就可以随便用，因为在一些需要根据ID取值的情况下,如document.getElementById，存在多个相同ID的话，就不会象你在CSS中这样幸运。
所以为了避免这种在一些情况下出错，一些情况下又没问题的状况，如果你不是非常了解的话，就最好都按照规范去写，所有的规范必有其道理和长期广泛的经验结果。

10. html 基本结构

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML 页面</title>
</head>
<body>
</body>
</html>

body 中的内容可以用 header main footer 标签来布局

11. 利用flex布局实现自适应布局，如果知道高度，也可以利用calc() 计算属性来实现布局

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自适应布局</title>
   <style>
      body, html{
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
      }
      body{
         display: flex;
         flex-direction: column;
      }
      .flex{
         display: flex;
         justify-content: center;
         align-items: center;
      }
      header, footer{
         width: 100%;
         height: 80px;
         flex: 0 0 auto;
         background: #000;
         color: #fff;
      }
      main{
         flex: 1 0 auto;
      }
   </style>
</head>
<body>
<header class="flex">header</header>
<main class="flex">main</main>
<footer class="flex">footer</footer>
</body>
</html>

12. html中的标签属性可以随便定义吗？

可以，但是需要考虑兼容问题

13. display:none 和 visibility:hidden 的区别

display:none 隐藏对应的元素在文档中消失。
visibility:hidden 隐藏对应的元素，但是在文档中的位置没有消失，并且它具有继承性，如果给子元素设置visibility:visible,则子元素会显现出来，与display:none 有、着质的区别