前端实习面试常考(定位、文档流)

前端实习面试常考(定位、文档流)

最近在找前端的实习,看了很多面试题,再这里做一个总结分享给大家,希望对大家的实习面试起到一些帮助(本人刚入门不久,如果大家对我的内容有异议,欢迎大家私信,交流一下,共同进步)

对于前端实习面试题这个模块,我大体分为4个部分,HTML&CSS、JavaScript、计算机网络、Vue3(本人框架只学了Vue3)

1、定位

描述
static无定位,left、top、bottom、right不可用
absolute生成绝对定位元素,相对于static定位以外的第一个父元素进行定位,元素位置可控(left、top、bottom、right有效)
fixed相对于浏览器窗口生成绝对定位元素,元素位置可控
relative生成相对定位元素,相对于父级
inherit继承父元素的position值

扩展:在面试官问定位的时候很可能问到文档流的问题

2、文档流

文档流可以分为,普通流和脱离文档流
普通流:也可称为常规流、文档流。是文档中可显示对象在排列时所占的位置
脱离文档流:元素浮动在文档流之上

以上是定义,以下是理解:
所谓文档流,可以理解为是元素的位置,比如,relative定位的元素就处于文档流。此时,通过left、top、bottom、right四个属性可以规定元素的位置,但元素出现在你所规定的位置之后,它原来的位置依旧保留,其他元素不能占用。而用absolute、fixed定位的元素,就脱离了文档流,也就是说,自己规定了元素的位置之后,元素的原位置不保留了,可以理解为元素发生了一个简单地“平移”。注意,浮动元素也会脱离文档流,请看我的另一篇关于浮动布局的文章。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NgRx中dynamic reducer的原理和用法?

在 Angular 应用中,使用 NgRx 状态管理库时,动态 reducer 的概念通常是指在运行时动态添加或移除 reducer。这样的需求可能源于一些特殊的场景,比如按需加载模块时,你可能需要添加相应的 reducer。 以下是动态 reducer 的一般原理…

多级路由component页面不加载

项目基于vue-element-admin 新建SubView.vue <template><router-view /> </template><script setup> </script>在父层添加component {path: /sj,component: Layout,redirect: /sj,name: 三级医院评审标准(2022),meta: {title: 三级医院评审标准(…

发布“最强”AI大模型,股价大涨,吊打GPT4的谷歌股票值得投资吗?

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 谷歌在AI领域的最新进展&#xff0c;引发投资者关注 在谷歌-C(GOOGL)谷歌-A&#xff08;GOOG&#xff09;昨日发布了最新的AI大模型Gemini后&#xff0c;其股价就出现了大幅上涨&#xff0c;更是引发了投资者的密切关注&a…

Docker-compose容器编排与容器监控

一、Docker-compose 1、概念&#xff1a; Docker-Compose 是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 2、作用&#xff1a; Docker-Compose可以管理多个Docker容器组成一个应用。需要定义一个yaml格式的配置文件 docker-compose.yml&#…

CSS逻辑组合伪类

CSS 的逻辑组合伪类有 4 种&#xff0c;分别是&#xff1a;:not()、:is()、:where()和:has()。 否定伪类:not() 否定伪类&#xff0c;是在元素与括号里面的参数不匹配的时候&#xff0c;就会对这个伪类进行匹配。比如&#xff1a;:not(span):{color:red}&#xff0c;这就会匹…

SEO优化是什么,如何进行SEO优化

SEO&#xff08;Search Engine Optimization&#xff09;是指通过对网站进行优化&#xff0c;提高其在搜索引擎中的排名&#xff0c;从而增加有机流量和改善用户体验的一系列技术和方法。 进行SEO优化可以帮助网站获得更多的有机搜索流量&#xff0c;并提升网站的曝光度和可见…

Fiddler抓包模拟器(雷电模拟器)

Fiddler设置 List item 打开fiddler,的options 点击OK,重启fiddler 模拟器 更改网络设置 IP可以在电脑上终端上查看 然后在模拟器浏览器中输入IP:端口 安装证书

ssl什么是公钥和私钥?

公钥&#xff08;Public Key&#xff09;与私钥&#xff08;Private Key&#xff09;是通过加密算法得到的一个密钥对&#xff08;即一个公钥和一个私钥&#xff0c;也就是非对称加密方式&#xff09;。公钥可对会话进行加密、验证数字签名&#xff0c;只有使用对应的私钥才能解…

K8s 入门指南(一):单节点集群环境搭建

前言 官方文档&#xff1a;Kubernetes 文档 | Kubernetes 系统配置 CentOS 7.9&#xff08;2 核 2 G&#xff09; 本文为 k8s 入门指南专栏&#xff0c;将会使用 kubeadm 搭建单节点 k8s 集群&#xff0c;详细讲解环境搭建部署的细节&#xff0c;专栏后面章节会以实战代码介绍…

P1001 A+B Problem题解

对于编程语言语法的学习最好的办法就是在题目中学习&#xff0c;现在来开启我们的学习之旅。 题目 输入两个整数a,b&#xff0c;输出它们的和&#xff08;∣a∣,∣b∣≤109&#xff09;。 输入输出样例 输入 20 30 输出 50 代码 #include<iostream> using names…

点击登录按钮二次才跳转到首页

1.问题描述 点击登录按钮&#xff0c;调取接口,成功后获取数据并跳转到首页&#xff0c;都没有问题&#xff0c;也没有报错&#xff0c;就是点击第一次不跳转&#xff0c;第二次才能跳转&#xff0c;这是代码 this.$message({message: "登陆成功",type: "succ…

Vue3+ts----根据配置项,动态生成表单

这里使用的UI框架是ElementPlus&#xff0c;更换其他组件直接更换constant.ts中的type配置和对应的Form组件即可. 大家可以npm install elementplus_dy_form来体验。 思路&#xff1a; 1.这里需要使用h函数方便控制要渲染的表单 2.传递type作为组件或html元素进行渲染&#xff…

PHP基础 - 输入输出

在 PHP 中,有多种方法可以用来输出内容。下面是其中的几种: 1、echo: 这是最常见的输出语句之一,可以输出一个或多个字符串。它是一个语言结构,可以省略括号。使用示例如下: <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…

虚拟仪器的外部接口设计

虚拟仪器的外部接口设计需要考虑多个因素。以下是一些可能涉及的方面&#xff1a; 接口类型&#xff1a;根据实际需要&#xff0c;选择不同类型的接口。例如&#xff0c;计算机内部插卡式接口有isa接口和pci接口&#xff0c;适用于中小型测试系统。计算机外部通用总线接口有增…

P1035 [NOIP2002 普及组] 级数求和题解

题目 已知&#xff1a;.显然对于任意一个整数 k&#xff0c;当 n 足够大的时候,Sn​>k。 现给出一个整数k&#xff0c;要求计算出一个最小的n&#xff0c;使得Sn​>k。 输入输出样例 输入 1 输出 2 代码 #include<iostream> using namespace std; int mai…

周周爱学习之Redis重点总结

redis重点总结 在正常的业务流程中&#xff0c;用户发送请求&#xff0c;然后到缓存中查询数据。如果缓存中不存在数据的话&#xff0c;就会去数据库查询数据。数据库中有的话&#xff0c;就会更新缓存然后返回数据&#xff0c;数据库中也没有的话就会给用户返回一个空。 1.缓…

AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

leetcode 面试题 02.02. 返回倒数第k个节点

提建议就是&#xff0c;有些题还是有联系的&#xff0c;建议就收看完 876.链表的中间节点&#xff08;http://t.csdnimg.cn/7axLa&#xff09;&#xff0c;再将这一题联系起来 面试题 02.02. 返回倒数第k个节点 题目&#xff1a; 实现一种算法&#xff0c;找出单向链表中倒数第…

这些接口自动化测试工具如果不知道,就真out了!

一、Postman Postman是一款广受欢迎的API测试工具&#xff0c;除了手动发送HTTP请求的基本功能&#xff0c;它还提供了自动化测试和脚本测试的功能&#xff0c;非常适合进行HTTP接口的自动化测试。 二、Rest-Assured Rest-Assured是一个Java库&#xff0c;专为REST服务的测试…

java中守护线程的特点是什么?

Java 中守护线程&#xff08;Daemon Thread&#xff09;的特点如下&#xff1a; 随主线程结束而结束&#xff1a; 守护线程是在后台运行的线程&#xff0c;当所有的用户线程都执行完毕后&#xff0c;即主线程结束&#xff0c;守护线程会随之被终止。它不会阻止 JVM 退出。 不执…