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

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

article 2026/4/30 4:11:11

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

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

可以给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…...

编程日记 2026/4/24 16:35:08

nbmade-boot调用deepseek的api过程与显示

希望大家一起能参与我的新开源项目nbmade-boot: 宁波智能制造低代码实训平台 下面简单介绍调用最近大红的AI &#xff1a;deepseek的api过程与显示&#xff0c;包括前后端代码与效果图 一、后端代码 1、几个基础的java类 DeepSeekRequest .java package com.nbcio.demo.do…...

编程日记 2026/4/29 12:30:52

Linux：安装 node 及 nvm node 版本管理工具（ubuntu ）

目录 方法一&#xff1a;手动下载安装文件安装方法二&#xff1a;curl安装 方法一&#xff1a;手动下载安装文件安装 git clone 远程镜像 git clone https://gitee.com/mirrors/nvm安装 nvm bash install.sh刷新配置&#xff0c;使配置在终端生效 // 方法 1 source /root/.…...

编程日记 2026/4/29 12:30:57

微服务日志查询难解决方案-EFK

前言 在微服务项目中&#xff0c;日志查询难是一个常见问题&#xff0c;主要原因包括&#xff1a;日志分散&#xff1a;微服务实例分布在多个节点或容器中&#xff0c;日志存储位置分散。格式不统一&#xff1a;不同服务可能使用不同的日志格式&#xff0c;难以统一查询。调用…...

编程日记 2025/9/15 3:57:45

【多线程-第三天-NSOperation和GCD的区别 Objective-C语言】

一、我们来看NSOperation和GCD的区别 1.我们来对比一下，NSOperation和GCD， 那这个代码，我们都写过了， 我们来看一下它们的特点啊，首先来看GCD， 1）GCD是C语言的框架，是iOS4.0之后推出的，并且它的特点是，针对多核做了优化，可以充分利用CPU的多核，OK，这是GCD， 2…...

编程日记 2026/4/29 18:29:25

【医院运营统计专题】2.运营统计：医院管理的“智慧大脑”

医院成本核算、绩效管理、运营统计、内部控制、管理会计专题索引 引言 在当今医疗行业快速发展的背景下，医院运营管理的科学性和有效性成为了决定医院竞争力和可持续发展能力的关键因素。运营统计作为医院管理的重要工具，通过对医院各类数据的收集、整理、分析和解读，为医…...

编程日记 2026/4/29 12:31:00

Ollama 部署 DeepSeek-R1 及Open-WebUI

Ollama 部署 DeepSeek-R1 及Open-WebUI 文章目录 Ollama 部署 DeepSeek-R1 及Open-WebUI〇、说明为什么使用本方案 一、 安装Ollama1、主要特点&#xff1a;2、安装3、验证 二、Ollama 部署 DeepSeek1、部署2、模型选用3、Ollama 常用命令4、Ollama模型默认存储路径 安装open-w…...

编程日记 2026/4/29 12:31:02

Docker 容器 Elasticsearch 启动失败完整排查记录

背景 在服务器上运行 Docker 容器 es3&#xff0c;但 Elasticsearch 无法正常启动&#xff0c;运行 docker ps -a 发现 es3 处于 Exited (1) 状态&#xff0c;即进程异常退出。 本次排查从错误日志、容器挂载、权限问题、SELinux 影响、内核参数等多个方面入手&#xff0c;最…...

编程日记 2026/2/18 0:20:37

离线安装Appium Server

1、问题概述？ 安装Appium通常有两种方式： 第一种：下载exe安装包，这种是Appium Server GUI安装方式，缺点是通过命令启动不方便。 第二种：通过cmd安装appium server,可以通过命令方式启动，比较方便。 问题：在没有外网的情况下，无法通过命令在cmd中安装appium server…...

编程日记 2025/4/25 15:39:24

Vite 打包原理

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2026/4/29 12:31:01

目前推荐的优秀编程学习网站与资源平台，涵盖不同学习方式和受众需求

一、综合教程与互动学习平台 菜鸟教程 特点：适合零基础新手，提供免费编程语言教程（Python、Java、C/C++、前端等），页面简洁且包含大量代码示例，支持快速上手。适用人群：编程入门者、需要快速查阅语法基础的学习者。W3Schools 特点：专注于Web开发技术（HTML、CSS、JavaS…...

编程日记 2025/5/27 19:07:31

【大模型】Ubuntu下安装ollama，DeepSseek-R1:32b的本地部署和运行

1 ollama 的安装与设置 ollama官网链接&#xff1a;https://ollama.com/ 在左上角的【Models】中展示了ollama支持的模型在正中间的【Download】中课可以下载支持平台中的安装包。   其安装和模型路径配置操作流程如下&#xff1a; ollama的安装 这里选择命令安装curl -fsSL …...

编程日记 2026/4/29 12:30:46

蓝桥杯---力扣题库第38题目解析

文章目录 1.题目重述2.外观数列举例说明3.思路分析&#xff08;双指针模拟&#xff09;4.代码说明 1.题目重述 外观数列实际上就是给你一串数字&#xff0c;我们需要对于这个数据进行一个简单的描述罢了&#xff1b; 2.外观数列举例说明 外观数列都是从1开始的&#xff0c;也…...

编程日记 2026/4/29 12:30:48

oCam：免费且强大的录屏软件

今天给大家推荐一个非常好的录屏软件。几乎可以满足你日常工作的需求。而且软件完全免费&#xff0c;没有任何的广告。 oCam&#xff1a;免费且强大的录屏软件 oCam是一款功能强大的免费录屏软件&#xff0c;支持屏幕录制、游戏录制和音频录制等多种模式&#xff0c;能够满足不…...

编程日记 2026/4/29 12:30:42

Day81：数据的保存

在编程中，数据保存是非常重要的，它使得程序能够持久化存储数据，并在程序重启后继续使用。这一节，我们将介绍如何使用 Python 来保存数据，涉及常见的几种方式，包括将数据保存到文件中、使用数据库等方法。 1. 保存数据到文本文件 文本文件是最常用的数据存储方式之一。你…...

编程日记 2025/11/29 2:12:40

苍穹外卖 项目记录 day11 Spring Task订单定时处理-来单提醒-客户催单

文章目录 Spring Taskcron表达式Spring Task使用步骤订单状态定时处理WebSocketWebSockt入门示例来单提醒客户催单 Spring Task Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 应用场景&#xff1a; 1). 信用卡每月还款…...

编程日记 2025/12/31 15:01:59

【GitLab CI/CD 实践】从 0 到 1 搭建高效自动化部署流程

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2026/4/29 12:30:40

Django开发入门 – 1.搭建基于Python Web框架Django的IDE开发环境

Django开发入门 – 1.搭建基于Python Web框架Django的IDE开发环境 Build A Integrated Development Environment(IDE) for Python Web Framework - django By JacksonML 1. 获取及安装最新版Python 打开Chrome浏览器&#xff0c;访问Python官网链接&#xff1a;https://www…...

编程日记 2026/4/29 13:29:22

【Java基础】序列化、反序列化和不可变类

Hi~&#xff01;这里是奋斗的明志&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f331;&#x1f331;个人主页&#xff1a;奋斗的明志 &#x1f331;&#x1f331;所属专栏&#xff1a;Java基础面经 &#x1f4da;本系列文章为个…...

编程日记 2026/4/29 11:31:10

R语言 文本分析 天龙八部

起因， 目的: 前面有人对 “倚天屠龙记” 进行分析，我这里只是进行模仿而已。 完整的文件， 已经绑定了，反正读者可以找一下。 案例背景 小说《天龙八部》是金庸先生所著的武侠小说，也是“射雕三部曲”的前传。全书共50章，字数超过一百万字。故事发生在北宋末年，以大理…...

编程日记 2026/2/18 18:19:00

Gradle 发布Jar到 Maven Central

1. 前置步骤 自 2024 年 3 月 12 日起&#xff0c;所有注册和发布都将通过 Central Portal 进行。 Central Portal 帐户注册命名空间可用于对工件进行签名的 GPG 密钥 1. 创建 GPG 密钥对 2. 分发公钥 更多教程参考本文: 如何发布jar包到maven中央仓库&#xff08;2024年3月最…...

编程日记 2026/2/21 12:59:04

小米6的ubantu touch 怎么安装docker

deekseek 真的太牛逼了。 小米6的ubantu touch 怎么安装docker&#xff1f; Thought for 19 seconds 嗯&#xff0c;用户问的是在小米6上安装Ubuntu Touch后如何安装Docker。首先&#xff0c;我需要确认Ubuntu Touch的版本是否支持Docker。Ubuntu Touch是基于Ubuntu的移动操作…...

编程日记 2026/1/4 8:44:46

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

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

编程日记 2026/4/29 12:41:17

深度剖析 Redisson 分布式锁：原理、实现与应用实践

文章目录 写在文章开头详解Redisson 分布式锁使用和实现前置准备工作分布式锁的基本使用公平锁的使用联锁的使用读写锁基本使用常见问题Redisson和Jedis有什么区别redisson如何实现分布式锁redisson如何实现分布式锁的可重入redisson如何实现公平锁Redisson的watchdog机制是什么…...

编程日记 2026/4/29 12:38:00

Android Studio 配置 Gerrit Code Review

很多大厂&#xff08;华为、荣耀&#xff09;的大型项目都有gerrit代码审查流程&#xff0c;那么我们如何实现不手动敲命令行&#xff0c;就在Android Studio中像平常开发一样&#xff0c;只需要用鼠标点点点&#xff0c;就能将代码推送到gerrit审查仓呢&#xff0c;现在就来跟…...

编程日记 2026/1/4 21:55:41

基于微信小程序的医院预约挂号系统的设计与实现

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…...

编程日记 2026/4/29 12:40:35

仅128个token达到ImageNet生成SOTA性能！MAETok:有效的扩散模型的关键是什么？(卡内基梅隆港大等)

论文链接&#xff1a;https://arxiv.org/pdf/2502.03444 项目链接&#xff1a;https://github.com/Hhhhhhao/continuous_tokenizer 亮点直击 理论与实验分析&#xff1a;通过实验和理论分析建立了潜空间结构与扩散模型性能之间的联系。揭示了具有更少高斯混合模型&#xff08;G…...

编程日记 2026/4/29 12:41:55

AWS成本优化实战：查询未关联弹性IP地址的完整指南

一、背景介绍 1.1 为什么要管理未关联的弹性IP 弹性IP (Elastic IP) 是AWS中的重要资源，但未关联的弹性IP会产生不必要的成本支出。主要问题包括： 闲置资源浪费持续产生费用增加运维成本影响资源管理效率1.2 解决方案价值 通过自动化脚本定期检查未关联的弹性IP： 及时发现…...

编程日记 2025/12/5 4:19:43

I2C协议—读写EEPROM（24Cxx为例）

STM32 I2C协议详解与应用实践-CSDN博客 实际项目中移植IIC协议及读写EEprom代码&#xff1a; /* AT24C08,写次数达100万次SOC ,2500次充放电次数&#xff0c;需要500万次记录&#xff0c;需存储均衡 每页*/#include "FreeRTOS.h" #include "task.h" #incl…...

编程日记 2025/7/3 6:04:46

示例：JAVA调用deepseek

近日&#xff0c;国产AI DeepSeek在中国、美国的科技圈受到广泛关注&#xff0c;甚至被认为是大模型行业的最大“黑马”。在外网&#xff0c;DeepSeek被不少人称为“神秘的东方力量”。1月27日&#xff0c;DeepSeek应用登顶苹果美国地区应用商店免费APP下载排行榜&#xff0c;在…...

编程日记 2026/4/22 8:47:04