前端学习＜二＞CSS基础——06-CSS盒模型详解

news2024/9/28 21:21:26


盒子模型

前言

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

### 盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

  • width和height：内容的宽度、高度（不是盒子的宽度、高度）。

  • padding：内边距。

  • border：边框。

  • margin：外边距。

盒子模型的示意图：

代码演示：

上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。

标准盒模型和IE盒模型

我们目前所学习的知识中，以标准盒子模型为准。

标准盒子模型：

IE盒子模型：

上图显示：

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

  • width和height：内容的宽度、高度（不是盒子的宽度、高度）。

  • padding：内边距。

  • border：边框。

  • margin：外边距。

CSS盒模型和IE盒模型的区别：

  • 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  • IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。

<body>标签也有margin

<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!doctype html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Generator"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"EditPlus®"</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Author"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">""</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Keywords"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">""</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"Description"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">""</span><span style="color:#117700">></span>
   <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>Document<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
 ​
     <span style="color:#117700"><</span><span style="color:#117700">style</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text/css"</span><span style="color:#117700">></span>
 ​
         <span style="color:#117700">div</span>{
             <span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;
             <span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;
             <span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#770088">red</span>;
             <span style="color:#000000">padding</span>: <span style="color:#116644">20px</span>;
             <span style="color:#000000">margin</span>: <span style="color:#116644">30px</span>;
         }
 ​
     <span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
 ​
  <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
 ​
  <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 ​
     <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>有生之年<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>狭路相逢<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
 ​
  <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
 ​
 <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span>
 ​</span></span>

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：

认识width、height

一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。

比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：

下面这两个盒子，真实占有宽高，都是302*302：

盒子1：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555">.box1</span>{
     <span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;
     <span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;
     <span style="color:#000000">padding</span>: <span style="color:#116644">100px</span>;
     <span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#770088">red</span>;
 }</span></span>

盒子2：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555">.box2</span>{
     <span style="color:#000000">width</span>: <span style="color:#116644">250px</span>;
     <span style="color:#000000">height</span>: <span style="color:#116644">250px</span>;
     <span style="color:#000000">padding</span>: <span style="color:#116644">25px</span>;
     <span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#770088">red</span>;
 }</span></span>

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

上面这两个盒子的盒模型图如下：

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

认识padding

padding区域也有颜色

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。

效果如下：

padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性的写法：

<span style="background-color:#f8f8f8"><span style="color:#333333">     <span style="color:#117700">padding-top</span>: <span style="color:#116644">30px</span>;
     <span style="color:#117700">padding-right</span>: <span style="color:#116644">20px</span>;
     <span style="color:#117700">padding-bottom</span>: <span style="color:#116644">40px</span>;
     <span style="color:#117700">padding-left</span>: <span style="color:#116644">100px</span>;</span></span>

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#117700">padding</span>:<span style="color:#116644">30px</span> <span style="color:#116644">20px</span> <span style="color:#116644">40px</span> <span style="color:#116644">100px</span>;</span></span>

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右和左、下。

如果只写了两个值，则顺序为：上和下、左和右。

比如说：

<span style="background-color:#f8f8f8"><span style="color:#333333"> padding: 30px 40px;</span></span>

则顺序等价于：30px 40px 30px 40px;

要懂得，用小属性层叠大属性。比如：

<span style="background-color:#f8f8f8"><span style="color:#333333"> padding: 20px;
 padding-left: 30px;</span></span>

上面的padding对应盒子模型为：

下面的写法：

<span style="background-color:#f8f8f8"><span style="color:#333333"> padding-left: 30px;
 padding: 20px;</span></span>

第一行的小属性无效，因为被第二行的大属性层叠掉了。

下面的题，会做了，说明你明白了。

一些题目

题目1：说出下面盒子真实占有宽高，并画出盒模型图。

<span style="background-color:#f8f8f8"><span style="color:#333333">	div{
		width: 200px;
		height: 200px;
		padding: 10px 20px 30px;
		padding-right: 40px;
		border: 1px solid #000;
	}</span></span>

答案：

题目2：说出下面盒子真实占有宽高，并画出盒模型图。

<span style="background-color:#f8f8f8"><span style="color:#333333">	div{
		width: 200px;
		height: 200px;
		padding-left: 10px;
		padding-right: 20px;
		padding:40px 50px 60px;
		padding-bottom: 30px;
		border: 1px solid #000;
	}</span></span>

答案：

padding-left:10px； 和padding-right:20px; 没用，因为后面的padding大属性，层叠掉了他们。

盒子模型如下：

题目3：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。

答案：

<span style="background-color:#f8f8f8"><span style="color:#333333">	width:123px;
	height:123px;
	padding:20px 40px;
	border:1px solid red;</span></span>

题目4：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。

答案：

<span style="background-color:#f8f8f8"><span style="color:#333333">	width:123px;
	height:123px;
	padding:20px;
	padding-right:40px;
	border:1px solid red;
</span></span>

一些元素，默认带有padding

一些元素，默认带有padding，比如ul标签。如下：

上图显示，不加任何样式的ul，也是有40px的padding-left。

所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。

可以使用*进行清除：

<span style="background-color:#f8f8f8"><span style="color:#333333">		*{
			margin: 0;
			padding: 0;
		}</span></span>

但是，*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：

<span style="background-color:#f8f8f8"><span style="color:#333333">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}</span></span>

认识border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

比如：

<span style="background-color:#f8f8f8"><span style="color:#333333">.div1{
	width: 10px;
	height: 10px;
	border: 2px solid red;
}
</span></span>

颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。

border-style

border的所有的线型如下：（我们可以通过查看CSS参考手册得到）

比如border:10px ridge red;这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）

如果公司里面的设计师是处女座的，追求极高的页面还原度，那么不能使用css来制作边框。就要用到图片，就要切图了。

所以，比较稳定的border-style就几个：solid、dashed、dotted。

border拆分

border是一个大综合属性。比如说：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:1px solid red;</span></span>

就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。

PS：小技巧：在sublime text中，为了快速输入border:1px solid red;这个属性，可以直接输入bd，然后选第二个后回车。

border属性是能够被拆开的，有两大种拆开的方式：

  • （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）

  • （2）按方向拆开：border-top、border-right、border-bottom、border-left。

现在我们明白了：一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;</span></span>

效果如下：

（1）按三要素拆：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。</span></span>

等价于：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:10px solid red;</span></span>

(2)按方向来拆：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;</span></span>

等价于：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:10px solid red;</span></span>

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)

<span style="background-color:#f8f8f8"><span style="color:#333333">	border-top-width:10px;
	border-top-style:solid;
	border-top-color:red;
	border-right-width:10px;
	border-right-style:solid;
	border-right-color:red;
	border-bottom-width:10px;
	border-bottom-style:solid;
	border-bottom-color:red;
	border-left-width:10px;
	border-left-style:solid;
	border-left-color:red;</span></span>

等价于：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:10px solid red;
</span></span>

工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：

为了实现上方效果，写法如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:10px solid red;
border-right-color:blue;</span></span>

为了实现上方效果，写法如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:10px solid red;
border-style:solid dashed;</span></span>

border可以没有：

<span style="background-color:#f8f8f8"><span style="color:#333333">border:none;</span></span>

可以某一条边没有：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-left: none;</span></span>

也可以调整左边边框的宽度为0：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-left-width: 0;</span></span>

border-image 属性

比如：

<span style="background-color:#f8f8f8"><span style="color:#333333">border-image: url(.img.png) 30 round;</span></span>

这个属性在实际开发中用得不多，暂时忽略。

举例1：利用 border 属性画一个三角形（小技巧）

完整代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">div{
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: red;
	border-bottom: none;
}
</span></span>

步骤如下：

（1）当我们设置盒子的width和height为0时，此时效果如下：

（2）然后将border的底部取消：

（3）最后设置border的左边和右边为白色或者透明：

这样，一个三角形就画好了。

举例2：利用 border 属性画一个三角形（更推荐的技巧）

上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？

完整代码如下：（用 css 画等边三角形）

<span style="background-color:#f8f8f8"><span style="color:#333333">.div1{
	width: 0;
	height: 0;
	border-top: 30px solid red;
	/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
</span></span>

效果如下：

另外，我们在上方代码的基础之上，再加一个 border-radus: 20px; 就能画出一个扇形。

写在最后：希望大家可以点个关注点个赞，这对up真的很重要！谢谢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1550803.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C语言】strcmp 的使⽤和模拟实现

【C语言】strcmp 的使⽤和模拟实现

前言 这篇文章将要带我们去实现模拟一个strcmp函数 首先我们要知道strcmp函数的定义 strcmp()定义和用法 我们先看一下strcmp在cplusplus网站中的定义 链接: link int strcmp ( const char * str1, const char * str2 );比较两个字符串将 C 字符串 str1 与 C 字符串 str2 …
阅读更多...
There is no getter for property named ‘deleted‘

There is no getter for property named ‘deleted‘

实体类在继承BaseEntity的时候,由于没填写deleted参数名导致mybatis报错 这时候要么改application.yml里的mybatis参数&#x1f447; 要么就将BaseEntity基类的delete上加个existfalse&#x1f447;(推荐)
阅读更多...
工业互联网下的增强现实

工业互联网下的增强现实

工业互联网下的增强现实 1、 概述 增强现实&#xff08;Augmented Reality&#xff0c;简称AR&#xff09;&#xff0c;增强现实技术也被称为扩增现实&#xff0c;AR增强现实技术是促使真实世界信息和虚拟世界信息内容之间综合在一起的较新的技术内容&#xff0c;其将原本在现…
阅读更多...
C语言牛客网BC-37 牛牛的圆（求面积）

C语言牛客网BC-37 牛牛的圆（求面积）

题目如下 代码实现 #include<stdio.h> int main() { float r 0;float s 0;scanf("%f",&r);s 3.14*r*r;printf("%.2f",s);return 0; } 创作不易&#xff0c;点点关注&#xff0c;感谢支持&#xff01;&#xff01;&#xff01;
阅读更多...
深入解析MD5哈希算法：原理、应用与安全性

深入解析MD5哈希算法：原理、应用与安全性

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 本文将深入探讨MD5哈希算法的工作原理、应用场景以及安全性问题。我们将了解MD5如何生成固定长度的哈希值&#xff0c;以及它在数…
阅读更多...
前端Webpack5高级进阶课程

前端Webpack5高级进阶课程

课程介绍 本套视频教程主要内容包含React/Vue最新版本脚手架分析、基于Webpack5编写自己的loader和plugin等&#xff0c;让你开发时选择更多样&#xff0c;最后&#xff0c;用不到一百行的代码实现Webpack打包。通过本套视频教程的学习&#xff0c;可以帮你彻底打通Webpack的任…
阅读更多...
蚂蚁集团Java一面，不只是技术问题，还有系统设计的深度拷问！

蚂蚁集团Java一面，不只是技术问题，还有系统设计的深度拷问！

下面我将分享一位同学在蚂蚁集团Java一面的面试经历&#xff0c;他的评价是&#xff0c;面试过程中问题很深入&#xff0c;你试试呢&#xff1f; 【提醒】通过这次面试经验&#xff0c;你将可以复习到以下知识点&#xff1a; 线程池的工作原理、参数配置及使用注意事项CPU密集…
阅读更多...
java特殊文件——properties属性文件概述

java特殊文件——properties属性文件概述

前言&#xff1a; 整理下学习笔记&#xff0c;打好基础&#xff0c;daydayup!! properties properties是一个Map集合&#xff08;键值对合集&#xff09;&#xff0c;但是一般不当作合集。而是用来代表属性文件&#xff0c;通过Properties读写属性文件里的内容 Properties调用方…
阅读更多...
【计算机考研】408到底有多难？

【计算机考研】408到底有多难？

你真以为大家是学不会408吗&#xff1f; 不是&#xff01;单纯是因为时间不够&#xff01;&#xff01;&#xff01; 再准确一些就是不会分配时间 408的知识其实并不难&#xff0c;要说想上130那确实有难度&#xff0c;但是100在时间充裕的情况下还是可以做到的 我本人是双…
阅读更多...
深入浅出：探索Hadoop生态系统的核心组件与技术架构

深入浅出：探索Hadoop生态系统的核心组件与技术架构

目录 前言 HDFS Yarn Hive HBase Spark及Spark Streaming 书本与课程推荐 关于作者&#xff1a; 推荐理由&#xff1a; 作者直播推荐&#xff1a; 前言 进入大数据阶段就意味着 进入NoSQL阶段&#xff0c;更多的是面向OLAP场景&#xff0c;即数据仓库、BI应用等。 …
阅读更多...
阅读笔记（MM2023）Learning pixel-wise alignment for unsupervised image stitching

阅读笔记（MM2023）Learning pixel-wise alignment for unsupervised image stitching

无监督图像拼接中的学习逐像素对齐 Jia, Q., Feng, X., Liu, Y., Fan, X., & Latecki, L. J. (2023, October). Learning pixel-wise alignment for unsupervised image stitching. In Proceedings of the 31st ACM International Conference on Multimedia (pp. 1392-140…
阅读更多...
Chrome之解决：浏览器插件不能使用问题(十三)

Chrome之解决：浏览器插件不能使用问题(十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
自己编译SQLite或将SQLite移植到新的操作系统（六）

自己编译SQLite或将SQLite移植到新的操作系统（六）

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite中的动态内存分配&#xff08;五&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 1.0 引言 对于大多数应用程序&#xff0c;推荐的构建方法 SQLite是使用合并代码 文件 sqlite3.c 及其相应的头文件 sqlite3.…
阅读更多...
配置文件 application properties

配置文件 application properties

配置文件 application properties 1 参数交由配置文件集中管理 Value(“${}”)用于外部配置的属性注入 在之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&#xff0c;将文件上传到阿里云OSS对象存储服务当中。而在调用工具类进行文件上传时&#xff0c…
阅读更多...
深度学习中的优化问题

深度学习中的优化问题

深度学习中的优化问题 简要指南 我在 2019 年底左右开始撰写有关数学和机器学习的文章&#xff1b;从那时起&#xff0c;我写了数百篇教育文章&#xff0c;揭示了我们日常使用的算法背后的细节。 让写文章的人 感到尴尬的一个方法是&#xff1a;让他们阅读他们早期的作品。我…
阅读更多...
JSON 文档存储详解

JSON 文档存储详解

JSON&#xff08;JavaScript Object Notation、JavaScript 对象表示法&#xff09;是一种轻量级的数据交换格式&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。JSON 易于阅读和编写&#xff0c;同时也方便机器解析和生成&#xff0c;并且能够有效地提升网络传…
阅读更多...
Qt中QIcon图标设置（标题、菜单栏、工具栏、状态栏图标）

Qt中QIcon图标设置（标题、菜单栏、工具栏、状态栏图标）

1 exe程序图标概述 在 Windows 操作系统中&#xff0c;程序图标一般会涉及三个地方&#xff1b; &#xff08;1&#xff09; 可执行程序&#xff08;以及对应的快捷方式&#xff09;的图标 &#xff08;2&#xff09; 程序界面标题栏图标 &#xff08;3&#xff09;程序在任务…
阅读更多...
element-ui的el-switch在修改值之前做二次确认操作

element-ui的el-switch在修改值之前做二次确认操作

如果你直接就在<el-switchv-model"row.balanceCheck"active-color"#13ce66"inactive-color"#EAECF0"change"switchChange($event, row)"></el-switch>switchChange (e, row) {this.$confirm(是否修改&#xff1f;).then((…
阅读更多...
从傅里叶级数到离散傅里叶变换/逆变换

从傅里叶级数到离散傅里叶变换/逆变换

傅里叶级数&#xff08;Fourier Series&#xff09;和傅里叶变换&#xff08;Fourier Transform&#xff09;都是以法国数学家让-巴蒂斯特约瑟夫傅里叶的名字命名&#xff0c;用于分析函数或信号的频率成分&#xff0c;它们基于相似的数学原理&#xff0c;但是应用于不同类型的…
阅读更多...
本地GPU调用失败问题解决2修改pytorch版本（失败）

本地GPU调用失败问题解决2修改pytorch版本（失败）

一、基于现有anaconda中的环境复制新环境 1、管理员打开anaconda 进入当前环境&#xff1a; 输入 conda env list conda activate env_pytorch1121 2、复制当前环境为新环境 conda create --name env_pytorch2.2.0cu --clone env_pytorch1121 2&#xff09;删除其中的p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023