没错， BFC 块级格式化上下文，页面中独立的一块渲染区域，只作用于块级元素，内部的所有块级元素会按照它的一套渲染规则来排列。 如何创建BFC？...内部的 Box 会在垂直方向上一个接一个的放置 块级格式化上下文中相邻的盒子之间的垂直边距折叠 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。...BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然 BFC的作用及会产生的问题 上下margin合并 .box1{ width: 200px;...在上面的例子中我们可以看到，我们给第一个盒子设置下边距 30px ，第二个盒子上边距设置 20px ，按照理论来说，这两个盒子的实际间距应该为 30+20 也就是 50px ，但事实上是这两个盒子的距离只有...首先我们的节点是添加在 body 下的，这时候其实已经创建了 BFC 的渲染区域，然后再来看 BFC 特性第二条，块级格式化上下文中相邻的盒子之间的垂直边距折叠，也就是说这时候的上下 margin 发生了重叠
地球引擎示例 进行土地覆盖分类时的一个常见问题是采样数据中的空间自相关风险会扭曲预测结果或准确性评估。可以帮助解决此问题的一种方法是使用某种形式的缓冲确保训练和验证样本之间有足够的间隔。...Earth Engine 的一般规则是“在图像空间中可以完成的工作越多（使用图块和像素），解决方案的扩展性就越好。” 为此，本示例将通过生成指定大小的网格单元并从每个网格单元采样一个点来演示缓冲点。...下一步是在每个网格单元中随机选取一个点。这可以通过使用reduceConnectedComponents()单元格结果加上第二个随机图像来完成（仍然在图像空间中），选择每个网格单元格中的最大随机值。...我选择使用 Albers 投影，因为墨卡托和板卡雷在远离原点时都会产生距离失真，因此在这些投影中使用固定大小的网格单元更难确保最小距离保证。...如果您要为例如：k 折交叉验证采集多个样本，则每次都应该偏移网格，这样就不会对每次折叠使用完全相同的采样网格。你可以这样做： // 按投影单位中 0 到 1 之间的随机量平移投影。
折线图 4.1 数据显示 4.2 在legend中添加线条标注 4.3 调节柱状图条形宽度 4.4 去除线条锯齿 5. 柱状图 5.1 绘制不均匀的柱状图 6....折线图 1.导入数据； 2.绘图→2D折线图； 3.双击坐标轴→更改水平刻度线标签； 4.点击轴线和刻度线→上轴、右轴中主刻度和次刻度样式均设置无； 5.在网格垂直线里面设置主网格线和次网格线；...4.1 数据显示 双击需要显示数据的线条—>标签 4.2 在legend中添加线条标注 双击文本对象legend->添加图例符号 4.3 调节柱状图条形宽度 双击需要调节的柱状图->间距...比例越大，宽度越窄 4.4 去除线条锯齿 锯齿的存在会导致图线比较模糊，此时，我们可以启用抗锯齿工具，以2019版为例，在右侧工具栏最上方。 5....柱状图 5.1 绘制不均匀的柱状图 绘制柱状图时，由于数据的不均匀，往往会导致柱子与柱子之间的重叠，同时柱子间也会有很大的间隔，影响图形的美观，为此，需要重调X轴的间距，保证柱子与柱子之间间隔的一致性。
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...但是，在处理具有大量细节和子元素的组件时，这可能会变得越来越复杂。 Margin- 外部间距 它用于在一个元素和另一个元素之间添加间距。...例如，在前面的示例中，我添加了 margin-bottom: 1rem 以在两个堆叠元素之间添加垂直间距。...在 CSS 网格中，可以使用 grid-gap 属性轻松地在列和行之间添加间距。...按需差距 我真正喜欢 CSS 网格的地方是 grid-gap 仅在需要时才应用，考虑以下模型。 我有一个有两张卡片的部分。 在移动设备上，我希望间距低于第一个，而在桌面上，间距将在它们之间。
MDN 1.样式定义方式 行内样式表（inline style sheet） 直接定义在标签的style属性中。 作用范围：仅对当前标签产生影响。...作用范围：可以对同一个页面中的多个元素产生影响。...space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。...space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。...---- align-content CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
345.JPG 三、焊盘的重叠 1、焊盘(除表面贴焊盘外)的重叠，意味孔的重叠，在钻孔工序会因为在一处多次钻孔导致断钻头，导致孔的损伤。...2、多层板中两个孔重叠，如一个孔位为隔离盘，另一孔位为连接盘(花焊盘)，这样绘出底片后表现为隔离盘，造成的报废。 四、单面焊盘孔径的设置 1、单面焊盘一般不钻孔，若钻孔需标注，其孔径应设计为零。...八、PCB设计中的填充块太多或填充块用极细的线填充 1、产生光绘数据有丢失的现象，光绘数据不完全。...十、大面积网格的间距太小 组成大面积网格线同线之间的边缘太小(小于0.3mm)，在印制板制造过程中，图转工序在显完影之后容易产生很多碎膜附着在板子上，造成断线。...十二、异型孔太短 异形孔的长/宽应≥2：1，宽度应>1.0mm，否则，钻床在加工异型孔时极易断钻，造成加工困难，增加成本。 十三、图形设计不均匀 在进行图形电镀时造成镀层不均匀，影响质量。
在本文中，我将介绍有关CSS中的间距，实现此间距的不同方法以及何时使用 padding 或 margin 所需的所有知识。 间距类型 CSS中的间距有两种类型，一种在元素外部，另一种在元素内部。...例如，在上一个示例中，我添加了 margin-bottom:1rem 在两个堆叠的元素之间添加垂直间距。...网格中，可以使用 grid-gap 属性轻松在列和行之间添加间距。...用例和实际示例 在这一节中，你将回顾一下在日常工作中，你在处理CSS项目时，会遇到的不同用例。 header 组件 ? 在这种情况下，标题具有logo，导航和用户个人资料。...你能猜出CSS中的间距应该如何设置吗？好吧，让我为你添加一个骨架模型。
这种效果可以在网页中展示一组数字，并且在鼠标悬停或获得焦点时产生交互效果。我们将使用一个无序列表（ul）来容纳数字，并为每个数字创建一个列表项（li）。...整个页面采用网格布局（display: grid），并通过place-items属性将内容居中显示。 在页面背景上，我们添加了一层透明的网格线条效果。...这是通过两个线性渐变背景和一个遮罩（mask）实现的。遮罩的方向和角度以及线条的颜色可以通过修改变量来进行调整。 每个数字的样式定义在.digit类中。...数字之间的间距通过padding属性控制，并且可以根据需要进行调整。数字在获得焦点或鼠标悬停时，通过设置伪类:hover和:focus-visible的样式，实现数字的动态效果。...background属性使用两个线性渐变背景实现网格线条效果，具体的细节可以参考代码中的注释。mask属性创建了一个遮罩效果，通过线性渐变设置透明度渐变，产生一种网格线消失的效果。
数据归一化或标准化如果数据样本在特征空间中分布不均匀或者特征之间存在很大的条件数，可以尝试以下方法：将数据进行归一化或者标准化，使数据在统一的尺度下进行比较。...在机器学习中，我们通常需要将数据集划分为训练集和测试集，以便训练模型并评估其性能。然而，传统的划分方法可能会导致对模型的评估结果过于乐观或悲观，因为它们只使用了一部分数据进行评估。...然后，我们执行K次模型训练和评估，每次使用其中的K-1个折叠作为训练集，剩下的一个折叠作为测试集。最后，将K次评估的结果进行平均，得到最终的性能评估结果。...对于参数调优，我们可以在交叉验证过程中使用网格搜索等方法来搜索最佳参数组合。 在Python的scikit-learn库中，提供了方便的交叉验证功能。...你可以使用cross_val_score函数来执行交叉验证，并得到模型在不同折叠上的得分结果。另外，GridSearchCV类可以与交叉验证一起使用，进行参数调优和模型选择。
1. gap gap 属性是一种方便的方式，用于指定网格或弹性盒子项之间的间距，而无需额外的边距或填充属性。...它简化了基于网格或弹性盒子的布局的创建，通过提供一种设置网格或弹性盒子项在行和列中的间隙的简写方式。 要理解 gap 属性，让我们分别看一下它在网格和弹性盒子布局中的用法。...网格布局中的 gap 在网格布局中， gap 属性设置了网格项之间的水平和垂直间距。它允许我们通过一次声明来控制行和列之间的间隔。...Flexbox布局中的 gap 在弹性盒子布局中， gap 属性设置了沿着主轴（通常是水平方向）的弹性项目之间的间距。它简化了创建灵活且均匀间距的布局的过程。...mandatory ：容器会自动吸附到最近的吸附点，确保在滚动过程中始终处于吸附位置。 proximity ：如果滚动停止在特定的阈值内，容器会自动对齐到最近的对齐点。
按钮是一种可以让用户产生对其描述作用的交互式元素。咱们打个赌，如果一个按钮上显示“保存”，那么单击它很可能会“保存”某些内容。按钮也是任何数字产品中最重要的交互元素之一。 ?...你应该使用设定好的网格基数来设置填充和安全外间距。在上图的范例里边，左侧内部间距是垂直间距的二倍，这是提高可读性的安全选择。 间距和对齐 按钮间距不均匀是所有界面中最常见的问题之一。...仔细检查按钮表情是否在水平和垂直方向上居中。如果确实需要，可以在设计规范中设定此类的规则。 ? 除了用基于网格的方式外，我们还可以使用大写字母W来选择按钮安全距离的方法。...与平面化的按钮相比，带有阴影的按钮也可以让用户有更强的点击欲望，并且更快的注意到这个按钮。在按钮中添加一个微妙的阴影，可以让它从背景中脱颖而出。关于按钮阴影的最佳实践将在本章稍后讨论。 ?...但是，有一条简单而有用的规则，在大多数情况下都适用。 ? 根据按钮的圆角半径，我们来创建一个圆或者正方形，其大小等于按钮的高度。在这个图形中，我们创建另一个形状来容纳图标。
状态类伪类：选择元素的不同状态的样式，比如 a:hover（鼠标覆盖时）、a:focus（获得焦点时）等 结构类伪类：根据元素所处结构、位置等选择样式，比如 li:first-child（父元素中的第一个子元素...# 属性初始值 在 CSS 中，每个元素都拥有自己的初始值，并且提供了一个通用的值 initial 用于还原为属性值为其初始值。...margin: 0 auto; 外边距折叠 margin collapse：水平方向上的两个不同的 margin 值相邻，margin 值会取较大的那个 # box-sizing: border-box...# Flexibility 对于 flex 上下文中的每个元素来说，都有一定的弹性，可以在指定方向伸展或收缩。...可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
---- 在界面中 添加一个 Button 按钮组件 , 可以 调用 Component 组件的 setBounds 函数 , 手动为其设置 位置 和 大小 , 手动设置宽高大小的像素值后 , 会造成...CENTER 区域 ; 组件覆盖 : 向同一个区域添加组件 , 后放入的组件会覆盖先放入的组件 ; 八、BorderLayout 构造函数 API ---- BorderLayout 构造函数 API...组件时 , 默认的添加顺序是 从左到右 , 从上到下 ; 放置在 GridLayout 网格中的组件 , 组件的大小由网格的区域大小决定 , 默认情况下 组件会填充满所在的单个网格区域 ; 十一、GridLayout...构造函数 ---- GridLayout 构造函数 : GridLayout() : 单行网格布局 ; /** * 创建一个默认为每个组件一列的网格布局， * 在单行中。...网格包布局 的 Container 容器中 添加 Component 组件时 , 需要指定添加的 组件具体占的 网格 行列数 ; 可借助 GridBagConstaints 配置 组件 的 行列大小
这时，元素盒子的位置，由在 HTML 中的位置决定。 块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由他们的上、下外边距决定。 行内盒子是沿文本流水平排列的，也会随文本换行而换行。...在箱子尺寸（长宽高）固定的情况下，箱子四壁的厚度和填充层的厚度会压缩箱子内部用于放物品的空间。在堆放箱子时，不管箱子之间的间距（类似外边距）是多少，都不会影响箱子的可视大小。...但是它也有个会让人困惑的机制，叫做外边距折叠。所谓外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，折叠后外边距的高度等于两者中较大的那个高度。...可以在发生塌陷的父元素内添加一个空的元素，并清除浮动，这时空的元素前面会留下足够的空间来容纳浮动元素。 ?...3.3 其他布局模块 除了上面介绍的定位、浮动等，CSS 还有一些比较新的更加灵活稳健的 CSS 布局模块。如弹性盒子布局、网格布局、多栏布局、Region 后续章节会进行详细介绍。
网络单元格（Grid Cell） 在Grid布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。...网格区域（Grid Areas） 网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。...网格间距（Gutters） 网格间距是网格轨道之间的间距，可以通过grid-column-gap，grid-row-gap在Grid布局中创建。...auto-fit 与auto-fill的行为相同，只是在放置网格项后，任何空的重复轨道都会折叠。...如果我们在一个div中写几个div，再对父级设置display: grid;，从视觉的角度可以发现没什么变化。
CSS 外边距合并问题 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。...但是浮动元素脱离了当前的BFC并不影响它后面的兄弟元素，后面的兄弟元素与浮动元素前面的元素依然在同一个BFC当中，所以，它们之间的margin还是会折叠的。...margin-top的折叠，并作为间距存在于元素的margin-top的上方。...关于这个间距的计算稍微有点复杂，但实际工作中你并不需要去计算它。 3.
瀑布流布局可以适应不同的屏幕尺寸，会根据屏幕的尺寸动态调整布局的列数和子项的位置在几年前，我们要实现上述的特征的布局，往往需要借助 js的动态计算能力来实现，实现起来比较繁琐且需要考虑的场景比较多。...：使用 auto-fill，浏览器会根据容器的宽度自动填充尽可能多的列。minmax(200px, 1fr)：每列的最小宽度为 200px，最大宽度为 1fr（1 个弹性单位）。...gap属性是 row-gap 和 column-gap 两个属性的聚合。当只有一个值时，该值将同时应用于行和列之间的间距。上例中，行和列之间的间距均为 20px。...当gap属性存在两个值时，第一个值表示行之间的间距（即 row-gap）。第二个值表示列之间的间距（即 column-gap）。...grid-auto-rows 设置每行的高度，确保跨行效果的一致性。gap 设置网格项之间的间距，创建视觉分隔。grid-row 设置每个网格项跨越的行数，形成不同高度的网格项，模仿瀑布流效果。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。 产生折叠的必备条件：margin必须是邻接的!... I am text 带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。 ?...在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...创建 BFC 的新方式 使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。...不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用
因此，最常见的清除浮动的hack方案是：在容器内添加一个CSS伪元素，并将其clear属性设置为both: <!...在块级维度上元素会一个接一个排列下去，当你滚动页面时元素也会随着滚动。 当你改变元素的position属性时，通常情况下你也会设置一些偏移量来使元素相对于参照点进行一定的移动。...不同的position值会产生不同的参照点。 3.1 相对定位 如果一个元素具有属性position: relative，那么它偏移的参照位是其原先在正常文档流中的位置。...比如，3行3列会产生9个单元格。 5.2.4 网格线 划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。...5.3 容器属性 Grid 布局的属性分成两类。一类定义在容器上面，称为「容器属性」；另一类定义在项目上面，称为「项目属性」。这部分先介绍「容器属性」。
css在前端的学习中是一个绕不过去的课题，他决定如何显示的你网页内容，初学css你也许会觉得它很容易，无非就是控制元素的位置，大小，颜色等等表现层面的东西，但当你真正使用它去做一些事前的时候，往往会出现无处下抓的现象...，但是跟绝对定位区别的一点是，该元素边产生了浮动流，以至于其相邻的元素会向右或者想左靠近该元素，而不是跟绝对定位一样，相邻的元素会忽略该元素的所在位置，直接铺满整个空间。...脱离文档流设置了float属性的元素跟绝对定位一样，脱离了文档流，对于一个父元素中只有一个或多个有浮动属性的元素，父元素会产生塌陷效果，这时一定要留意不要有让父元素的高度自适应的想法：浮动实现横向导航目前浮动常见的用法便是配个...li标签来是想一个横向导航条，具体示例如下：posation [定位]posation属性在css中可以说是一个很重要的属性了，很多布局都是靠着使用该属性来对目标元素进行细致到left，right，top...relative在一个dom树中，如果每个元素都没有定位属性，那么浏览器会根据每个元素的inline / block / inline-block 属性有个一默认的位置，如果一个元素的posation属性为
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
