CSS学习笔记04

CSS笔记04

浮动

标准文档流

  • 标准文档流就是浏览器按照各种元素标签排版布局中默认的状态。浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的 CSS 属性干扰的就叫标准文档流。
  • 标准文档流中大部分元素是区分等级的，我们习惯将元素划分为几种常见的加载级别：块级元素，行内元素，行内块元素。

块级元素 - block

  • 大部分容器级标签标签都是块级元素，比如h1~h6，p，div，ul，li等。
  • 块级元素通常具有以下特点：
    • 可以对其单独设置宽度、高度、外边距和内边距等属性。
    • 必须独占一行，不能和其它标签并排占同一行。
    • 如果不设置宽度，会自动撑满父级元素的width区域（即默认width = 100%;）；如果设置不高度，会被内容自动撑开。
    • 可以容纳内联元素和其他的块级元素

行内元素 - inline

  • 大部分文本级标签， 比如span，a，label ，strong 等。
  • 行内元素通常具有以下特点：
    • 设置宽度和高度无效，水平方向上的padding和margin可以设置，垂直方向上的无效。
    • 不论设置宽高，宽度和高度都只能被内容撑开（即默认宽高为其自身内容的宽高）。
    • 可以与其它行内或行内块元素并排一行显示。
  • 特殊的行内元素：input与img等，它们虽然被归类为行内元素，但可以单独设置宽高和内外边距，在表现上更倾向于inline-block，我们也把它们叫做行内替换元素。（参考：html中的行内替换元素）

行内块元素 - inline-block

  • 行内块元素结合了块级元素与行内元素各自的一些特点，通俗的讲：行内块元素就是不独占一行的块级元素。
  • 行内块级元素通常具有以下特点：
    • 可以设置宽高，内外边距。
    • 不独占一行，可以和其它行内元素和行内块元素并排。
    • 不设置宽高时，要么以原始尺寸加载，要么被内容撑开。

块级元素、行内元素 与 行内块元素 的相互转换 - display

  • 我们可以通过display属性来转换元素的加载级别或者隐藏元素：
    • display：block; - 定义元素为块级元素。
    • display: inline; - 定义元素为行内元素。
    • display: inline-block; - 定义元素为行内块级元素。
    • display: none; - 隐藏元素。
  • 下面我们就通过写代码的方式来加深一下我们对以上知识的理解：
  • 先写一个块级元素和一个行内元素，为了便于观察结果，我们给他们都设置好大小和背景颜色：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: deepskyblue;}span {width: 200px;height: 200px;background-color: lightpink;}</style></head>
<body><div>div块级元素</div>
<span>span行内元素</span></body>
</html>
  • 查看此时的网页效果：

在这里插入图片描述

  • 我们发现div块级元素独占一行；span行内元素设置的宽度和高度无效，它的实际大小仅由内容撑开。
  • 然后我们使用display将它们的元素类型都转换为行内块元素（inline-block）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: deepskyblue;display: inline-block;}span {width: 200px;height: 200px;background-color: lightpink;display: inline-block;}</style></head>
<body><div>div块级元素</div>
<span>span行内元素</span></body>
</html>
  • 查看此时的网页效果：

在这里插入图片描述

  • 此时两个元素都是行内块元素，设置的宽高都有效，且都不独占一行，能够和其他元素并列同一行。
  • 我们再使用display将div块级元素隐藏：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: deepskyblue;display: none;}span {width: 200px;height: 200px;background-color: lightpink;display: inline-block;}</style></head>
<body><div>div块级元素</div>
<span>span行内元素</span></body>
</html>
  • 查看此时的网页效果：

在这里插入图片描述

浮动 - float

  • CSS 属性float（浮动）- 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素会脱离正常的文档流，但是仍然保持部分的流动性（与绝对定位相反）。【脱离文档流就是将元素从普通的布局排版中移除】

左右浮动

  • 我们先写一个页面，它由一个父级div（father）四个子级div（layer01~layer04）组成，我们给每个div内都添加一些内容（图片或文字）：

index.html

<!DOCTYPE html>
<html>
<head lang=”en"><meta charset="UTF-8"><title>浮动</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father"><div class="layer01"><img src="images/1.jpg" alt=""/></div><div class="layer02"><img src="images/2.jpg" alt=""/></div><div class="layer03"><img src="images/3.jpg" alt=""/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div>
</div>
</body>
</html>
  • 为了方便观察，我们给每个div都设置不同颜色的边框，并将它们都设置为行内块元素（inline-block）：

style.css

div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;
}.layer02 {border: 2px blue dashed;display: inline-block;
}.layer03 {border: 2px green dashed;display: inline-block;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;
}
  • 查看此时的网页效果：

在这里插入图片描述

  • 现在我们使用float让layer01向左浮动：

style.css

div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;float: left; /* 向左浮动 */
}.layer02 {border: 2px blue dashed;display: inline-block;
}.layer03 {border: 2px green dashed;display: inline-block;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;
}
  • 查看此时的网页效果：

在这里插入图片描述

  • 我们可以观察到此时layer01的表现就像是漂浮在father的上层，同时father的边框高度变小了（父级边框塌陷问题）。
  • 我们再使用float让layer02向右浮动：

style.css

div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;float: left; /* 向左浮动 */
}.layer02 {border: 2px blue dashed;display: inline-block;float: right; /* 向右浮动 */
}.layer03 {border: 2px green dashed;display: inline-block;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;
}
  • 查看此时的网页效果：

在这里插入图片描述

  • 我们可以观察到此时layer02也漂浮了起来，并且向右浮动直到碰到了father右侧的边框，同时father的边框进一步塌陷了。

父级边框塌陷问题

  • 在上面学习左右浮动的过程中我们观察到当我们使用浮动（float）进行网页布局时，当我们将父级元素中的子元素浮动了时，就可能会发生父级边框塌陷问题。因此我们在使用float进行网页布局时，要采取一些措施来防止父级元素的边框发生塌陷。
  • 我们接着使用上面的例子，给layer01~layer04都设置浮动：

style.css

div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;float: left; /* 向左浮动 */
}.layer02 {border: 2px blue dashed;display: inline-block;float: left; /* 向左浮动 */
}.layer03 {border: 2px green dashed;display: inline-block;float: right; /* 向右浮动 */
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right; /* 向右浮动 */
}
  • 查看此时的网页效果：

在这里插入图片描述

  • 可以观察到此时父级元素father的边框发生了塌陷。
  • 下面我们来学习解决父级边框塌陷问题的办法：
方法一：

  • 设置父级元素的高度：（不推荐）

    • 父级边框塌陷问题往往发生在父级元素没有设置固定的高度（即高度完全由内容撑开），且我们设置浮动的子元素的高度在同级元素中是最高的时候。这是因为当我们把子元素设置为浮动元素时，该元素就脱离了正常的文档流（可以理解为不再被父元素包裹，也不再撑开父元素的高度），所以此时父元素的边框就发生了塌陷。
    • 那么，只要我们把父元素的高度设置成固定的，且足够高时，它的边框就不会再塌陷了。但我们通常不推荐使用这种方法，因为这样一次次地调试合适的高度非常麻烦，也不能从本质上解决问题。
    • 示例 - 我们给父级元素father设置一个合适的固定高度：

    style.css

    div {margin: 10px;padding: 5px;
}#father {height: 350px; /* 设置父级元素的高度 */border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;float: left;
}.layer02 {border: 2px blue dashed;display: inline-block;float: left;
}.layer03 {border: 2px green dashed;display: inline-block;float: right;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right;
}
    • 查看此时的网页效果：

    在这里插入图片描述

    • 可以观察到在给父级元素设置合适的固定高度后，父级元素边框塌陷的问题得到了解决。（优点：简单；缺点：会降低网页的可拓展性，例如：由于我们的高度是固定的，所以当我们又向父级元素中添加了一个高度更高的元素时，我们原本设置的父级元素的高度就不适用了，就又会发生边框塌陷问题）
方法二：

  • 在最后一个浮动子元素后加一个空的div，使用clear清除它两侧的浮动元素：

    • 这里先学习一下 CSS 属性clear - 指定该元素的左侧或右侧不允许有浮动的元素。它有四个常见的属性值：
      • clear: left; - 在左侧不允许有浮动元素。
      • clear: right; - 在右侧不允许有浮动元素。
      • clear: both; - 在左右两侧都不允许有浮动元素。
      • clear: none; - 默认值。允许浮动元素出现在左右两侧。
    • 示例 - 我们先在layer04的后面添加一个空的div：

    index.html

    <!DOCTYPE html>
<html>
<head lang=”en"><meta charset="UTF-8"><title>浮动</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father"><div class="layer01"><img src="images/1.jpg" alt=""/></div><div class="layer02"><img src="images/2.jpg" alt=""/></div><div class="layer03"><img src="images/3.jpg" alt=""/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div><!-- 添加一个空div --><div class="clear"></div>
</div>
</body>
</html>
    • 然后我们给它设置样式：clear: both; - 在左右两侧都不允许有浮动元素。（规范的写法：为了避免这个空div有默认的内外边距，影响我们的页面效果，通常我们都会手动将它的内外边距设置为0）

    style.css

    div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;
}.layer01 {border: 2px red dashed;display: inline-block;float: left;
}.layer02 {border: 2px blue dashed;display: inline-block;float: left;
}.layer03 {border: 2px green dashed;display: inline-block;float: right;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right;
}/* 设置不允许两侧出现浮动元素 */
.clear {clear: both;margin: 0;padding: 0;
}
    • 查看此时的网页效果：

    在这里插入图片描述

    • 可以观察到在给最后一个子元素后加上一个空的div，并使用clear清除它两侧的浮动元素后，父级元素边框塌陷的问题也得到了解决。（优点：简单；缺点：空div会使我们 HTML 代码变得冗余，我们在编写代码时应该尽量避免定义空的div）
方法三：

  • 给父级元素的样式中添加overflow属性（通常使用overflow: hidden; - 没有滚动条，美观）：

    • 这里我们先了解一下 CSS 属性overflow - 它指定当元素的内容太大溢出某个元素的框时，会发生什么（是否对内容进行裁剪、是否显示滚动条等行为）。 它有四个常见的属性值：
    • overflow: visible; - 默认值。内容不会被修剪，会呈现在元素框之外。
    • overflow: hidden; - 内容会被修剪，并且其余内容是不可见的。
    • overflow: scroll; - 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    • overflow: auto; - 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    • 补充：scroll和auto的区别：
      • scroll：在内容没有溢出的时候，也会展示滚动条的样式。
      • auto：只有在内容溢出的时候，才会出现滚动条。
      • 所以，一般为了更好的展示效果，在这二者中更推荐使用auto。但在使用auto的时候，写容器内容的样式时，记得将滚动条的宽度预留出来，不然内容溢出的时候，展示效果可能会有些变化。
    • 这里引用菜鸟教程中的代码做一个关于overflow 属性的演示：
    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>div.ex1 {background-color: lightblue;width: 110px;height: 110px;overflow: scroll;}div.ex2 {background-color: lightblue;width: 110px;height: 110px;overflow: hidden;}div.ex3 {background-color: lightblue;width: 110px;height: 110px;overflow: auto;}div.ex4 {background-color: lightblue;width: 110px;height: 110px;overflow: visible;}</style>
</head>
<body>
<h1>overflow 属性</h1><p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p><h2>overflow: scroll:</h2>
<div class="ex1">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div><h2>overflow: hidden:</h2>
<div class="ex2">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div><h2>overflow: auto:</h2>
<div class="ex3">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div><h2>overflow: visible (默认):</h2>
<div class="ex4">菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div></body>
</html>
    • 网页效果：

    在这里插入图片描述

    • 了解完overflow，现在我们继续回到之前的例子。给父级元素father的样式中添加overflow: hidden;：

    style.css

    div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;overflow: hidden;
}.layer01 {border: 2px red dashed;display: inline-block;float: left;
}.layer02 {border: 2px blue dashed;display: inline-block;float: left;
}.layer03 {border: 2px green dashed;display: inline-block;float: right;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right;
}
    • 查看网页效果：

    在这里插入图片描述

    • 可以观察到在我们给父级元素father的样式中添加overflow: hidden;后，父级元素边框塌陷的问题也得到了解决。（优点：简单；缺点：在有下拉列表框等内容不能被裁剪的场景中应避免使用此方法，若使用overflow: hidden;有可能导致部分溢出的内容被裁剪掉而无法展示完全）
方法四：

  • 使用::after给浮动元素的父级元素添加一个内容为空的伪元素，设置它的样式为块级元素并清除它两侧的浮动元素：（推荐使用）

    • 首先我们来了解一下什么是 CSS 伪元素::after - 它用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。补充：伪元素
    • 所以我们使用::after给浮动元素的父级元素添加一个伪元素这个方法本质上和方法二中在 HTML 中添加一个空div的原理是一样的，只不过方法四是在 CSS 中添加虚拟的块元素，而方法二是在 HTML 中添加一个真实的块元素。
    • 示例 - 使用::after给浮动元素的父级元素添加一个内容为空的伪元素，设置它的样式为块级元素并清除它两侧的浮动元素

    style.css

    div {margin: 10px;padding: 5px;
}#father {border: 2px black solid;overflow: hidden;
}/* ::after - 创建一个伪元素，作为此已选中的元素(father)的最后一个子元素 */
#father::after {content: ''; /* 设置伪元素的内容为空 */display: block; /* 设置伪元素为块级元素 */clear: both; /* 设置伪元素的左右两侧都不允许有浮动元素 */
}.layer01 {border: 2px red dashed;display: inline-block;float: left;
}.layer02 {border: 2px blue dashed;display: inline-block;float: left;
}.layer03 {border: 2px green dashed;display: inline-block;float: right;
}.layer04 {border: 2px grey dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right;
}
    • 查看网页效果：

    在这里插入图片描述

    • 可以观察到在我们使用::after给浮动元素的父级元素添加一个内容为空的伪元素，设置它的样式为块级元素并清除它两侧的浮动元素后，父级元素边框塌陷的问题也得到了解决。（除了稍微复杂一点之外，此方法没有任何弊端，推荐使用此方法）

对比：display 与 float

  • display：不可以选择元素放置的方向，标准文档流。
  • float：可以选择元素放置的方向（靠左或者靠右），浮动元素会脱离标准文档流，需要解决父级边框塌陷问题

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

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

相关文章

redis面试题二

redis面试题二

redis如何处理已过期的元素 常见的过期策略 定时删除&#xff1a;给每个键值设置一个定时删除的事件&#xff0c;比如有一个key值今天5点过期&#xff0c;那么设置一个事件5点钟去执行&#xff0c;把它数据给删除掉&#xff08;优点&#xff1a;可以及时利用内存及时清除无效数…
阅读更多...
Android之自定义时间选择弹框

Android之自定义时间选择弹框

文章目录 前言一、效果图二、实现步骤1.自定义Dialog2.xml布局3.背景白色转角drawable4.取消按钮背景drawable5.确定按钮背景drawable6.NumberPicker样式和弹框样式7.弹框动画8.Activity使用 总结 前言 随着产品人员不断变态下&#xff0c;总是会要求我们的界面高大上&#xf…
阅读更多...
DETRs Beat YOLOs on Real-time Object Detection

DETRs Beat YOLOs on Real-time Object Detection

目录 1、模型架构1.1高效混合编码器1.1.1 尺度内特征交互模块AIFI1.1.2 跨尺度特征融合CCFM 1.2IoU感知查询选择总结 DETRs在实时目标检测中击败YOLO 问题&#xff1a;DETR的高计算成本&#xff0c;实时检测效果有待提高 解决&#xff1a;提出了一个实时的目标检测器 具体来说…
阅读更多...
ChatGPT对软件测试的影响

ChatGPT对软件测试的影响

ChatGPT 是一个经过预训练的 AI 语言模型&#xff0c;可以通过聊天的方式回答问题&#xff0c;或者与人闲聊。它能处理的是文本类的信息&#xff0c;输出也只能是文字。它从我们输入的信息中获取上下文&#xff0c;结合它被训练的大模型&#xff0c;进行分析总结&#xff0c;给…
阅读更多...
前端基础3——JavaScript基础用法

前端基础3——JavaScript基础用法

文章目录 一、基本使用1.1 内部方式1.2 外部导入方式1.3 css标签调用js脚本&#xff08;触发事件&#xff09; 二、Windows对象2.1 对象属性2.2 对象方法 三、数据类型3.1 字符串处理3.2 数组处理3.3 对象处理 四、流程控制4.1 操作符4.2 if判断语句4.3 for循环语句4.4 continu…
阅读更多...
机器学习——聚类算法一

机器学习——聚类算法一

机器学习——聚类算法一 文章目录 前言一、基于numpy实现聚类二、K-Means聚类2.1. 原理2.2. 代码实现2.3. 局限性 三、层次聚类3.1. 原理3.2. 代码实现 四、DBSCAN算法4.1. 原理4.2. 代码实现 五、区别与相同点1. 区别&#xff1a;2. 相同点&#xff1a; 总结 前言 在机器学习…
阅读更多...
ASCII码 对照表

ASCII码 对照表

总256个字符元素 0&#xff5e;255 码值整数据 字符结构 字符元素(内容) 整数结构 码值整数
阅读更多...
怎么将pdf合并成一个？将pdf合并成一个的方法

怎么将pdf合并成一个？将pdf合并成一个的方法

在日常工作和学习中&#xff0c;我们经常会遇到需要将多个PDF文件合并成一个的情况。这不仅能够提高文件管理的便捷性&#xff0c;还能节省存储空间并使阅读更加流畅。那么&#xff0c;怎么将pdf合并成一个呢&#xff1f;在本文中&#xff0c;我将为您介绍几种简单实用的方法&a…
阅读更多...
无涯教程-机器学习 - 数据可视化

无涯教程-机器学习 - 数据可视化

在上一章中&#xff0c;无涯教程讨论了数据对于机器学习算法的重要性&#xff0c;以了解具有统计信息的数据&#xff0c;还有另一种称为可视化的方式来理解数据。 借助数据可视化&#xff0c;可以看到数据的属性保持什么样的关联&#xff0c;这是查看要素是否与输出相对应的最…
阅读更多...
【枚举区间+线段树】CF Ehu 152 E

【枚举区间+线段树】CF Ehu 152 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; 感觉是个套路题 对区间计数&#xff0c;按照CF惯用套路&#xff0c;枚举其中一个端点&#xff0c;对另一个端点计数 对于这道题&#xff0c;枚举右端点&#xff0c;对左端点计数 Code&#xff1a; #include &…
阅读更多...
类和对象(中)

类和对象(中)

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…
阅读更多...
Spring Cloud Gateway的快速使用

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…
阅读更多...
React 如何获取上一次 state 的值

React 如何获取上一次 state 的值

React 如何获取上一次 state 的值 一、用 ref 存储上一次的 state 类似 usePrevious function usePrevious(value) {const ref useRef();useEffect(() > {ref.current value;});return ref.current; }二、通过 setState 的入参改为函数获取
阅读更多...
【ES6】Promise.race的用法

【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例&#xff0c;包装成一个新的 Promise 实例。 const p Promise.race([p1, p2, p3]);上面代码中&#xff0c;只要p1、p2、p3之中有一个实例率先改变状态&#xff0c;p的状态就跟着改变。那个率先改变的 Promise 实例的返回值&#…
阅读更多...
知识图谱笔记：TransH

知识图谱笔记：TransH

1 TransE存在的问题 一对多 假设有一个关系 "是父亲"&#xff0c;其中一个父亲&#xff08;头实体&#xff09;可能有多个孩子&#xff08;尾实体&#xff09; 父亲 A -> 孩子 1父亲 A -> 孩子 2在 TransE 中&#xff0c;这两个关系会被建模为&#xff1a; A是…
阅读更多...
进程控制相关 API-创建进程、进程分离、进程退出、进程阻塞

进程控制相关 API-创建进程、进程分离、进程退出、进程阻塞

进程控制相关 API p.s 进程控制中的状态转换 相关 API&#xff0c;用户很少用到&#xff0c;在此不提。 一般来说&#xff0c;这些内核标准 API&#xff0c;在执行出错&#xff08;可能是资源不够、权限不够等等&#xff09;会返回负值&#xff08;比如 -1&#xff09;&#…
阅读更多...
【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

1. 用什么操作 Excel 表 Qt 的官网库中是不包含 Microsoft Excel 的操作库&#xff0c;关于对 Microsoft Excel 的操作库可选的有很多&#xff0c;包含基于 Windows 系统本身的 ActiveX、Qt Xlsx、xlsLib、LibXL、qtXLS、BasicExcel、Number Duck。 库.xls.xlsx读写平台Qt Xls…
阅读更多...
JVM的故事——类文件结构

JVM的故事——类文件结构

类文件结构 文章目录 类文件结构一、概述二、无关性基石三、Class类文件的结构 一、概述 计算机是只认由0、1组成的二进制码的&#xff0c;不过随着发展&#xff0c;我们编写的程序可以被编译成与指令集无关、平台中立的一种格式。 二、无关性基石 对于不同平台和不同平台的…
阅读更多...
docker命令学习

docker命令学习

docker vscode插件出现的问题 docker命令 docker images &#xff08;查看所有的镜像&#xff09; docker ps -a &#xff08;查看所有的容器&#xff09; docker ps &#xff08;查看运行的容器&#xff09; docker run imageID docker run --gpus all --shm-size8g -it imag…
阅读更多...
网络安全体系架构介绍

网络安全体系架构介绍

网络安全体系是一项复杂的系统工程&#xff0c;需要把安全组织体系、安全技术体系和安全管理体系等手段进行有机融合&#xff0c;构建一体化的整体安全屏障。针对网络安全防护&#xff0c;美国曾提出多个网络安全体系模型和架构&#xff0c;其中比较经典的包括PDRR模型、P2DR模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023