CSS初级教程【第四天】

news2025/2/24 6:16:55

CSS初级教程【第四天】

  • 【1】CSS 外边距
  • 【2】CSS 外边距合并
  • 【3】所有 CSS 外边距属性
  • 【4】CSS 内边距
  • 【5】内边距和元素宽度
  • 【6】所有 CSS 内边距属性
  • 【7】CSS 高度和宽度
  • 【8】设置 CSS 尺寸属性

CSS上回学习链接
CSS初级教程【第一天】
CSS初级教程【第二天】
CSS初级教程【第三天】

【1】CSS 外边距

实例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;/*外边距 指的是本元素距离可见网站体的距离，上下左右*/
  border: 1px solid #4CAF50;/*边框大小1px 实线 边框颜色*/
}
</style>
</head>
<body>

<h1>CSS 外边距</h1>
<div>本元素的外边距为 70 像素。</div>

</body>
</html>

在这里插入图片描述

【1】CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

【2】Margin - 单独的边
CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

`
auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距
`

提示：允许负值。

实例
为 < p > 元素的所有四个边设置不同的外边距：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;/*边框线条大小 实线 颜色黑色*/
  margin-top: 100px;/*外边距 顶部*/
  margin-bottom: 100px;/*外边距 底部*/
  margin-right: 150px;/*外边距 右*/
  margin-left: 80px;/*外边距 左*/
  background-color: lightblue;/*浅蓝色*/
}
</style>
</head>
<body>

<h1>使用单独的外边距属性</h1>

<div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div>

</body>
</html>

在这里插入图片描述

【3】Margin - 简写属性

为了缩减代码，可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left

工作原理是这样的：
如果 margin 属性有四个值：

margin: 25px 50px 75px 100px;
上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px

实例
margin 简写属性设置四个值：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;/*上 右 下 左*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写属性 margin - 4 个值</h1>

<div>这个 div 元素的上外边距是 25 像素，右外边距是 50 像素，下外边距是 75 像素，左外边距是 100 像素。</div>

<hr>

</body>
</html>

< hr >表示水平线
在这里插入图片描述

如果 margin 属性设置三个值：

margin: 25px 50px 75px;
上外边距是 25px
右和左外边距是 50px
下外边距是 75px

实例
使用已设置三个值的 margin 简写属性：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;/*上 左右 下*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写属性 margin - 3 个值</h1>

<div>div 元素的上外边距是 25 像素，左右外边距是 50 像素，而下外边距是 75 像素。</div>

<hr>

</body>
</html>

< hr >表示水平线
在这里插入图片描述

如果 margin 属性设置两个值：

margin: 25px 50px;
上和下外边距是 25px
右和左外边距是 50px

实例
使用设置了两个值的 margin 简写属性：
< hr >表示水平线

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;/*上下 左右*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写属性 margin - 2 个值</h1>

<div>div 元素的上下外边距是 25 像素，左右外边距是 50 像素。</div>

<hr>

</body>
</html>

在这里插入图片描述

如果 margin 属性设置了一个值：

margin: 25px;
所有四个外边距都是 25px

实例
使用设置一个值的 margin 简写属性：
< hr >表示水平线

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;/*上下左右*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写属性 margin - 1 个值</h1>

<div>div 元素的上、下、左、右外边距均为 25 像素。</div>

<hr>

</body>
</html>

在这里插入图片描述

auto 值
您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

实例
使用 margin: auto：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h1>使用 margin:auto</h1>

<p>您可以将 margin 属性设置为 auto 以自动将元素在其容器中水平居中。然后，该元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配：</p>

<div>
由于 margin: auto;，这个 div 将水平居中。
</div>

</body>
</html>

在这里插入图片描述

inherit 值

本例使 < p class=“ex1”> 元素的左外边距继承自父元素（< div>）：

实例
使用 inherit 值：
注意格式

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;/*1px 边框大小 实线 颜色红色*/
  margin-left: 100px;/*外 左边距 */
}

p.ex1 {
  margin-left: inherit;//继承 父类外 左边距
}
</style>
</head>
<body>

<h1>使用继承值</h1>
<p>左外边距继承自父元素：</p>

<!-- 先指定div, 在指定p 段落位于div内 是他的子类-->
<div>
<p class="ex1">本段落继承了 div 元素的左外边距。</p>
</div>

</body>
</html>

在这里插入图片描述

【2】CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

【1】外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

在这里插入图片描述

<html>
<head>

<style type="text/css">
* {/*通配符 * ：风格将作用于全部*/
  margin:0;/*上下左右 外边距*/
  padding:0;/*上下左右 文本缩进*/
  border:0;/*上下左右 边框边距*/
}

#d1 {/*使用 id 匹配风格*/
  width:100px; /*元素宽度*/
  height:100px;/*元素高度*/
  margin-top:20px; /*顶部 外边距*/
  margin-bottom:20px;/*底部 外边距*/
  background-color:red;/*背景颜色*/
}

#d2 {/*使用 id 匹配风格*/
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

</style>
</head>

<body>
<h1>合并的风格样式</h1>

<div id="d1">
</div>

<div id="d2">
</div>

<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
</body>
</html>

在这里插入图片描述

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
在这里插入图片描述

<html>
<head>

<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:30px;/*顶部 外边距 大 采用*/
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;/*顶部 外边距 小 不采用*/
}

</style>
</head>

<body>
<!-- 红色 蓝色方块 顶部 外边距取决于较大一方 -->
<div id="outer">
  <div id="inner">
  </div>
</div>



<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>


</body>
</html>

在这里插入图片描述

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

在这里插入图片描述

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

在这里插入图片描述
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

【3】所有 CSS 外边距属性

属性描述
margin用于在一条声明中设置外边距属性的简写属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

【4】CSS 内边距

在这里插入图片描述
【1】CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

【2】Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

提示：不允许负值。

实例
为 < div> 元素的所有四个边设置不同的内边距：

<!DOCTYPE html>
<html>
<head>
<style>
div {/*内边距 就是文本距离边框的位置*/
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h1>使用单独的内边距属性</h1>

<div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div>

</body>
</html>

在这里插入图片描述

【3】Padding - 简写属性

为了缩减代码，可以在一个属性中指定所有内边距属性。

padding 属性是以下各内边距属性的简写属性：

padding-top
padding-right
padding-bottom
padding-left

工作原理是这样的：
如果 padding 属性有四个值：

padding: 25px 50px 75px 100px;
上内边距是 25px
右内边距是 50px
下内边距是 75px
左内边距是 100px

实例
使用设置了四个值的 padding 简写属性：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写的内边距属性 - 4 个值</h1>

<div>这个 div 元素的上内边距是 25px，右内边距是 50px，下内边距是 75px，而左内边距是 100px。</div>

</body>
</html>

在这里插入图片描述

如果 padding 属性设置了三个值：

padding: 25px 50px 75px;
上内边距是 25px
右和左内边距是 50px
下内边距是 75px

实例
使用设置了三个值的 padding 简写属性：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写的内边距属性 - 3 个值</h1>

<div>这个 div 元素的上内边距是 25px，左右内边距是 50px，下内边距是 75px。</div>

</body>
</html>

在这里插入图片描述

如果 padding 属性设置了两个值：

padding: 25px 50px;
上和下内边距是 25px
右和左内边距是 50px

实例
使用设置了两个值的 padding 简写属性：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写的内边距属性 - 2 个值</h1>

<div>这个 div 元素的上、下内边距为 25 像素，左、右内边距为 50 像素。</div>

</body>
</html>

在这里插入图片描述

如果 padding 属性设置了一个值：

padding: 25px;
所有四个内边距都是 25px

实例
使用设置了一个值的 padding 简写属性：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>简写的内边距属性 - 1 个值</h1>

<div>这个 div 元素的上、下、左、右内边距均为 25 像素。</div>

</body>
</html>

在这里插入图片描述

【5】内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

实例
在这里，< div> 元素的宽度为 300px。但是，< div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）：

代表换行 < br >

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;/*元素宽度*/
  padding: 25px;/*上下左右内边距*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>内边距和元素宽度</h1>

<div class="ex1">这个 div 是 300 像素宽。</div>
<br>

<div class="ex2">这个 div 是 350 像素宽，即使在 CSS 中它被定义为 300 像素。</div>

</body>
</html>

在这里插入图片描述

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing
属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

实例
使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：

box-sizing: border-box;

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;/*盒子大小 边框盒子 大小固定为300px*/
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>内边距和元素宽度 - 设置  box-sizing</h1>

<div class="ex1">这个 div 是 300 像素宽。</div>
<br>

<div class="ex2">div 的宽度保持在 300 像素，尽管总的左右内边距为 50 像素，因为设置了 box-sizing: border-box 属性。</div>

</body>
</html>

在这里插入图片描述

【6】所有 CSS 内边距属性

属性描述
padding用于在一条声明中设置所有内边距属性的简写属性。
padding-bottom设置元素的下内边距。
padding-left设置元素的左内边距。
padding-right设置元素的右内边距。
padding-top设置元素的上内边距。

【7】CSS 高度和宽度

在这里插入图片描述
【1】CSS 设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。
它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

【2】CSS 高度和宽度值
height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

CSS 高度和宽度实例
在这里插入图片描述
实例
设置 < div> 元素的高度和宽度：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;/*背景色 粉蓝色*/
}
</style>
</head>
<body>

<h1>设置元素的高度和宽度</h1>

<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>

<div></div>

</body>
</html>

在这里插入图片描述

实例
设置另一个 < div> 元素的高度和宽度：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h1>设置元素的高度和宽度</h1>

<p>这个 div 元素的高度为 100 像素，宽度为 500 像素：</p>

<div></div>

</body>
</html>

在这里插入图片描述

注意：请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

【3】设置 max-width

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 < div> 的问题。然后，浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

提示：将浏览器窗口拖动到小于500px的宽度，以查看两个 div 之间的区别！
在这里插入图片描述
此元素的高度为 100 像素，最大宽度为 500 像素。
注释：max-width 属性的值将覆盖 width（宽度）。

实例
这个 < div> 元素的高度为 100 像素，最大宽度为 500 像素：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h1>设置元素的最大宽度</h1>

<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>

<div></div>

<p>请调整浏览器窗口来查看效果。</p>

</body>
</html>

在这里插入图片描述

【8】设置 CSS 尺寸属性

属性描述
height设置元素的高度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

在这里插入图片描述

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

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

相关文章

windows本地安装openjdk环境

windows本地安装openjdk环境

1讲一下为什么要选openjdk 先讲一下为什么小编在这里选择openjdk&#xff0c;而不是像绝大多数人一样选择jdk。那是因为&#xff0c;jdk在1.8的某个版本之后&#xff0c;就不是免费的版本了&#xff0c;不能免费用于商用。有过工作经验的就知道&#xff0c;公司一般对电脑上安装…
阅读更多...
掌握这17张图，没人比你更懂RecyclerView的预加载

掌握这17张图，没人比你更懂RecyclerView的预加载

回顾上一篇文章&#xff0c;我们为了减少描述问题的维度&#xff0c;于演示之前附加了许多限制条件&#xff0c;比如禁用了RecyclerView的预拉取机制。 实际上&#xff0c;预拉取(prefetch)机制作为RecyclerView的重要特性之一&#xff0c;常常与缓存复用机制一起配合使用、共…
阅读更多...
Go语言设计与实现 -- Mutex源码剖析

Go语言设计与实现 -- Mutex源码剖析

上图来自面向信仰编程 上图中&#xff0c;第一列为常见的同步原语&#xff0c;第二列为容器&#xff0c;第三列为互斥锁。 接下来我们来逐一介绍一下&#xff1a; Mutex 我们先来看一下sync.Mutex的结构体&#xff1a; type Mutex struct {// 当前互斥锁的状态state int32…
阅读更多...
代码随想录算法训练营第一天 java : 704.二分查找法、27.移除算法

代码随想录算法训练营第一天 java : 704.二分查找法、27.移除算法

文章目录Leecode 704.二分查找题目连接&#xff1a;[Leecode 704.二分查找](https://leetcode.cn/problems/remove-element/)遇到的问题题目二分法的第一种写法 &#xff08;左闭右闭)第二种解法&#xff08;左闭右开 代码呈现&#xff09;Leecode 27.移除元素题目链接&#xf…
阅读更多...
MyBatis【创建与使用】

MyBatis【创建与使用】

MyBatis【创建与使用】&#x1f34e;一. MyBatis&#x1f352;1.1. MyBatis 是什么&#xff1f;&#x1f352;1.2 没有使用MyBatis时的操作流程&#x1f352;1.3 MyBatis的操作与数据库之间的流程&#x1f34e;二.创建MyBatis项目&#x1f352;2.1 idea创建&#x1f352;2.2 配…
阅读更多...
【Git】一文带你入门Git分布式版本控制系统（撤销修改、删除文件）

【Git】一文带你入门Git分布式版本控制系统（撤销修改、删除文件）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…
阅读更多...
Debezium故障演练

Debezium故障演练

1、搭建演练环境 postgresql及wal2json插件安装:https://blog.csdn.net/li281037846/article/details/128411222 kafka及kafka-connect安装&#xff0c;略 //添加debezium connector curl -i -X POST -H "Content-Type:application/json" -H "Accepted:applic…
阅读更多...
Qt样式（qss）使用小结（软件换肤，比如暗黑模式）

Qt样式（qss）使用小结（软件换肤，比如暗黑模式）

1.背景&#xff1a; Qt style sheet&#xff08;qss&#xff09;跟前端技术一样&#xff0c;就是为了美化界面。关键是&#xff0c;太好用了。之前还为此写过一篇博客。 Qt样式&#xff08;qss&#xff09;手册小结_大橘的博客-CSDN博客 其中主要是记录如何获取手册细节。 …
阅读更多...
6、GPIO输入按键检测（轮询检测）

6、GPIO输入按键检测（轮询检测）

目录 0x01、简介 0x02、硬件设计 0x03、编写函数 0x001、按键初始化 0x002、按键检测 0x003、按键led翻转 0x04、源程序下载地址 0x01、简介 本次实验主要实现按键控制LED灯。 由于机械按键在按下和抬起的时候会产生按键抖动&#xff0c;所以在设计的时候需要考虑如何消除抖…
阅读更多...
Pytorch可视化特征图（代码 亲测可用）

Pytorch可视化特征图（代码 亲测可用）

2013年Zeiler和Fergus发表的《Visualizing and Understanding Convolutional Networks》 早期LeCun 1998年的文章《Gradient-Based Learning Applied to Document Recognition》中的一张图也非常精彩&#xff0c;个人觉得比Zeiler 2013年的文章更能给人以启发。从下图的F6特征&…
阅读更多...
会议OA项目-首页

会议OA项目-首页

目录一、Flex布局简介什么是flex布局&#xff1f;flex属性学习地址&#xff1a;案例演示二、轮播图组件及mockjs三、会议OA小程序首页布局一、Flex布局简介 布局的传统解决方案&#xff0c;基于盒状模型&#xff0c;依赖 display属性 position属性 float属性 什么是flex布局…
阅读更多...
简单有效的Mac内存清理方法，不用收藏也能记住

简单有效的Mac内存清理方法，不用收藏也能记住

Mac电脑使用的时间越久&#xff0c;系统的运行就会变的越卡顿&#xff0c;这是Mac os会出现的正常现象&#xff0c;卡顿的原因主要是系统缓存文件占用了较多的磁盘空间&#xff0c;或者Mac的内存空间已满。如果你的Mac运行速度变慢&#xff0c;很有可能是因为磁盘内存被过度占用…
阅读更多...
如何理解并记忆DataFrame中的Axis参数

如何理解并记忆DataFrame中的Axis参数

当我们遇到有axis参数的方法时&#xff0c;脑子里的第一反应应该是&#xff1a;这个方法一定是沿着某一方向进行某种“聚合”或者“过滤”操作。在此场景下&#xff0c;Axis参数就是用来设定操作方向的&#xff1a;是垂直方向还是水平方向&#xff1f; axis0: 一行一行推进&…
阅读更多...
【微服务架构实战】第1篇之API网关概述

【微服务架构实战】第1篇之API网关概述

1.网关概述 采用分布式、微服务的架构模式开发系统时&#xff0c;API 网关是整个系统中必不可少的一环。 1.1 没有网关会有什么问题&#xff1f; 在微服务架构模式下&#xff0c;1个系统会被拆分成多个微服务&#xff0c;如果每个微服务都直接暴露给调用方&#xff0c;会有以…
阅读更多...
MySQL主键和唯一键的区别

MySQL主键和唯一键的区别

主键和唯一键基本知识参考这篇文章 MySQL表的约束 &#xff0c;本篇文章主要是谈一谈主键和唯一键的区别从而更好的理解唯一键和主键。 在上篇文章中已经提到 主键&#xff1a; primary key 用来唯一的约束该字段里面的数据&#xff0c;不能重复&#xff0c;不能为空&#x…
阅读更多...
vue父页面调用子页面及方法及传参，鼠标光标定位

vue父页面调用子页面及方法及传参，鼠标光标定位

项目场景&#xff1a; vue父页面调用子页面及方法 问题描述 vue中父界面调用子界面及方法时界面可以调用&#xff0c;但是调用方法的时候第一次报错&#xff0c;但是关掉界面再次重新打开就没问题了 原因分析&#xff1a; 在我之前添加鼠标指针定位的时候&#xff0c;如果在…
阅读更多...
记录scoped属性的使用和引发的问题

记录scoped属性的使用和引发的问题

背景 在对表格数据进行样式处理时&#xff0c;通过业务逻辑判断&#xff0c;进行对符合要求的表格填充背景色&#xff0c;没有符合预期的效果。反复排查校验代码和判断逻辑&#xff0c;都没有什么问题&#xff0c;可能还是样式上出现问题。再通过F12 选取元素对表格设置背景色时…
阅读更多...
获取树形结构中，父节点下所有子/孙节点（递归方式）

获取树形结构中，父节点下所有子/孙节点（递归方式）

获取树形结构中&#xff0c;父节点下所有子/孙节点&#xff08;递归方式&#xff09;1 树形结构&#xff08;TreeItem类&#xff09;2 测试代码&#xff08;main函数&#xff09;3 运行效果1 树形结构&#xff08;TreeItem类&#xff09; 这里通用型树形结构为TreeItem类&…
阅读更多...
初学Java web(七)RequestResponse

初学Java web(七)RequestResponse

Request&Response Request:获取请求数据 Response:设置响应数据 一.Request对象 1.Request继承体系 Tomcat需要解析请求数据&#xff0c;封装为requestx对象并且创建requestx对象传递到service方法中 使用request对象&#xff0c;查阅JavaEE API文档的HttpServletReque…
阅读更多...
rocketMq架构原理精华分析（一）

rocketMq架构原理精华分析（一）

rocketMq架构原理精华分析是我们这篇文章的核心&#xff0c;从消息中间件的对比、架构模型、消息模型、常见问题等逐一分析&#xff1a; 一、中间件对比&#xff1a; RabbitMq 集群效果不太好&#xff0c;底层不是java 语言&#xff0c;研究原理比较困难&#xff1b; Kafka是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023