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;包括社交、购物、服务等。 观测云对微信小程序的监控能够实时收集性能指标、错误日志和…

深入理解 C++ 中的 IO 流【iostream篇】

C 中的输入输出流&#xff08;iostream&#xff09;是非常重要的一部分&#xff0c;它们提供了与用户交互以及与文件系统进行数据交换的功能。本文将深入探讨 C 中的 cin 和 cout&#xff0c;介绍它们的使用方法、缓冲区以及常用的成员函数等相关知识。 1. cin 和 cout 的基本…

[蓝桥杯 2019 省 B] 特别数的和

题目描述 小明对数位中含有 22、00、11、99 的数字很感兴趣&#xff08;不包括前导 00&#xff09;&#xff0c;在 11 到 4040 中这样的数包括 11、22、99、1010 至 3232、3939 和 4040&#xff0c;共 2828 个&#xff0c;他们的和是 574574。 请问&#xff0c;在 11 到 &…

分布式系统CAP理论

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

MPIRUN 31280 segmentation fault (core dumped)

用mpirun运行多节点nccl时有时候出现hang死&#xff0c;而且是指定了mpi_host的情况 nccl正常&#xff0c;各节点通信正常&#xff0c;但是一跑mpirun就卡死&#xff0c;core dump。 提前退出&#xff1a; [worker0:38156] *** Process received signal *** [worker0:38156] …

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

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

rt-thread开发之sccb通讯协议记录(用于ov7670)

头文件 /** Copyright (c) 2024-2024&#xff0c;shchl** SPDX-License-Identifier: Apache-2.0** Change Logs:* Date Author Notes* 2024-3-26 shchl first version*/#ifndef F4_OS_SCCB_H #define F4_OS_SCCB_H#include "board.h"#define …

小白学视觉 | 图像上的 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…

npm安装yarn和pnpm

安装yarn&#xff1a; 首先&#xff0c;确保你的系统中已经安装了Node.js和npm。这是使用npm安装yarn的前提条件。打开命令行工具&#xff08;如终端或命令提示符&#xff09;。运行以下命令来全局安装yarn&#xff1a; npm install -g yarn 安装完成后&#xff0c;你可以通过…

聚类分析|基于层次的聚类方法及其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. 基于…

spring boot3登录开发(整合jwt)

Spring Boot 3 整合 JWT&#xff08;JSON Web Tokens&#xff09;用于登录开发涉及多个步骤。JWT 是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑的、自包含的方式&#xff0c;用于作为 JSON 对象在各方之间安全地传输信息。这些信息可以被验证和…

香港驾照好处 大陆驾驶证换香港驾照条件 大陆驾驶证换香港驾照流程

持有香港驾驶证的好处&#xff1a; 1、国际认可&#xff1a;香港驾驶证在国际上被广泛认可&#xff0c;持有该驾驶证可以在许多国家和地区自由驾驶。 2、多样性&#xff1a;香港驾驶证覆盖了多种车辆类型&#xff0c;包括轿车、摩托车、巴士、卡车等&#xff0c;持有该驾驶证…

【vue】computed和watch的区别和应用场景

Computed 和 Watch 是 Vue.js 中用于监视数据变化的两个不同特性&#xff0c;它们各自有不同的应用场景和功能。 Computed&#xff1a; 计算属性&#xff08;Computed properties&#xff09;用于声明基于其他数据属性的计算值。它具有缓存功能&#xff0c;只有在依赖的数…

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.从后面的一…

最长公共子序列力扣题

动态规划。 美团暑期面试题&#xff0c;没做过&#xff0c;不会啊。 这个问题的目标是找出两个字符串text1和text2的最长公共子序列的长度。 动态规划数组的初始化 首先&#xff0c;代码初始化了一个动态规划&#xff08;DP&#xff09;数组dp&#xff0c;其维度为(m 1) x …

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

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