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

21.2 CSS 三大特性与页面布局

news 2025/7/3 23:11:56

1. 开发者工具修改样式

使用开发者工具修改样式, 操作步骤如下:
* 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择'检查'或者使用快捷键(一般是 F12 或者 Ctrl+Shift+I)来打开开发者工具.* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 一般是'Elements'或者'Elements'选项卡, 然后查找样式编辑器按钮, 点击它来打开样式编辑器.* 3. 修改样式: 在样式编辑器中, 可以找到并选择你想修改的元素, 在右侧的面板中你可以修改该元素的样式.可以修改元素的背景颜色, 字体样式, 边框, 内边距等等, 只需在样式规则中修改相关属性即可.* 4. 预览修改: 在修改样式的过程中, 开发者工具会实时预览你的修改效果. 可以看到元素在页面上的变化.如果需要, 还可以在浏览器调整窗口大小或者模拟设备来查看页面在不同屏幕上的效果.* 5. 应用修改: 一旦得到满意的修改, 可以将修改后的样式应用到页面上.可以直接在开发者工具中编辑页面的样式, 或者将修改后的样式复制到你的代码中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Developer Mode</title><style>p {font-size: 10px;color: red;}</style>
</head>
<body>
<h1>标题</h1>
<p>段落一</p>
<p>段落二</p>
</body>
</html>

2023-08-17_00019

2. CSS 三大特性

CSS具有三个重要的特性, 分别是:
* 1. 层叠性(Cascading): 相同选择器设置相同的样式会覆盖另一种冲突样式.层叠性的特点:1. 给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.2. 给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式.注意事项: 当样式冲突时, 只有当选择器优先级相同时, 才能通过层叠性判断结果.* 2. 继承性(Inheritance): 某些样式属性可以从父元素传递到其子元素.当父元素应用了某个样式属性时, 其子元素将默认继承这个属性的值, 无需在子元素中重复定义.* 3. 优先级(Specificity): 当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.通常, 选择器的具体性越高, 其优先级越高. 选择器的具体性由选择器的类型, 选择器的数量以及选择器的权重决定.这三个特性共同组成了CSS强大的样式控制机制.
使用层叠性, 继承性和优先级, 可以准确地控制网页元素的显示样式, 实现丰富多样的布局和设计效果.

2.1 层叠性

给同一个标签设置不同的样式, 样式会层叠叠加, 共同作用在标签上.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cascading</title><style>p {color: red;}p {color: aqua;}</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00004

给同一个标签设置不同的样式遵循就近原则, 哪个样式离结构近, 就执行哪个样式(程序至上往下运行).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cascading2</title><style>p {color: red;}p {color: aqua;font-size: 14px;}</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2023-08-22_00006

2.2 继承性

继承性: 子元素可以继承其父元素的某些样式属性.以下是关于继承性的一些要点:
* 1. 哪些属性可以继承: 只有部分属性是可继承的.例如, color(文字颜色), font-family(字体系列), font-size(字体大小), line-height(行高)等.这意味着如果父元素设置了这些属性, 子元素将会继承并应用相同的属性值.* 2. 哪些属性不可继承: 并非所有属性都具有继承性.例如, background(背景), height(高度), border(边框), margin(边距), padding(内边距)等属性不会被子元素继承.* 3. 特殊的继承性规则: 尽管大部分可继承属性可以在父元素和其后代元素之间传递, 但有一些属性具有特殊的继承规则.例如, 链接'<a>'标签的文本颜色和文本修饰(如下划线)不会完全继承其父元素的设置,标题标签'<h1> - <h6>'的字体大小也不会完全继承其父元素的设置.* 4. 继承的优先级较低: 如果子元素直接设置了某个属性, 而父元素设置了相同的属性, 子元素会使用自己直接设置的值, 而不是继承父元素的值.直接设置的样式会覆盖继承而来的样式.使用继承性可以方便地应用样式到多个元素, 特别是针对文字和字体样式.
但在某些情况下, 可能需要小心处理继承, 以避免意外的样式传递.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inheritance</title><style>div {color: red; /* 文字颜色: 红色 */font-size: 20px; /* 文字大小: 20像素 */background: grey; /* 背景颜色: 灰色 */text-decoration: none; /* 取消下划线 a便签不会继承*/}</style>
</head>
<body>
<div><h1>一级标签</h1>
</div>
<div><p>段落一</p>
</div><div><ul><li><p>段落二</p></li></ul>
</div><div><a href="">链接</a>
</div></body>
</html>

上例中, h1标签继承了div标签的文字颜色属性, 背景颜色, 取消文字的下划线, 没有继承文字大小的属性.

2023-08-22_00007

上例中, a标签继承了div标签的文字大小, 背景颜色,  取消文字的下划线, 没有继承文字颜色属性.

2023-08-22_00008

2.3 优先级

当多个选择器都能匹配同一个元素时, 需要根据优先级规则来确定最终应用的样式.CSS会按照如下顺序来计算优先级:
* 1. 内联样式(具有最高优先级): 使用'style'属性直接在元素上定义的样式具有最高优先级, 特定性值为1000.
* 2. ID选择器: 具有ID选择器的样式具有比其他选择器更高的优先级, 特定性值为100.
* 3. 类选择器: 属性选择器和伪类选择器: 这些选择器的特定性值为10.
* 4. 元素选择器和伪元素选择器: 这些选择器的特定性值为1.
* 5. 通用选择器和组合选择器: 这些选择器的特定性值为0.
* 6. 属性值末尾添加!important: 提升优先级为最高.* 特定性值相等的情况下, 后面出现的规则会覆盖先前的规则, 因为它们在样式表中出现得更晚.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Specificity</title><style>p {color: red; /* 特定性值为1的元素选择器 */}#paragraph {color: blue; /* 特定性值为100的ID选择器 */}.red-text {color: green; /* 特定性值为10的类选择器 */}body p {color: purple; /* 特定性值为11的组合选择器: 1个元素选择器 + 1个元素选择器 */}</style>
</head>
<body>
<p id="paragraph" class="red-text">Hello, World!</p>
</body>
</html>

2023-08-22_00009

属性值中末尾添加!important提升属性优先级.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>important</title><style>* {color: aqua !important;font-size: 10px;}p {color: red;}</style>
</head>
<body>
<ul><li><p>Hello, world!</p></li>
</ul>
</body>
</html>

2023-08-22_00010

3. 页面布局

div标签:  是一个容器级标签, 一般用于配合css完成网页的基本布局. 特点: 独占一行.
span标签: 是一个文本级标签, 一般用于配合css完成网页中的局部信息.

快捷嵌套标签: div.box$*2+tab; 
<div class="box1"><tab></tab>
</div>
<div class="box2"><tab></tab>
</div>$: 自动生成数字.
*: 后面的数字表示生成的标签数量, 例*2, 生成两个标签.
>: 表示生成子表情.

3.1 div页面布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div</title><style>.header { /*头部区域*/height: 100px;width: 1900px;background: red;}.content { /*中部区域*/height: 750px;width: 1900px;background: aqua;}.footer { /*页尾*/height: 100px;width: 1900px;background: blue;}.logo { /*头部logo*/height: 50px;width: 200px;background: #000;}</style>
</head>
<body>
<div class="header">  <!--头部--><div class="logo"></div> <!--头部中设置logo的布局-->
</div>
<div class="content"></div>  <!--中部-->
<div class="footer"></div>  <!--尾部-->
</body>
</html>

2023-08-22_00011

3.2 span局部更改样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span标签</title><style>span {color: red;}</style>
</head>
<body><p>今天天气 <span>晴</span>，<span>18°</span></p>
</body>
</html>

3.3 结构错误

文本级标签嵌套容器级标签会发生结构错误.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Error examples</title>
</head>
<body>
<p>段落1<h1>标题</h1>
</p>
</body>
</html>

可以正常显示, 但是层级结构改变了了.

2023-08-22_00013

4. 标签分类

HTML将标签分为: '容器级标签'和'文本级标签'.容器级标签是可以包含其他标签的标签, 它们用于创建网页的结构和布局.
一些常见的容器级标签有div, h1-h6, ul, ol和li等.
例如, div标签可以用来创建一个容器, 里面可以包含其他任意的标签.文本级标签用于处理文本内容, 它们一般只能包含文本, 超链接或图片标签.
一些常见的文本级标签包括span, p, em, ins, del等.
例如, p标签用于创建段落, 里面可以包含文字, 也可以包含其他文本级标签或超链接, 图片标签.通过合理使用容器级标签和文本级标签, 可以实现网页的结构, 样式和内容的显示.

CSS将标签分为: '块级元素', '行内元素'和'行内块元素'.块级元素通常是容器级标签, 它们独占一行, 默认宽度与父元素相同.
如果没有设置宽度, 块级元素会自动填充父元素的宽度.
块级元素的高度默认是内容的高度, 但可以通过设置宽高来修改显示效果.行内元素通常是文本级标签(除了p标签), 它们不独占一行.
行内元素的高度默认是内容的高度, 无法设置宽度, 默认与内容一样宽.行内块元素既可以设置宽高, 也不独占一行.
例如, img标签就是行内块元素, 可以设置宽高.通过使用不同类型的元素, 可以对页面的布局和样式进行灵活的控制.

4.1 块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Block level elements</title>
</head>
<body>
<!--独占一行-->
<div>div标签</div>
<h1>h标题</h1>
<p>p标签</p>
<ul><li>ul>li标题标签</li>
</ul>
</body>
</html>

4.2 行内元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inline element</title>
</head>
<body>
<!--不独占一行-->
<ins>aaa</ins>
<del>bbb</del>
<em>ccc</em>
<a href="#">网址</a>
</body>
</html>

4.3 行内块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Block level elements within rows</title>
</head>
<body>
<img src="image/img.png" alt="图片"> 二次元少女
</body>
</html>

5. display显示模式

display属性: 控制元素的显示模式的.常用属性值:
- inline: 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度.
- block: 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度.
- inline-block: 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度.
- none: 将元素隐藏, 不会在前端页面展示, 也不占用位置, 但元素仍然存在于文档中.
通过使用display属性和对应的属性值, 可以调整元素的显示模式和布局.下面是一些用来快速设置常见属性值的快捷键:
- d+tab: display:block;
- h100+tab: height:100px;
- w100+tab: width:100px;

5.1 块级元素转行内元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 1</title><style>/* 将元素显示为行内元素, 不会独占一行, 宽度由内容决定, 不能设置宽度和高度. */div {display: inline;height: 100px; /*失效*/width: 100px; /*失效*/background: red;}</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
</body>
</html>

display:inline属性防止高度产生影响.

5.2 行级元素转块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 2</title><style>/* 将元素显示为块级元素, 独占一行, 宽度默认为父元素的宽度, 可以设置宽度和高度. */span {display: block;width: 100px; /*可以设置宽高*/height: 100px;background: red;}</style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

5.3 转为行内块级标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display 3</title><style>/* 将元素显示为行内块元素, 不会独占一行, 可以设置宽度和高度. */div, span {display: inline-block; /*可以设置宽高*/height: 100px;width: 100px;background: red;}</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>

6. visibility隐藏标签

visibility属性: 控制元素的可见性.常用属性值:
- visible: 元素可见(默认值).
- hidden: 元素不可见, 但仍保留其空间.
- collapse: 仅用于表格元素。行或列被移除，单元格不再占据空间。
- initial: 将可见性设置为默认值.
- inherit: 继承父元素的可见性.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>visibility</title><style>.c1 {display: none;  /* 隐藏标签, 标签不占位置*/}.c3 {visibility: hidden;  /*隐藏标签, 标签占用位置*/}</style></head><body><div class="c1">d1</div><div>d2</div><div class="c3">d3</div><div>d4</div>
</body>
</html>

7. 页面布局练习

使用代码实现下面的页面(相似即可).

2023-08-22_00028

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度首页</title><style>body { /*页面的文字大小 颜色*/font-size: 18px;color: #666;}div { /*所有的div标签居中*/text-align: center;}.header { /*头部页面高300px*/height: 300px;}.content { /*中间的页面高300px*/height: 300px;}.footer { /*尾部页面高300px*/height: 300px;}.logo { /*设置logo的大小*/height: 250px;width: 500px;}.location { /*定位图片大小*/height: 15px;width: 20px;}.logoH {height: 250px;}input[type=text] { /*输入框*/width: 400px;height: 30px;}input[type=submit] { /*搜索按钮*/width: 100px;height: 30px;}.bd {height: 60px;}.bk {height: 170px;}.footerH {height: 60px;}</style>
</head>
<body>
<!--头部-->
<div class="header"><!--logo--><div class="logoH"><img src="image/logo.png" alt="" class="logo"></div><!--导航条--><div><a href="#">新 闻</a><strong>网 页</strong><a href="#">贴 吧</a><a href="#">知 道</a><a href="#">音 乐</a><a href="#">图 片</a><a href="#">视 频</a><a href="#">地 图</a></div></div><!--中部-->
<div class="content"><!--搜索栏--><div class="bd"><form action=""><input type="text"><input type="submit" value="百度一下"></form></div><!--链接地址--><div class="bk"><a href="">百科</a><a href="">hao123</a>|<a href="">更多>></a></div><!--广告推广--><div><img src="image/location.png" alt="" class="location"><a href="#">百度地图带你吃喝玩乐, 全心全意为人民服务</a></div>
</div><!--尾部-->
<div class="footer"><!--推广--><div class="footerH"><a href="#">把百度设为首页</a><a href="#">安装百度卫士</a></div><!--关于百度--><div class="footerH"><a href="#">加入百度推广</a>|<a href="#">搜索风云榜</a>|<a href="#">关于百度</a>|<a href="#">About Baidu</a></div><!--版本--><div class="footerH">©2016 Baidu 使用百度前必读 京ICP证666号</div>
</div>
</body>
</html>

21.2 CSS 三大特性与页面布局

1. 开发者工具修改样式使用开发者工具修改样式, 操作步骤如下: * 1. 打开开发者工具: 在浏览器中右键点击页面, 然后选择检查或者使用快捷键(一般是 F12 或者 CtrlShiftI)来打开开发者工具.* 2. 打开样式编辑器: 在开发者工具中, 找到选项卡或面板, 一般是Elements或者Elemen…...

编程日记 2023/8/28 7:48:13

一、时间语法 DATE_FORMAT和to_char() select to_char(now(),%Y-%m-%d %H:%i:%s) from dual; select DATE_FORMAT(now(),%Y-%m-%d %H:%i:%s) from dual; 2.to_date() 和STR_TO_DATE(#{date},%Y-%m-%d ) select to_date(now(),yyyy-mm-dd hh24:mi:ss) from dual;...

编程日记 2023/8/28 7:47:12

Python(.pyc)反编译：pycdc工具安装与使用

本文将介绍如何将python的.pyc文件反编译成源码，以便我们对源码的学习与改进。pycdc工具安装下载地址： 1、Github地址：https://github.com/zrax/pycdc ，下载后需要使用CMake进行编译。 2、已下载好及编译好的地址：ht…...

编程日记 2023/8/28 7:46:11

山西电力市场日前价格预测【2023-08-28】

日前价格预测预测明日（2023-08-28）山西电力市场全天平均日前电价为319.70元/MWh。其中，最高日前电价为371.80元/MWh，预计出现在19: 15。最低日前电价为278.59元/MWh，预计出现在13: 00。价差方向预测 1： …...

编程日记 2023/8/28 7:45:10

python3/pip3 SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed

环境： mac os 背景： 电脑之前安装的是python3.9 ， 现在升级到python3.10。从python官网下载macos版本的python3.10 pkg。双击安装。程序使用aiohttp访问ebay 。出错： aiohttp.client_exceptions.ClientConnectorCertifi…...

编程日记 2023/8/28 7:44:09

Python中的迭代器与生成器

文章目录 1、迭代器2、生成器3、列表推导式和生成器表达式4、enumerate() 在Python中，迭代器（Iterator）和生成器（Generator）是两种用于处理可迭代对象的重要工具。而可迭代对象包括列表，元组，字…...

编程日记 2023/8/28 7:43:08

简单着色器编写（下）

函数部分介绍完了，最后来介绍一下main函数中的部分。 std::string vertexShader "#version 330 core\n" "\n" "layout(location0)in vec4 position;" "\n" "void main()\n" "{\n&…...

编程日记 2023/8/28 7:42:07

go并发编程基础

go并发编程 1waitgroup WaitGroup就是等待所有的goroutine全部执行完毕，add方式和Down方法要配套使用 package mainimport ("fmt""sync" )func main() {var wq sync.WaitGroupwq.Add(100) //监控多少个goroutine执行结束for i: 0;i<100;…...

编程日记 2023/8/28 7:41:05

PHP之导入excel表格时，获取日期时间变成浮点数

读取到的时间 float(0.20833333333333) 原格式 15:00:00 代码 if (Request::isPost()) {$file_url input(upfile); // 本地上传文件地址// 读取文件内容$local_file_url __dir__./../../../public.$file_url;// $spreadsheet new Spreadsheet();// $sheet $spreadsheet-…...

编程日记 2023/8/28 7:40:04

学习 Java 报表技术导入 Maven 依赖出错：jacob 无法下载、jasperreports 依赖错误

发生缘由最近在做一个可视化项目，用到了 Java 报表技术。在跟着「黑马」课程导入 pom.xml 文件的时候提示下载依赖错误。 com.jacob 包无法下载Failed to read artifact descriptor for com.lowagie:itext:jar:2.1.7.js6 运行环境电脑系统版本：Win…...

编程日记 2023/8/28 7:39:02

力扣-哈希-最长连续序列

题目给定一个未排序的整数数组 nums ，找出数字连续的最长序列（不要求序列元素在原数组中连续）的长度。请你设计并实现时间复杂度为 O(n) 的算法解决此问题。示例 1： **输入：**nums [100,4,200,1,3,2] **输出&a…...

编程日记 2023/8/28 7:38:01

Java线程 - 详解(1)

一，创建线程方法一：继承Thread类 class MyThread extends Thread{Overridepublic void run() {System.out.println("线程1");} }public class Test {public static void main(String[] args) {MyThread myThread new MyThread();myThread.…...

编程日记 2023/8/28 7:37:00

结构体-C语言（初阶）

目录一、结构体声明 1.1 结构概念 1.2 结构声明 1.3 结构成员的类型 1.4 结构体变量的定义和初始化二、结构体成员的访问 2.1 结构体变量访问成员 2.2 结构体指针访问指向变量的成员三、结构体传参一、结构体声明 1.1 结构概念结构是一些值的集合，这些值称为…...

编程日记 2023/8/28 7:35:59

【网络】HTTPS的加密

目录第一组，非对称加密第二组，非对称加密第三组，对称加密证书签名 HTTPS使用的是非对称加密加对称加密的方案 （非对称加密：公钥加/解密，私钥解/加密） （对称加密：一组对称…...

编程日记 2023/8/28 7:34:56

Nacos安装指南

Nacos安装指南 1.Windows安装开发阶段采用单机安装即可。 1.1.下载安装包在Nacos的GitHub页面，提供有下载链接，可以下载编译好的Nacos服务端或者源代码： GitHub主页：https://github.com/alibaba/nacos GitHub的Release下载…...

编程日记 2023/8/28 7:33:54

java-Optional 类详解

目录前言 Optional的构造方法 Optional的相关方法介绍 isPresent用法： get用法： filter用法： orElse用法： orElseGet用法 orElseThrow用法 map用法 flatMap用法： 前言 Optional 类是java8的新特性&#xff0…...

编程日记 2023/8/28 7:32:53

sql数据库怎么备份，sql 实时备份

在当今互联网时代，数据已经成为企业的核心资产。然而，数据的安全性和完整性面临硬件问题、软件故障、人工操作错误等各种威胁。为了保证数据的安全，实时备份已经成为公司必须采取的重要措施之一。下面我们就重点介绍SQL实时备份的重要实施方法…...

编程日记 2023/8/28 7:31:51

RK3399平台开发系列讲解（存储篇）Linux 存储系统的 I/O 栈

平台内核版本安卓版本RK3399Linux4.4Android7.1🚀返回专栏总目录文章目录一、Linux 存储系统全景二、Linux 存储系统的缓存沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍 Linux 存储系统的 I/O 原理。一、Linux 存储系统全景我们可以把 Linux 存储系…...

编程日记 2023/8/28 7:30:48

Java“牵手”天猫淘口令转换API接口数据，天猫API接口申请指南

天猫平台商品淘口令接口是开放平台提供的一种API接口，通过调用API接口，开发者可以获取天猫商品的标题、价格、库存、商品快递费用，宝贝ID，发货地，区域ID，快递费用，月销量、总销量、库存、详情描…...

编程日记 2023/8/28 7:29:47

postgresql 条件表达式

postgresql 条件表达式简单CASE表达式搜索CASE表达式缩写函数nullif函数示例 coalesce函数总结简单CASE表达式语法如下 case 表达式when 值1 then 结果1when 值2 then 结果2else 默认值 end;select e.first_name , e.last_name , case e.department_id when 90 then 管…...

编程日记 2023/8/28 7:28:42

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/6/30 7:02:19

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/6/28 8:53:11

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/7/2 14:16:03

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2025/7/3 3:02:42

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/6/26 7:14:46

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2025/6/24 0:22:10

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...

编程新知 2025/7/2 22:36:00

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何，是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试，是可以跑通文章里面的代码。训练速度也是很快的。注意…...

编程新知 2025/7/2 22:34:24

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置在mo…...

编程新知 2025/6/17 5:27:24