前端工程师面试问题合集

最新推荐文章于 2024-07-19 12:58:53 发布

是阿丹啊

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量827

点赞数 18

文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/qq_61214252/article/details/135850754

版权

本文概述了CSS的基本选择器，如通用选择器、ID选择器、类选择器等，并介绍了如何用CSS画三角形、垂直居中以及响应式设计。同时涉及JavaScript的数据类型、数组操作、Vue框架的双向绑定、版本差异等内容。

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

一、HTML、CSS

1、简要说说CSS选择器

答：CSS选择器有10个，包括通用选择器、标签选择器、id选择器、类选择器、伪类选择器、兄弟选择器、相邻兄弟选择器、后代选择器、直接子代选择器、群组选择器。

标签选择器：

选中某类特定的HTML元素，注意标签名不加尖括号。

div{background-color: yellow;}

ID选择器#

选中唯一一个指定的元素，要先在标签中加入id属性，再在CSS中选中。推荐少用，id常用于JS。注意：ID值与#号之间不允许有空格！

#d2{color:red;}

<p id="d2"></p>

类选择器.

注意：使用选择器时点(.)与class值之间不能有空格！

.text-danger{color:white; bakground-color:red;}

<span class="text-danger">密码不能为空</span>

伪类选择器:

:hover{ } 选中”鼠标悬停在元素上方时”的状态

:active{ } 选中”元素被激活时”的状态(鼠标按住元素不松开)

:link{ } 选中”超链接未被访问过”的状态

:visited{ } 选中”超链接已经被访问过”的状态

注意：超链接的4个伪类有顺序： :link -> :visited -> :hover -> :active

如果没有按照这个顺序，有的伪类会不生效

:focus{ } 选中”输入框获得焦点时”的状态

兄弟选择器~

选中元素后面的兄弟元素

p~span{} 选中p元素后面的span兄弟元素

相邻兄弟选择器 +

选中元素后面紧挨着的相邻兄弟元素，最多选中1个

p+span { } 选中p元素后面紧挨着的那一个span兄弟元素

后代(包含)选择器

选中某个元素内的所要选择的所有元素。注意：中间有空格，必须写。

div span { } 选中div下的所有span

直接子代选择器 >

选中元素下面的直接儿子元素

div > span { } 选中div下的所有儿子span

群组选择器

使用本选择器可以一次选中多个不同的元素，使用逗号分隔，可以有空格.

h4, #p, .text-danger{color: red;}

2、用CSS画一个三角形

答：一、使用border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div{
			border-top: 50px solid transparent;
			border-bottom: 50px solid green;
			border-left: 100px solid transparent;
			border-right: 100px solid cyan;
		}
	</style>
	<body>
	</body>
</html>

效果如下：

二、使用clip-path

clip-path: circle(40px at 40px 50px) 定义一个圆形（使用一个半径和一个圆心位置）。

clip-path: polygon(0 100%,50% 50%,100% 100%); 定义一个多边形，写上坐标（top/bottom left/right）填充

div{
           width: 80px;
           height: 100px;
           background-color: aqua;
           clip-path: polygon(0 100%,50% 50%,100% 100%);
       }

效果如下：