当前位置: 首页 > news >正文

HTML5、CSS3面试题(三)

HTML5、CSS3面试题(二)

rem 适配方法如何计算 HTML 跟字号及适配方案?(必会)

通用方案
1、设置根 font-size:625%(或其它自定的值,但换算规则 1rem 不能小于 12px)
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优:有一定适用性,换算也较为简单
北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 39 页 共 348 页 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 40 页 共 348 页
劣:有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同
手机,单某款手机尺寸不在设置范围之内,会导致无法适配
网易方案
1、拿到设计稿除以 100,得到宽度 rem 值
2、通过给 html 的 style 设置 font-size,把 1 里面得到的宽度 rem 值代入
x document.documentElement.style.fontSize =
document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem
优:通过动态根 font-size 来做适配,基本无兼容性问题,适配较为精准,换算简便
劣:无 viewport 缩放,且针对 iPhone 的 Retina 屏没有做适配,导致对一些手机的适
配不是很到位
手淘方案
1、拿到设计稿除以 10,得到 font-size 基准值
2、引入 flexible
3、不要设置 meta 的 viewport 缩放值
4、设计稿 px/ font-size 基准值,即可换算为 rem
优:通过动态根 font-size、viewpor、dpr 来做适配,无兼容性问题,适配精准。
劣:需要根据设计稿进行基准值换算,在不使用 sublime text 编辑器插件开发时,单
位计算复杂

CSS 中 link 和@import 的区别?(必会)

适用范围不同
@import 可以在网页页面中使用,也可以在 CSS 文件中使用,用来将多
CSS 文件引入到一个 CSS 文件中;而 link 只能将 CSS 文件引入到网页页面中
功能范围不同
link 属于 XHTML 标签,而@import 是 CSS 提供的一种方式,link 标签除
了可以加载 CSS 外,还可以定义 RSS,定义 rel 连接属性等,@import 就只能加载 CSS
加载顺序不同
当一个页面被加载的时候,link 引用的 CSS 会同时被加载,而@import
引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页
面时开始会没有样式(就是闪烁),网速慢的时候还挺明显
兼容性
由于@import 是 css2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5
以上的才能识别,而 link 标签无此问题
控制样式时的差别
使用 link 方式可以让用户切换 CSS 样式.现代浏览器如
Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格),
当然你还可以使用 Javascript 使得 IE 也支持用户更换样式
权重区别 link 引入的样式权重大于@import 引入的样式
22、Display:none 与 visibility:hidden 的区别 ?(必会)
最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后,该元素下的元素都会隐藏,占据的空间消失北京市顺义区京顺路 99
visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置
区别
1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,则子元
素会显示
2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为 transition 可
以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

Position 的值有哪些,分别有哪些作用?(必会)

static:默认值
不脱离文档流,top,right,bottom,left 等属性不生效
绝对定位:absolute
绝对定位的关键是找对参照物,要成为绝对定位元素的参照物必须满足以下两个条件:
1.参照物和绝对定位元素必须是包含与被包含关系;
2.该参照物必须具有定位属性;
如果找不到满足以上两个条件的父包含块,那么相对于浏览器窗口进行定位
注:设置了 position:absolute;属性后,元素会脱离正常文档流,不在占据空间;左右 margin
为 auto 将会失效;我们通过 left、top、bottom、right 来决定元素位置
相对定位:relative
参照物:元素偏移前位置
注:设置了相对定位,左右 margin 为 auto 仍然有效、并且不会脱离文档流。
固定定位:fixed
参照物:浏览器窗口;
注:固定定位会脱离文档流;

当绝对定位和固定定位参照物都是浏览器窗口时的区别: 当出现滚动条时,固定定位的元 素不会跟随滚动条滚动,绝对定位会跟随滚动条滚动 为什么会出现浮动?浮动元素会引起什么问题?如何清除浮动?(必会)

浮动定位将元素排除在普通流之外,即元素讲脱离文档流,不占据空间。浮动元素碰到包
含它的边框或者浮动元素的边框停留
为什么需要清除浮动
1、父元素的高度无法被撑开,影响与父元素同级的元素;
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后; 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 42 页 共 348 页
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解
决方法
清除浮动的方式
1、使用 CSS 中的 clear:both;(放一个空的 div,并设置上述 css),属性来清除元素的浮动
可解决 2、3 问题
2、对于问题 1,添加如下样式,给父元素添加 clearfix 样
式:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl
earfix{display: inline-block;} /* for IE/Mac */
3、给父级元素设置双伪元素
HTML5、CSS3面试题(四)-CSDN博客

相关文章:

HTML5、CSS3面试题(三)

HTML5、CSS3面试题(二) rem 适配方法如何计算 HTML 跟字号及适配方案?(必会) 通用方案 1、设置根 font-size:625%(或其它自定的值,但换算规则 1rem 不能小于 12px) 2…...

pytorch之诗词生成6--eval

先上代码: import tensorflow as tf from dataset import tokenizer import settings import utils# 加载训练好的模型 model tf.keras.models.load_model(r"E:\best_model.h5") # 随机生成一首诗 print(utils.generate_random_poetry(tokenizer, model)…...

Django自定义中间件

自定义中间件 传统方法的的五大钩子函数:(需要调用MiddlewareMixin类) process_request,请求刚到来,执行视图之前;正序 process_view,路由转发到视图,执行视图之前;正序…...

【JavaScript】JavaScript 运算符 ① ( 运算符分类 | 算术运算符 | 浮点数 的 算术运算 精度问题 )

文章目录 一、JavaScript 运算符1、运算符分类2、算术运算符3、浮点数 的 算术运算 精度问题 一、JavaScript 运算符 1、运算符分类 在 JavaScript 中 , 运算符 又称为 " 操作符 " , 可以实现 赋值 , 比较 > < , 算术运算 -*/ 等功能 , 运算符功能主要分为以下…...

掘根宝典之C++迭代器简介

简介 迭代器是一种用于遍历容器元素的对象。它提供了一种统一的访问方式&#xff0c;使程序员可以对容器中的元素进行逐个访问和操作&#xff0c;而不需要了解容器的内部实现细节。 C标准库里每个容器都定义了迭代器 迭代器的作用类似于指针&#xff0c;可以指向容器中的某个…...

DP-力扣 120.三角形最小路径和

给定一个三角形&#xff0c;找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点&#xff1a; 下标与上一层结点下标相同或者等于上一层结点下标 1 的两个结点。样例&#xff1a; 例如&#xff0c;给定三角形&#xff1a; [ [2], [3,4], [6,5,7], [4…...

【WEEK3】学习目标及总结【SpringMVC】【中文版】

学习目标&#xff1a; 三周完成SpringMVC入门——第三周 感觉这周很难完成任务了&#xff0c;大概率还会有第四周 学习内容&#xff1a; 参考视频教程【狂神说Java】SpringMVC最新教程IDEA版通俗易懂数据处理JSON交互处理 学习时间及产出&#xff1a; 第三周 MON~FRI 2024.…...

peft模型微调--Prompt Tuning

模型微调&#xff08;Model Fine-Tuning&#xff09;是指在预训练模型的基础上&#xff0c;针对特定任务进行进一步的训练以优化模型性能的过程。预训练模型通常是在大规模数据集上通过无监督或自监督学习方法预先训练好的&#xff0c;具有捕捉语言或数据特征的强大能力。 PEF…...

【算法训练营】周测1

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 如果需要答案代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢迎私信博主&#xff0c;大家可以相互讨论交流哟~~ 考题11-1 题目描述 有一个初始时为空的序列&#xff0c;你的任务是维护这个…...

PyTorch Dataset、DataLoader长度

pytorch 可以直接对 Dataset 对象用 len() 求数据集大小&#xff0c;而 DataLoader 对象也可以用 len()&#xff0c;不过求得的是用这个 loader 在一个 epoch 能有几多 iteration&#xff0c;容易混淆。本文记录几种情况的对比。 from torch.utils.data import Dataset, DataL…...

动态IP和静态IP

与静态 IP 地址不同&#xff0c;动态 IP 地址会定期更改。让我们来分析一下&#xff1a; 1. IP 地址基础知识&#xff1a; * IP 地址是一个数字标签&#xff0c;用于唯一标识网络上的每个设备。 * 当设备通过网络通信时&#xff0c;数据会在它们之间来回传输。每个数据包都标有…...

中电金信:技术实践|Flink维度表关联方案解析

导语&#xff1a;Flink是一个对有界和无界数据流进行状态计算的分布式处理引擎和框架&#xff0c;主要用来处理流式数据。它既可以处理有界的批量数据集&#xff0c;也可以处理无界的实时流数据&#xff0c;为批处理和流处理提供了统一编程模型。 维度表可以看作是用户来分析数…...

HQL 55 题【持续更新】

前言 今天开始为期一个多月的 HQL 练习&#xff0c;共 55 道 HQL 题&#xff0c;大概每天两道&#xff0c;从初级函数到中级函数。这次的练习不再是基础的 join 那种通用 SQL 语法了&#xff0c;而是引入了更多 Hive 的函数&#xff08;单行函数、窗口函数等&#xff09;。 我…...

lqb省赛日志[8/37]-[搜索·DFS·BFS]

一只小蒟蒻备考蓝桥杯的日志 文章目录 笔记DFS记忆化搜索 刷题心得小结 笔记 DFS 参考 深度优先搜索(DFS) 总结(算法剪枝优化总结) DFS的模板框架: function dfs(当前状态){if(当前状态 目的状态){}for(寻找新状态){if(状态合法){vis[访问该点]&#xff1b;dfs(新状态);?…...

uni app 钓鱼小游戏

最近姑娘喜欢玩那个餐厅游戏里的钓鱼 &#xff0c;经常让看广告&#xff0c;然后就点点点... 自己写个吧。小鱼的图片自己搞。 有问题自己改&#xff0c;不要私信我 <template><view class"page_main"><view class"top_linear"><v…...

openssl3.2 - note - Decoders and Encoders with OpenSSL

文章目录 openssl3.2 - note - Decoders and Encoders with OpenSSL概述笔记编码器/解码器的调用链OSSL_STORE 编码器/解码器的名称和属性OSSL_FUNC_decoder_freectx_fnOSSL_FUNC_encoder_encode_fn官方文档END openssl3.2 - note - Decoders and Encoders with OpenSSL 概述 …...

分享几个 Selenium 自动化常用操作

最近工作会用到selenium来自动化操作一些重复的工作&#xff0c;那么在用selenium写代码的过程中&#xff0c;又顺手整理了一些常用的操作&#xff0c;分享给大家。 常用元素定位方法 虽然有关selenium定位元素的方法有很多种&#xff0c;但是对于没有深入学习&#xff0c;尤…...

【Python】【数据类型】List (列表) 的常见操作

1. 创建 使用内置函数list()将字符串创建为列表 list1 [a, b, c, d] print(list1 , list1) # list1 [a, b, c, d] list1 list(abcd) print(list1) # [a, b, c, d]使用列表推导式创建列表 list1 [x for x in range(1, 10)] print(list1) # [1, 2, 3, 4, 5, 6, 7, 8, 9]多…...

【C语言】病人信息管理系统

本设计实现了一个病人信息管理系统,通过链表数据结构来存储和操作病人的信息。用户可以通过菜单选择录入病人信息、查找病人信息、修改病人信息、删除病人信息、查看所有病人信息和查看专家信息等操作,还可以根据病人的科室、姓名、性别和联系方式进行查找,以及支持修改病人…...

Java Spring Boot 接收时间格式的参数

报错 JSON parse error: Cannot deserialize value of type java.time.LocalDateTime from String “2024-03-14 12:30:00”: Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text ‘2024-03-14 12:30:00’ could not be parsed a…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...