记恒天软件前端面试题

心潮的滴滴

已于 2024-04-29 08:39:48 修改

阅读量595

点赞数 27

文章标签：前端面试

于 2024-04-28 23:08:46 首次发布

本文链接：https://blog.csdn.net/qq_42582773/article/details/138291765

版权

1、HTML5有哪些新特性？

十大新特性： https://blog.csdn.net/weixin_45709829/article/details/115433620

标签语义化。比如：header、nav、section、aside、artical、footer。
增强型表单。
视频和音频标签。video、audio。
canvas绘图。
SVG绘图。
地理位置API。
拖拽API。
Web Worker。为js创建多线程环境。js在主线程执行，new一个子线程在后台运行。worker完成计算的任务返回给主线程，UI交互流畅，不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰。独立执行。
Web Storage。
- localStorage
- sessionStorage
Web Socket。

2、div居中有哪几种方式？

八种。https://blog.csdn.net/qq_41425194/article/details/124401426

table布局

<!-- 第一种 -->
<div class="father1">
     <div class="son1">块级元素</div>
 </div>

.father1 {
   display: table;
    width: 500px;
    height: 200px;
    border: 1px solid red;
}
.son1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

flex布局

!-- 第二种 -->
<div class="father2">
    <div class="son2">块级元素</div>
</div>

.father2 {
   width: 500px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.son2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

使用绝对定位（left:50%;top:50%;transform:translate(-50%,-50%)）

<!-- 第三种 -->
<div class="father3">
     <div class="son3">块级元素</div>
 </div>

.father3 {
  width: 500px;
   height: 200px;
   border: 1px solid red;
   position: relative;
}
.son3 {
   width: 100px;
   height: 100px;
   border: 1px solid red;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
}

还是使用绝对定位（left:50%;top:50%; margin-left:-【自身宽度的一半】;margin-top:-【自身高度的一半】）

<!-- 第四种 -->
<div class="father4">
    <div class="son4">块级元素</div>
</div>

.father4 {
   width: 500px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.son4 {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

还是绝对定位。(left:0;right:0;top:0;bottom:0;margin:auto)

<!-- 第五种 -->
<div class="father5">
    <div class="son5">块级元素</div>
</div>

.father5 {
   width: 500px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.son5 {
    width: 200px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

固定定位（相对于视口居中）

 <!-- 第六种 -->
<div class="son6">块级元素</div>

 .son6 {
  width: 100px;
   height: 100px;
   border: 1px solid gold;
   text-align: center;
   line-height: 100px;
   position: fixed;
   top: 50%;
   left: 50%;
   /* transform: translate(-50%, -50%);*/
   margin-top: -50px;
   margin-left: -50px;
}

Flex布局+margin:auto

 <div class="father7">
   <div class="son7">块级元素</div>
</div>

.father7 {
    width: 500px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
.son7 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
    margin: auto;
}

grid布局+justify-items:center;align-items:center（place-items:center）

<!-- 第八种 -->
<div class="father8">
    <div class="son8">块级元素</div>
</div>

.father8 {
    width: 500px;
    height: 200px;
    border: 1px solid red;
    display: grid;
    /* justify-items: center;
    align-items: center; */
    place-items: center;
}
.son8 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
}

3、vue路由模式有哪几种？

Hash模式和History模式。https://www.quanxiaoha.com/vue3/vue3-router-mode.html

4、CSS选择器及其权重?

主要分为5类，包括基本选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器。https://juejin.cn/post/7067791288443076622

基本选择器
- 通配选择器 *
- 标签选择器
- id选择器 #
- 类选择器 .
组合选择器
- 后代选择器空格
- 子选择器 >
- 兄弟选择器 ~
- 相邻选择器 +
- 分组选择器 , 选择符合条件的多个元素
属性选择器。例如： [attr = “val”] {…}
伪类选择器
- 动态伪类选择器。E:link、E:visited、E:hover、E:active、E:focus
- 目标伪类。E:target

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:target {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

在这里插入图片描述

否定伪类。:not()
- 语言伪类。 E:lang(language)表示，匹配使用了某种语言的元素

<div lang="zh" id="div1">div1</div>

div:lang(zh) {
    color: red;
}

在这里插入图片描述

UI元素伪类。
- E:enabled 启用状态
- E:disabled 禁用状态
- E:checked 选择状态
- E:default 默认被选择状态
- E:read-write 可读写状态
- E:read-only 只读状态
结构伪类。 :root、E:empty、E:required、E:optional、E:fist-child、E:last-child、E:only-child、E:nth-child(n)、E:nth-last-child(n)、E:first-of-type、E:last-of-type、E:only-of-type、E:only-of-type、E:nth-of-type(n)、E:nth-last-of-type(n)
伪元素选择器
- E::before
- E::after
- E::first-letter 设置元素内的第一个字符的样式
- E::first-line 设置元素内的第一行的样式
- E::placeholder 设置元素文字占位符的样式
- E::selection 设置元素被选择时的字体颜色和背景颜色
- E::marker 填充标记内容

权重计算

只有在css冲突的时候才会用到样式权重的计算，权重大的会覆盖权重小的样式。当权重值一样的时候，后面的样式会覆盖前面的样式。

!important 会覆盖页面内任何位置的元素样式
内联样式，即写在标签里面的style样式，权重值为1000
id选择器，权重值为100
类选择器、伪类选择器、属性选择器，权重值为10
标签选择器、伪元素选择器，权重值为1
组合选择器、通配符选择，权重值为0。

注意：权重值不能进位

心潮的滴滴

关注

27
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
记恒天软件前端面试题

root、E:empty、E:required、E:optional、E:fist-child、E:last-child、E:only-child、E:nth-child(n)、E:nth-last-child(n)、E:first-of-type、E:last-of-type、E:only-of-type、E:only-of-type、E:nth-of-type(n)、E:nth-last-of-type(n)只有在css冲突的时候才会用到样式权重的计算，权重大的会覆盖权重小的样式。
复制链接

扫一扫