web前端面试题---->HTML、CSS

一.居中方法

block元素如何居中

  1. margin:0 auto;
  2. position: absolute;       top: 50%;      left: 50%;        transform: translate(-50%, -50%);
  3. flex布局:

对父元素操作  :     justify-content:center;                   align-items:center;

grid布局:

对父元素操作:place-items:center

inline元素如何居中

text-align:enter;

样式权重:

!important>行内样式>内部样式(id>class(类选择器)>标签选择器的样式)>外部样式

CSS定位属性包括以下几种:

1.静态定位 (position: static):这是元素的默认定位方式,元素会按照标准流在页面中显示,不能进行方位上的移动。

2.相对定位 (position: relative):元素相对于自己原来的位置进行移动,原来的位置依旧占有,也就是没有脱离标准流。

3.绝对定位 (position: absolute):元素相对于非静态定位的父元素进行定位,不占原来的位置(脱离标准流)。如果父元素没有定位就寻找祖父元素;如果祖父元素都没有定位,那就相对浏览器进行移动。

4.固定定位 (position: fixed):元素只相对于浏览器进行定位移动,在页面中不占位置(已经脱标)。

ES6相比于ES5的优势包括:

1. 块级作用域和常量声明:引入了let和const关键字,用于声明块级作用域的变量和常量。

2. 箭头函数:提供了一种更简洁的函数定义语法,可以更方便地编写匿名函数和处理this指向的问题。

3. 类和模块:引入了class关键字和模块化语法,使得面向对象编程更加简洁和易用。

4. 解构赋值:可以从数组或对象中提取值,并赋给变量或常量。

5. 默认参数和剩余参数:函数可以设置默认参数值,以及接收任意数量的参数。

6. 模板字符串:使用反引号(``)包裹字符串,可以在其中使用变量和表达式,并支持多行字符串。

7. 增强的对象字面量:对象字面量可以直接定义方法和计算属性名。

8. Promise:提供了一种更优雅的处理异

HTML5移除了哪些新元素:

big、center、font

doctype的作用

HTML 5 不基于 SGML,需要doctype 来规范浏览器的行为

DOCTYPE标签是一种标准通用标记语言的文档类型声明

HTML5的新特性:

1.语义化标签:HTML5引入了一系列的语义化标签,如<header>、<footer>、<article>、<nav>等,使得网页结构更加清晰和易于理解。

2.Canvas绘图​:HTML5的<canvas>元素可以用来绘制图形、动画和游戏等交互式内容。

CSS3的新特性:

边框和阴影效果:CSS3引入了一系列的新的边框样式和阴影效果,如圆角边框、阴影效果、边框图片等,使得网页设计更加美观和多样化。

过渡和动画:CSS3允许通过过渡和动画效果来实现元素的平滑过渡和动态效果,如淡入淡出、旋转、缩放等。

块级元素

div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer

行内元素

span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block

长度单位

1vw等于视窗宽度的1%

1vh等于视窗高度的1%

vw,vh设定的大小只和视窗大小有关

vm 相对于视口的宽度或高度中较小的那个

rem相对于根元素html(网页)的font-size

em参考物是父元素的font-size

图片title属性和alt属性有什么不同:

1.title属性用于提供图像的附加信息,通常以工具提示(tooltip)的形式在鼠标悬停时显示。

2.alt属性用于为图像提供替代文本。

标签的作用主要有以下几个方面:

1.提供页面的元数据信息,如关键词、描述等,有助于搜索引擎了解页面的内容和意图。

2.控制页面在不同设备上的显示方式,提供更好的用户体验。

3.设置页面的字符编码,确保页面的内容正确显示。

4.控制浏览器的行为,如页面的缓存方式、刷新页面等。

父元素塌陷问题

父元素塌陷问题是指当子元素使用浮动或绝对定位时,父元素的高度无法自动适应子元素的高度,导致父元素的高度塌陷或坍塌。

在父元素的样式中添加overflow: hidden;属性,可以触发BFC(块级格式化上下文),使父元素包含浮动的子元素

伪类和伪元素:

伪类:

概念:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。

0

0

伪元素:

概念:创建一些不在文档树中的元素,并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。)

0

注:CSS3 规范中有一部分要求,为了区分伪类和伪元素,伪元素使用两个冒号 (::), 伪类使用一个冒号 (:)

CSS计算属性

0

0

清除浮动的方法有以下几种:

0

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

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

相关文章

商城小程序项目实现监控的可观测性最佳实践

前言 微信小程序是一种轻量级的应用程序&#xff0c;用户可以在微信内直接使用&#xff0c;无需下载安装。它具有独立的开发框架和生态系统&#xff0c;支持丰富的功能和交互&#xff0c;包括社交、购物、服务等。 观测云对微信小程序的监控能够实时收集性能指标、错误日志和…

分布式系统CAP理论

1、什么是CAP理论 C是Consistency(强一致性)、A是Availability(可用性)、P是Partition Tolerance(分区容错性)&#xff0c;一个分布式系统不可能同时很好的满足—致性、可用性和分区容错性这三个需求&#xff0c;不能同时成立&#xff0c;最多只能同时满足其中的两项&#xff…

Linux系统运维命令:找出某个分区或者路径下 占用磁盘空间最多的文件和目录

目录 一、需求 二、解决方法 1、解决思路 2、组合命令 3、du命令 三、实例演示和命令解释 1、实例演示 &#xff08;1&#xff09;查看当前路径下文件和目录 &#xff08;2&#xff09;命令效果展示 2、命令解释 &#xff08;1&#xff09;. du -cks &#xff08;2…

小白学视觉 | 图像上的 OpenCV 算术运算

本文来源公众号“小白学视觉”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;图像上的 OpenCV 算术运算 1 OpenCV 简介 图像可以进行算术运算&#xff0c;例如加法、减法和按位运算&#xff08;AND、OR、NOT、XOR&#xff09;。…

电商系列之仓储发货

疫情3年&#xff0c;大多数人都将购买需求转移到了线上。同时由于暴涨的订单数量、还在恢复中的物流运输等因素&#xff0c;导致用户的收货时间缓慢甚至是发货时间、收货时间延后。那么笔者就从订单的仓库作业流程入手&#xff0c;分析了用户订单发货延后的原因。 受到最近疫情…

简历工具推荐

HR浏览一份简历也就25秒左右&#xff0c;如果你连「好简历」都没有&#xff0c;怎么能找到好工作呢&#xff1f; 以最简单的方式来写好简历&#xff0c;只需专注内容本身而无需关注排版。这样的效果才是我们想要的&#xff0c;这里推荐使用入职啦简历&#xff0c;这个工具最大的…

RuoYi-Vue-Plus(sa-token)

一、介绍 官网&#xff1a; Sa-Tokenhttps://sa-token.cc/index.html 特性&#xff1a; 登录与权限认证&#xff1a;支持用户登录和细粒度权限认证。会话管理&#xff1a;提供会话创建、维护和销毁功能。单点登录&#xff1a;支持单点登录&#xff0c;简化多应用登录流程。OAu…

聚类分析|基于层次的聚类方法及其Python实现

聚类分析|基于层次的聚类方法及其Python实现 0. 基于层次的聚类方法1. 簇间距离度量方法1.1 最小距离1.2 最大距离1.3 平均距离1.4 中心法1.5 离差平方和 2. 基于层次的聚类算法2.1 凝聚&#xff08;Agglomerative&#xff09;2.3 分裂&#xff08;Divisive&#xff09; 3. 基于…

GAMES Webinar 288-VR/AR专题-陆峰-混合现实中的多模态自然人机交互

感知交互增强智能 研究室虚拟现实技术与系统国家重点实验室&#xff0c;北京航空航天大学计算医学研究所&#xff0c;大数据精准医疗北京市高精尖创新中心 Perception & Hybrid Interaction (PHI) for Augmented & Affective Intelligence (A2I) We are working on v…

力扣56. 合并区间

Problem: 56. 合并区间 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.将数组按内部的一维数组的第一项按从小到大的顺序排序&#xff1b; 2.创建二维结果数组merged&#xff0c;并将排序后的数组中的第一个一维度数组存入到merged中&#xff1b; 3.从后面的一…

九泰智库 | 医械周刊- Vol.17

⚖️ 法规动态 器审中心公示新一期医疗器械优先审批申请审核结果 3月22日&#xff0c;依据原国家食品药品监督管理总局《医疗器械优先审批程序》&#xff08;总局公告2016年168号&#xff09;&#xff0c;器审中心对申请优先审批的医疗器械注册申请进行了审核&#xff0c;对相关…

elasticsearch _cat/indices docs.count is different than <index>/_count

今天遇到一个问题&#xff0c;kibana中看到文档数与下面语句查询到的不同 GET /_cat/count/jiankunking_xxxxx_product_expand_test?v GET /jiankunking_xxxxx_product_expand_test/_search?track_total_hitstrue语句查询结果 epoch timestamp count 1711433785 06:16…

详解从ERP传到MES系统的数据

1、物料需求计划 MES系统提供的物料需求计划与传统BOM-MRP方式提供的物料需求计划有本质的不同。首先&#xff0c;满足产能约束、各种生产约束、优化生产调度、提高工作效率的要求。其次&#xff1a;它有详细的以分钟为单位的时间信息。将这些数据提供给ERP&#xff0c;可以大…

是德科技KEYSIGHT N9938A频谱分析仪

181/2461/8938产品概述&#xff1a; N9938A 是一款使用电池供电的便携式微波频谱分析仪&#xff1b;配置还包括全频段跟踪发生器和前置放大器、干扰分析仪、时间选通、VSWR 和反射测量、内置功率计。 N9938A FieldFox 手持式微波频谱分析仪 主要特性和功能 频率范围&#xff…

美团面试一面凉经

1.自我介绍 2.科研项目提问 没咋准备&#xff0c;说的有点没逻辑 3.问论坛项目 为什么用Redis实现登录&#xff1f;能不能用其他方式实现&#xff1f; 1、Redis 具备高性能 假如用户第一次访问 MySQL 中的某些数据。这个过程会比较慢&#xff0c;因为是从硬盘上读取的。将…

000_coolprop_in_matlab在Matlab中使用CoolProp

在Matlab中使用CoolProp 简介 CoolProp是一个开源的热力学性质库&#xff0c;可以计算多种流体的热力学性质。CoolProp支持多种编程语言&#xff0c;包括Python、C、Matlab等。本文将介绍如何在Matlab中使用CoolProp。 CoolProp官网 本文所使用的Matlab版本为R2021a。 在Ma…

C++基础--类和对象(上)--类与类成员及其成员函数

C基础--类和对象&#xff08;上&#xff09;--类与类成员及其成员函数 一、类的引入二、类的定义三、类的访问限定符及封装1、访问限定符2、封装 四、类的作用域五、类的实例化六、类的对象大小的计算七、类成员函数的 this 指针1、this指针的引出2、this指针的特性 八、总结 一…

Vit Transformer

一 VitTransformer 介绍 vit : An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale 论文是基于Attention Is All You Need&#xff0c;由于图像数据和词数据数据格式不一样&#xff0c;经典的transformer不能处理图像数据&#xff0c;在视觉领域的应…

4、事件修饰符、过滤器、自定义指令、生命周期

一、事件修饰符 按键别名enter 回车 delete 删除键 esc取消键 space 空格键 <script> export default {name: "KeyUp",methods:{keyUp(e){ console.log(e) }},skip(){window.location.href "http:www.xx.com"} } </script> <template>…

鸿蒙应用开发-录音保存并播放音频

功能介绍&#xff1a; 录音并保存为m4a格式的音频&#xff0c;然后播放该音频&#xff0c;参考文档使用AVRecorder开发音频录制功能(ArkTS)&#xff0c;更详细接口信息请查看接口文档&#xff1a;ohos.multimedia.media (媒体服务)。 知识点&#xff1a; 熟悉使用AVRecorder…