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

21.[前端开发]Day21-HTML5新增内容-CSS函数-BFC-媒体查询

news 文章来源：https://blog.csdn.net/m0_55135449/article/details/145512947 2025/5/25 11:41:28

王者荣耀-网页缩小的问题处理

为什么会产生这个问题？怎么去解决

可以给body设置最小宽度

1 HTML5新增元素

HTML5语义化元素

HTML5其他新增元素

2 Video、Audio元素

HTML5新增元素 - video

video支持的视频格式

video的兼容性写法

HTML5新增元素 - audio

audio支持的音频格式

3 input、全局属性data - *

input元素的扩展内容

按住ctrl可以多选：苹果，香蕉，句子。。。

初学者学习不推荐直接用CSS的官方文档：因为术语很专业，划分很仔细。

那么什么时候使用W3C的文档呢？当你觉得MDN文档说的不对，或者其他地方说的不好。。

新增全局属性 data-*

4 white-space/text-overflow

CSS属性 - white-space

CSS属性 - text-overflow


5 理解浏览器前缀

浏览器前缀


6 CSS常见的函数扩展

CSS中的函数

CSS函数 - var

CSS函数 -calc

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 100px;background-color: orange;}.item {height: 50px;display: inline-block;}.item1 {/* width的百分比相对于包含块(父元素) */width: calc(100% - 100px);background-color: #f00;}.item2 {width: 100px;background-color: #0f0;}</style>
</head>
<body><div class="box"><div class="item item1"></div><div class="item item2"></div></div></body>
</html>

CSS函数 - blur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* img {filter: blur(5px);} */.box {display: inline-block;position: relative;/* filter: blur(5px); */}.cover {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(255,255,255,0.2);backdrop-filter: blur(10px);}</style>
</head>
<body><!-- filter --><!-- <img src="../images/kobe01.jpg" alt=""> --><div class="box"><img src="../images/kobe01.jpg" alt=""><div class="cover"></div></div></body>
</html>

CSS函数 – gradient

linear-gradient的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 100px;/* background-color: orange; *//* background-image: linear-gradient(red, blue); *//* 改变方向 *//* background-image: linear-gradient(to right, red, blue); *//* background-image: linear-gradient(to right top, red, blue); *//* background-image: linear-gradient(-45deg, red, blue); *//* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); *//* radial-gradient *//* background-image: radial-gradient(red, blue); */background-image: radial-gradient(at 0% 50%, red, blue);}</style>
</head>
<body><div class="box"></div></body>
</html>


7 深入理解BFC

FC – Formatting Context

BFC – Block Formatting Context

BFC有什么作用呢？

BFC的作用一：解决折叠问题（权威）

BFC的作用二：解决浮动高度塌陷（权威）

媒体查询

 方式一：当屏幕宽度小于等于 800 像素时，将 ./css/body_bgc.css 样式表中的样式应用到当前页面

方式二：

1.

2.

媒体查询 - 媒体类型（Media types）

媒体查询 – 媒体特性（Media features）

媒体查询 – 逻辑操作符（logical operators）

常见的移动端设备

Day21 练习

一. 完成所有的代码练习

二. 说说你对BFC的理解（面试题）

  • block format context(块级格式化上下文)

    • 是页面的一块渲染区域 并且有一套渲染规则,决定了子元素如何定位 以及与其他元素之间的排列 布局之间的关系

    • BFC是一个独立的布局环境 相当于是一个容器 在其中按照一定的规则对块级元素进行摆放 ,并且不会影响其他的布局环境中的盒子,如果一个元素触发BFC则BFC中的元素布局不受外界的影响

  • 块级元素在标准流中的布局是属于BFC的

  • 创建BFC的条件:

    • 根元素: body/:root

    • float left/right

    • position absolute/fixed

    • overflow: 除visible

    • display: inline-block/table-cell/table-caption ,flex/grid...

  • 特点

    • 垂直方向 自上而下排布

    • 垂直方向的间距由margin决定

    • 同一个BFC中 盒子之间的margin会折叠

    • BFC中 每个元素的左边缘紧挨着包含快的左边缘

    • 计算 BFC 的高度时，需要计算浮动元素的高度

    • BFC内部不会影响外部元素

    • BFC区域不会与浮动的元素发生重叠

  • 作用

    • 解决margin折叠的问题

    • 解决高度塌陷的问题

      • 前提 :浮动的父级BFC高度为auto

    • 创建两栏布局

      • 左边浮动 右边overflow:hidden

三. 整理<王者荣耀>用到的CSS知识点

  • 定位: absolute relative fixed

    • 定位实现左右或者垂直居中

    • 给盒子一个高度或宽度 l0r0/t0b0 设置margin在对应方向的auto

    • 对z-index的设置决定部分定位元素的层叠

  • flex布局

    • 运用justify-content align-items来决定axis与cross axis上的元素的位置

    • 以及让单个 flex item 不拉伸 设置flex-shrink的值 单纯设置 flex-grow避免flex-basis的影响

  • 动画以及transition

    • 设置帧动画

    • @keyframes来进行透明度的动画

    • 设置animation: name duration timing-function delay 等等

    • display对动画无效 可以在disblock的时候设置透明度的动画

    • 对height设置的transition 可以给父元素设置对应的padding-bottom以及box-sizing:border-box使得文字不动

总结：内容回顾

一. HTML5新增的内容

1.1. 语义化元素

  • header

  • nav

  • section

  • article

  • aside

  • footer

display: block

1.2. video/audio

  • 基本使用 src

  • 其他属性

    • controls

    • width/height

    • autoplay

    • muted

    • preload

  • 支持的格式

    • 浏览器支持的视频格式

  • 适配性写法

<video><source src><p>提示</p>
</video>

1.3. input新增特性

  • 新增的属性

  • type新增的类型

    • color

    • date

    • time

    • ...

1.4. 全局属性 data-*

// js代码目前了解

二. white-space/text-overflow(了解)

  • 其他值

三. 常见的CSS函数补充

3.1. var

  • 自定义属性: --main-color

  • var()

3.2. calc

  • 计算

3.3. blur

  • filter:

  • backdrop-filter:

3.4. gradient

  • image子类型

  • background-image

  • 两个函数:

    • linear-gradient

    • radial-gradient

四. 浏览器前缀

  • W3C制定标准

  • 浏览器厂商

    • -ms-

  • 开发者

    • 自动化打包工具帮助我们完成;

五. BFC

5.1. FC概念

  • BFC: block formatting context

  • IFC: inline formatting context

5.3. BFC官方文档解读

  • 从顶部在垂直方向一个挨着另外一个摆放

  • 他们的之间间距是通过margin设置, 在同一个BFC中, 如果相邻两个之间有margin会折叠

5.4. BFC的应用 - 消除折叠效果

  • 给某一个元素放到另外一个BFC中

5.5. BFC的应用-浮动高度塌陷

  • height为auto, 计算方法

    • inline

    • block

    • 绝对定位元素(absolutely positioned box) ignore

    • 浮动元素

      • 会增加BFC的高度以包裹(include)浮动元素的下边缘

六. 媒体查询

6.1. 媒体查询三种使用方法

  • @import

  • link

  • @media

6.2. 媒体查询的概念

  • 媒体类型

  • 媒体特性

    • 表达式, 必须有括号

  • 逻辑操作符(operators)

    • and

6.3. 案例练习

/* 
320~375之间 font-size: 15px;
375~414之间 font-size: 18px;
414~480之间 font-size: 21px;
大于480px font-size: 24px
*/
/* @media (min-width: 320px) and (max-width: 375px) {
.box { font-size: 15px; }
}
@media (min-width: 375px) and (max-width: 414px) {
.box { font-size: 18px; }
}
@media (min-width: 414px) and (max-width: 480px) {
.box { font-size: 21px; }
}
@media (min-width: 480px) {
.box { font-size: 24px; }
} */
​
/* CSS层叠性 */
@media (min-width: 320px) {.box { font-size: 15px; }
}
@media (min-width: 375px) {.box { font-size: 18px; }
}
@media (min-width: 414px) {.box { font-size: 21px; }
}
@media (min-width: 480px) {.box { font-size: 24px; }
}

相关文章：

21.[前端开发]Day21-HTML5新增内容-CSS函数-BFC-媒体查询

王者荣耀-网页缩小的问题处理 为什么会产生这个问题&#xff1f;怎么去解决 可以给body设置最小宽度 1 HTML5新增元素 HTML5语义化元素 HTML5其他新增元素 2 Video、Audio元素 HTML5新增元素 - video video支持的视频格式 video的兼容性写法 HTML5新增元素 - audio audio…...

编程日记 2025/2/9 16:28:03

C++SLT（五）——list

目录 一、list的介绍二、list的使用list的定义方式 三、list的插入和删除push_back和pop_backpush_front和pop_frontinserterase 四、list的迭代器使用五、list的元素获取六、list的大小控制七、list的操作函数sort和reversemergeremoveremove_ifuniqueassignswap 一、list的介…...

编程日记 2025/2/9 16:22:56

网络安全ITP是什么 网络安全产品ips

DS/IPS都是专门针对计算机病毒和黑客入侵而设计的网络安全设备 1、含义不同 IDS &#xff1a;入侵检测系统&#xff08;发现非法入侵只能报警不能自己过滤&#xff09; 做一个形象的比喻&#xff1a;假如防火墙是一幢大楼的门锁&#xff0c;那么IDS就是这幢大楼里的监视系统…...

编程日记 2025/2/9 16:20:54

评估大模型（LLM）摘要生成能力：方法、挑战与策略

大语言模型&#xff08;LLMs&#xff09;有着强大的摘要生成能力&#xff0c;为信息快速提取和处理提供了便利。从新闻文章的快速概览到学术文献的要点提炼&#xff0c;LLMs 生成的摘要广泛应用于各个场景。然而&#xff0c;准确评估这些摘要的质量却颇具挑战。如何确定一个摘要…...

编程日记 2025/2/9 16:19:53

《PYTHON语言程序设计》(2018版)1.20修改这道题，利用类的方式(二) 接近成功....(上)

在类的外面建立4个顶点 turtle.speed(20)ran1_x1 random.randint(-69, -60) ran1_y1 random.randint(-5, 10) ran1_x2 random.randint(-69, -60) ran1_y2 random.randint(75, 80) ran1_x3 random.randint(79, 90) ran1_y3 random.randint(70, 85) ran1_x4 random.randin…...

编程日记 2025/2/9 16:16:50

USB子系统学习（四）使用libusb读取鼠标数据

文章目录 1、声明2、HID协议2.1、描述符2.2、鼠标数据格式 3、应用程序4、编译应用程序5、测试 1、声明 本文是在学习韦东山《驱动大全》USB子系统时&#xff0c;为梳理知识点和自己回看而记录&#xff0c;全部内容高度复制粘贴。 韦老师的《驱动大全》&#xff1a;商品详情 …...

编程日记 2025/2/9 16:15:49

【产品小白】用户调研的需求是否都采纳？

在用户调研中&#xff0c;并非所有需求都应被直接采纳&#xff0c;而应通过系统分析转化为符合产品战略的有效决策。以下是关键思考框架&#xff1a; 1. 用户需求 ≠ 产品需求 矛盾性&#xff1a;用户个体需求可能相互冲突&#xff08;如A功能的去留&#xff09;&#xff0c;需…...

编程日记 2025/2/9 16:12:46

软件测试就业

文章目录 2.6 初识一、软件测试理论二、软件的生产过程三、软件测试概述四、软件测试目的五、软件开发与软件测试的区别&#xff1f;六、学习内容 2.7 理解一、软件测试的定义二、软件测试的生命周期三、软件测试的原则四、软件测试分类五、软件的开发与测试模型1.软件开发模型…...

编程日记 2025/2/9 16:08:39

qt部分核心机制

作业 1> 手动将登录项目实现&#xff0c;不要使用拖拽编程 并且&#xff0c;当点击登录按钮时&#xff0c;后台会判断账号和密码是否相等&#xff0c;如果相等给出登录成功的提示&#xff0c;并且关闭当前界面&#xff0c;发射一个跳转信号&#xff0c;如果登录失败&#…...

编程日记 2025/2/9 16:07:38

【RocketMQ】RocketMq之ConsumeQueue深入研究

目录 一&#xff1a;RocketMq 整体文件存储介绍 二&#xff1a;ConsumeQueue 的文件结构 三&#xff1a;ConsumeQueue 写入和查询流程 一&#xff1a;RocketMq 整体文件存储介绍 存储⽂件主要分为三个部分&#xff1a; CommitLog&#xff1a;存储消息的元数据。所有消息都会…...

编程日记 2025/2/9 16:04:32

如今物联网的快速发展对hmi的更新有哪些积极影响

一、功能更加丰富 物联网的快速发展使得 HMI&#xff08;人机界面&#xff09;能够连接更多的设备和系统&#xff0c;从而实现更加丰富的功能。例如&#xff0c;通过与传感器网络的连接&#xff0c;HMI 可以实时显示设备的运行状态、环境参数等信息&#xff0c;为用户提供更加…...

编程日记 2025/2/9 16:03:29

linux 性能60秒分析

linux 60秒分析 需要运行的工具是 1、uptime 2、dmesg | tail 3、vmstat 1 4、mpstat -P ALL 1 5、pidstat 1 6、iostat -xz 1 7、free -m 8、sar -n DEV 1 9、sar -n TCP,ETCP 1 10、topuptime 快速检查平均负载 [rootaaaaaa ~]# uptime15:17:20 up 3 days, 14 min, 7 us…...

编程日记 2025/2/9 16:02:28

Redisson全面解析:从使用方法到工作原理的深度探索

文章目录 写在文章开头详解Redisson基本数据类型基础配置字符串操作列表操作映射集阻塞队列延迟队列更多关于Redisson详解Redisson 中的原子类详解redisson中的发布订阅模型小结参考写在文章开头 Redisson是基于原生redis操作指令上进一步的封装，屏蔽了redis数据结构的实现细…...

编程日记 2025/2/9 16:01:27

neo4j-解决导入数据后出现：Database ‘xxxx‘ is unavailable. Run :sysinfo for more info.

目录 问题描述 解决方法 重新导入 问题描述 最近在linux上部署了neo4j&#xff0c;参照之前写的博客:neo4j-数据的导出和导入_neo4j数据导入导出-CSDN博客 进行了数据导出、导入操作。但是在进行导入后&#xff0c;重新登录网页版neo4j&#xff0c;发现对应的数据库状态变…...

编程日记 2025/2/9 16:00:26

51单片机之引脚图（详解）

8051单片机引脚分类与功能笔记 1. 电源引脚 VCC&#xff08;第40脚&#xff09;&#xff1a;接入5V电源&#xff0c;为单片机提供工作电压。GND&#xff08;第20脚&#xff09;&#xff1a;接地端&#xff0c;确保电路的电位参考点。 2.时钟引脚 XTAL1&#xff08;第19脚&a…...

编程日记 2025/2/9 15:59:24

Hangfire.NET：.NET任务调度

引言&#xff1a;为何选择 Hangfire&#xff1f; 在开发.NET 应用程序时&#xff0c;我们常常会遇到这样的场景&#xff1a;应用程序需要定期发送报告&#xff0c;像财务报表&#xff0c;每日业务数据汇总报告等&#xff0c;这些报告需要定时生成并发送给相关人员&#xff1b;…...

编程日记 2025/2/9 15:57:22

深入解析：React 事件处理的秘密与高效实践

在 React 中&#xff0c;事件处理是构建交互式应用的核心。本文将带你深入探索 React 事件处理的机制、最佳实践以及如何避免常见陷阱&#xff0c;助你写出更高效、更健壮的代码。 1. React 事件处理的独特之处 合成事件&#xff08;SyntheticEvent&#xff09; React 使用合…...

编程日记 2025/2/9 15:56:20

开源像素字体，可用于独立游戏开发

方舟像素字体 / Ark Pixel Font 开源的泛中日韩像素字体&#xff0c;使用 SIL 开放字体许可证 第1.1版&#xff08;SIL Open Font License 1.1&#xff09;授权。 支持 10、12 和 16 像素尺寸。 支持语言特殊字形&#xff1a;中文-中国大陆、中文-香港特别行政区、中文-台湾…...

编程日记 2025/2/9 15:55:18

【论文阅读】Comment on the Security of “VOSA“

Comment on the Security of Verifiable and Oblivious Secure Aggregation for Privacy-Preserving Federated Learning -- 关于隐私保护联邦中可验证与遗忘的安全聚合的安全性 论文来源摘要Introduction回顾 VOSA 方案对VOSA不可伪造性的攻击对于类型 I 的攻击对于类型 II 的…...

编程日记 2025/2/9 15:54:15

了解传输层TCP协议

目录 一、TCP协议段格式 二、TCP原理 1.确认应答 2.超时重传 3.连接管理 建立连接 断开连接 4.滑动窗口 5.流量控制 6.拥塞控制 7.延时应答 8.捎带应答 9.面向字节流 10.TCP异常情况 TCP&#xff0c;即Transmission Control Protocol&#xff0c;传输控制协议。人如…...

编程日记 2025/2/9 15:53:14

flask实现用户名查重，重复的用户名阻止注册，以及如何优化

在 Flask 中实现用户名查重&#xff0c;并阻止重复的用户名进行注册&#xff0c;可以使用数据库&#xff08;如 SQLite、MySQL、PostgreSQL&#xff09;存储用户信息&#xff0c;并在注册时检查用户名是否已存在。以下是实现步骤&#xff1a; 1. 安装 Flask 及 SQLAlchemy 确保…...

编程日记 2025/2/9 15:51:12

ASP.NET Core对JWT的封装

目录 JWT封装 [Authorize]的注意事项 JWT封装 NuGet 库 |Microsoft.AspNetCore.Authentication.JwtBearer 9.0.1https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBearerhttps://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBea…...

编程日记 2025/2/9 15:49:10

wordpressAI工具，已接入Deepseek 支持自动生成文章、生成图片、生成长尾关键词、前端AI窗口互动、批量采集等

基于关键词或现有内容生成SEO优化的文章&#xff0c;支持多种AI服务&#xff08;如OpenAI、百度文心一言、智谱AI等&#xff09;&#xff0c;并提供定时任务、内容采集、关键词生成等功能。 核心功能 文章生成 关键词生成&#xff1a;根据输入的关键词生成高质量文章。 内容…...

编程日记 2025/2/9 15:48:09

Ollama部署 DeepSeek-R1:70B 模型的详细步骤

1. 确认环境准备 (1) 硬件要求 显存需求&#xff1a;70B 参数的模型需要大量显存。若使用 NVIDIA T4&#xff08;16GB 显存&#xff09;&#xff0c;需多卡并行&#xff08;如 8 卡&#xff09;或开启量化&#xff08;如 q4_0、q8_0&#xff09;。内存需求&#xff1a;建议至…...

编程日记 2025/2/9 15:47:07

PAT乙级( 1009 说反话 1010 一元多项式求导)C语言版本超详细解析

1009 说反话 给定一句英语&#xff0c;要求你编写程序&#xff0c;将句中所有单词的顺序颠倒输出。 输入格式&#xff1a; 测试输入包含一个测试用例&#xff0c;在一行内给出总长度不超过 80的字符串。字符串由若干单词和若干空格组成&#xff0c;其中单词是由英文字母&#x…...

编程日记 2025/2/9 15:45:00

学习笔记十九：K8S生成pod过程

K8S生成pod过程 流程图具体生成过程用户提交 Pod 定义API Server 处理请求调度器分配节点&#xff08;Scheduling&#xff09;目标节点上的 Pod 创建网络配置状态上报与监控控制器管理&#xff08;Controller Manager&#xff09;就绪与服务发现 关键错误场景高级特性 流程图 具…...

编程日记 2025/2/9 15:40:54

Qwen2-VL：增强视觉语言模型对世界任意分辨率的感知能力

1、摘要 Qwen2-VL系列是Qwen-VL模型的高级升级版本&#xff0c;它重新定义了传统视觉处理中预设分辨率的方法。Qwen2-VL引入了Naive Dynamic Resolution机制&#xff0c;使模型能够动态处理不同分辨率的图像&#xff0c;并将其转换为不同数量的视觉标记。这种机制使模型能够生…...

编程日记 2025/2/9 15:39:52

原神新版本角色牌上新 七圣召唤增添新玩法

在原神这款游戏中&#xff0c;5.4版本更新后七圣召唤玩法将新增2张角色牌和对应天赋牌、3张行动牌&#xff0c;并进行部分卡牌平衡调整&#xff0c;今天就给大家介绍一下。 一、角色牌【基尼奇】 1.元素战技&#xff1a;选一个我方角色&#xff0c;自身附属钩索链接并进入夜魂…...

编程日记 2025/2/9 15:38:50

Spring 中的 事务 隔离级别以及传播行为

1. 事务隔离级别&#xff08;Isolation Level&#xff09; 事务隔离级别定义了事务在并发环境下的行为&#xff0c;主要解决以下问题&#xff1a; 脏读&#xff08;Dirty Read&#xff09;&#xff1a;一个事务读取了另一个未提交事务的数据。 不可重复读&#xff08;Non-Re…...

编程日记 2025/2/9 15:37:49

为多个GitHub账户配置SSH密钥

背景 当需要同时使用多个GitHub账户&#xff08;例如工作和个人账户&#xff09;时&#xff0c;默认的SSH配置可能导致冲突。本文介绍如何通过生成不同的SSH密钥对并配置SSH客户端来管理多个账户。 操作步骤 生成SSH密钥对 为每个GitHub账户生成独立的密钥对&#xff0c;并指…...

编程日记 2025/2/9 15:36:48