21.6 CSS 弹性布局

news2024/11/18 17:23:20

image-20231007121635888

1. 弹性盒子

CSS弹性盒子(Flexbox)是一种布局模型, 用于创建灵活的, 自适应的网页布局.
它的目的是在不同屏幕尺寸和设备上实现一致的布局效果.

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列, 对齐和分配空白空间.

弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器.

弹性盒子由容器(flex container)和其内部的项目(flex items)组成.
弹性容器内包含了一个或多个弹性子元素.

注意事项: 
* 1. 弹性容器外及弹性子元素内是正常渲染的.
* 2. 弹性盒子只定义了弹性子元素如何在弹性容器内布局.
* 3. 弹性子元素通常在弹性盒子内一行显示.
* 4. 默认情况每个容器只有一行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>创建盒子</title>
    <style>
        .flex-container {
            display: flex;
            height: 250px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

image-20231006210713181

2. 盒子排列方式

2.1 排列方式1

可以设置容器的direction属性, 指定弹性容器中子元素的排列方式.
常用属性值:
* 1. ltr(left-to-right): 从左到右的方式排列(默认).
* 2. rtl(right-to-left): 从右到左的方式排列.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>排序方式</title>
    <style>
        .flex-container {
            display: flex;
            height: 250px;
            background-color: #2b2b2d;
            direction: rtl;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

image-20231006211434118

2.2 排列方式2

可以设置容器的flex-direction属性, 指定弹性子元素在父容器排列方式.

常用属性值:
* 1. row: 横向从左到右排列(左对齐), 默认的排列方式.
* 2. row-reverse: 反转横向排列(右对齐), 从后往前排, 最后一项排在最前面.
* 3. column: 纵向排列.
* 4. column-reverse: 反转纵向排列, 从后往前排, 最后一项排在最上面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>排序方式2</title>
    <style>
        .flex-container {
            display: flex;
            height: 150px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 30px;
            margin: 10px;
        }

        .row {
            flex-direction: row;
        }

        .row-reverse {
            flex-direction: row-reverse;
        }

        .column {
            flex-direction: column;
        }

        .column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>

<div class="flex-container row">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container row-reverse">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container column">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container column-reverse">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

image-20231006212838689

3.盒子对齐方式

3.1 水平对齐方式

可以通过容器的justify-content属性, 设置弹性盒子元素在主轴(横轴)方向上的对齐方式.

常用属性值:
* 1. flex-start: 弹性项目向行头紧挨着填充(默认).
     第一个弹性项的main-start外边距边线被放置在该行的main-start边线, 而后续弹性项依次平齐摆放.

* 2. flex-end: 弹性项目向行尾紧挨着填充.
     第一个弹性项的main-end外边距边线被放置在该行的main-end边线, 而后续弹性项依次平齐摆放.

* 3. center: 弹性项目居中紧挨着填充.
     如果剩余的自由空间是负的, 则弹性项目将在两个方向上同时溢出.

* 4. space-between: 弹性项目平均分布在该行上.
     如果剩余空间为负或者只有一个弹性项, 则该值等同于flex-start.
     否则, 第1个弹性项的外边距和行的main-start边线对齐, 而最后1个弹性项的外边距和行的main-end边线对齐,
     然后剩余的弹性项分布在该行上, 相邻项目的间隔相等.

* 5. space-around: 弹性项目平均分布在该行上, 两边留有一半的间隔空间.
     如果剩余空间为负或者只有一个弹性项, 则该值等同于center.
     否则, 弹性项目沿该行分布, 且彼此间隔相等(比如是20px), 同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>对齐方式</title>
    <style>
        .flex-container {
            display: flex;
            height: 60px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 30px;
            margin: 10px;
        }

        .flex-start {
            justify-content: flex-start;
        }

        .center {
            justify-content: center;
        }

        .flex-end {
            justify-content: flex-end;
        }

        .space-between {
            justify-content: space-between;
        }

        .space-around {
            justify-content: space-around;
        }
    </style>
</head>
<body>

<div class="flex-container flex-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container flex-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container space-between">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container space-around">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

</body>
</html>

image-20231006224437645

3.2 垂直对齐方式

可以通过容器的align-items属性, 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式.

常用属性值:
* 1. flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界.
* 2. flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界.
* 3. center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置. 
     如果该行的尺寸小于弹性盒子元素的尺寸, 则会向两个方向溢出相同的长度.
* 4. baseline: 如弹性盒子元素的行内轴与侧轴为同一条, 则该值与'flex-start'等效.
     其它情况下, 该值将参与基线对齐.
* 5. stretch: 如果指定侧轴大小的属性值为'auto', 则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,
     但同时会遵照'min/max-width/height'属性的限制.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>垂直对齐方式</title>
    <style>
        .flex-container {
            display: flex;
            height: 150px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 30px;
            margin: 10px;
        }

        .flex-start {
            align-items: flex-start;
        }

        .center {
            align-items: center;
        }

        .flex-end {
            align-items: flex-end;
        }

        .baseline {
            align-items: baseline;
        }

        .stretch {
            align-items: stretch;
        }
    </style>
</head>
<body>

<div class="flex-container flex-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container flex-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container baseline">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>
<br>
<div class="flex-container stretch">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

</body>
</html>

image-20231006224501190

4. 换行方式

可以通过容器的flex-wrap属性, 设置弹性盒子的子元素超出父容器时是否换行.

常用属性值:
* 1. nowrap: 默认, 弹性容器为单行.
     该情况下弹性子项可能会溢出容器.
     
* 2. wrap: 弹性容器为多行.
     该情况下弹性子项溢出的部分会被放置到新行, 子项内部会发生断行.
     
* 3. wrap-reverse: 反转wrap排列.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>换行方式</title>
    <style>
        .flex-container {
            display: flex;
            width: 300px;
            height: 250px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .nowrap {
            flex-wrap: nowrap;
        }

        .wrap {
            flex-wrap: wrap;
        }

        .wrap-reverse {
            flex-wrap: wrap-reverse;
        }

    </style>
</head>
<body>
<div>
    <div class="flex-container nowrap">
        <div class="flex-item"> flex item 1</div>
        <div class="flex-item"> flex item 2</div>
        <div class="flex-item"> flex item 3</div>
    </div>
</div>

<br>
<div class="flex-container wrap">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
<br>
<div class="flex-container wrap-reverse">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
</body>
</html>

image-20231006231931371

5. 多行对齐方式

可以通过容器的align-content属性, 控制多行弹性容器内各行的对齐方式(修改flex-wrap属性的行为).

常用属性值:
* 1. flex-start: 各行集中在弹性容器的起始位置.
* 2. flex-end: 各行集中在弹性容器的末尾位置.
* 3. center: 各行集中在弹性容器的垂直中心位置.
* 4. space-between: 各行之间均匀分布, 首行对齐弹性容器的起始位置, 末行对齐弹性容器的末尾位置.
* 5. space-around: 各行之间均匀分布, 包括首行和末行, 行与行之间的空白空间相等.
* 6. stretch: 如果子项没有设置高度, 则将行拉伸以填充整个行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>多行对齐方式</title>
    <style>
        .flex-container {
            display: flex;
            width: 200px;
            height: 220px;
            background-color: #2b2b2d;
            flex-wrap: wrap;
        }

        .flex-item {
            background-color: #00fbff;
            width: 50px;
            height: 50px;
            margin: 10px;
        }

        .flex-start {
            align-content: flex-start;
        }


        .center {
            align-content: center;
        }

        .flex-end {
            align-content: flex-end;
        }

        .space-between {
            align-content: space-between;
        }

        .space-around {
            align-content: space-around;
        }

    </style>
</head>
<body>
<div>
    <div class="flex-container">
        <div class="flex-item"> flex item 1</div>
        <div class="flex-item"> flex item 2</div>
        <div class="flex-item"> flex item 3</div>
    </div>
</div>
<br>

<div class="flex-container flex-start">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
<br>

<div class="flex-container center">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
<br>

<div class="flex-container flex-end">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
<br>

<div class="flex-container space-between">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>
<br>

<div class="flex-container space-around">
    <div class="flex-item"> flex item 1</div>
    <div class="flex-item"> flex item 2</div>
    <div class="flex-item"> flex item 3</div>
</div>

</body>
</html>

image-20231007003507801

6. 项目次序

可以通过容器子元素的的order属性, 设置弹性容器内弹性子元素的排序.
属性值: <integer>: 用整数值来定义排列顺序, 数值小的排在前面. 可以为负值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目次序</title>
    <style>
        .flex-container {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: #00fbff;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .order-0 {
            order: 0;
        }

        .order-1 {
            order: 1;
        }

        .order-2 {
            order: 2;
        }
    </style>
</head>
<body>
<div>
    <div class="flex-container">
        <div class="flex-item order-2"> flex item 1</div>
        <div class="flex-item order-1"> flex item 2</div>
        <div class="flex-item order-0"> flex item 3</div>
    </div>
</div>
</body>
</html>

image-20231007004321070

7. 项目对齐

7.1 外间距对齐方式

可以为容器子元素设置margin外间距属性, 控制子项的显示位置.

常用设置方式:
* 1. margin-light: auto;  右边距设置为最大值.
* 2. margin-left: auto;   左边距设置为最大值.
* 3. margin-top: auto;    上边距设置为最大值.
* 4. margin-button: auto; 下边距设置为最大值.
* 5. margin: 0 auto;  水平居中.
* 6. margin: auto 0;  垂直居中.
* 7. margin: auto;  完全居中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目对齐</title>
    <style>
        .flex-container {
            display: flex;

            height: 250px;
            background-color: lightgrey;
        }

        .flex-item {
            background-color: cornflowerblue;
            width: 75px;
            height: 75px;
            margin: 10px;
        }

        .flex-item {
            margin: auto;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
</div>

</body>
</html>

image-20231007113606125

7.2 垂直对齐方式

可以通过容器子元素的的align-self属性, 设置弹性元素自身在侧轴(纵轴)方向上的对齐方式.

常用属性值:
* 1. auto: 如果'align-self'的值为'auto';
     则其计算值为元素的父元素的'align-items'值, 如果其没有父元素, 则计算值为'stretch'.
     
* 2. flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界.

* 3. center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置.
     如果该行的尺寸小于弹性盒子元素的尺寸, 则会向两个方向溢出相同的长度.
     
* 4. flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界.

* 5. baseline: 如弹性盒子元素的行内轴与侧轴为同一条, 则该值与'flex-start'等效.
     其它情况下, 该值将参与基线对齐.
     
* 6. stretch: 如果指定侧轴大小的属性值为'auto';
     则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸, 但同时会遵照'min/max-width/height'属性的限制.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>垂直对齐</title>
    <style>
        .flex-container {
            display: flex;
            height: 250px;
            background-color: #2b2b2d;
        }

        .flex-item {
            background-color: cornflowerblue;
            width: 60px;
            min-height: 100px;
            margin-right: auto;
        }

        .flex-start {
            align-self: flex-start;
        }

        .center {
            align-self: center;
        }

        .flex-end {
            align-self: flex-end;
        }


        .baseline {
            align-self: baseline;
        }

        .stretch {
            align-self: stretch;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item flex-start">flex-start</div>
    <div class="flex-item center">flex-end</div>
    <div class="flex-item flex-end">center</div>
    <div class="flex-item baseline">baseline</div>
    <div class="flex-item stretch">stretch</div>
</div>
</body>
</html>

image-20231007114642411

8. 分配空间

可以通过容器子元素的的flex属性, 指定弹性子元素如何分配空间.

常用属性值:
* 1. auto: 计算值为: 1 1 auto, 表示弹性子元素可以根据需要自动扩展或收缩, 并且基准值为自动.
* 2. initial: 计算值为: 0 1 auto, 表示弹性子元素不扩展, 可以收缩, 并且基准值为自动.
* 3. none: 计算值为: 0 0 auto, 表示弹性子元素不扩展, 也不收缩, 并且基准值为自动.
* 4. inherit: 从父元素继承该属性的值.
* 5. [flex-grow]:   定义弹性子元素的扩展比率, 用于指定弹性子元素在剩余空间中的相对大小.
* 6. [flex-shrink]: 定义弹性子元素的收缩比率, 用于指定弹性子元素在空间不足时的相对缩小程度.
* 7. [flex-basis]:  定义弹性子元素的默认基准值, 用于指定弹性子元素在没有剩余空间时的大小.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分配空间</title>
    <style>
        .flex-container {
            display: flex;
            height: 250px;
            background-color: lightgrey;
        }

        .flex-item {
            background-color: cornflowerblue;
            margin: 10px;
        }

        /* 2/4 */
        .flex-2 {
            flex: 2;
        }

        /* 1/4 */
        .flex-1 {
            flex: 1;
        }


    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item flex-2">flex item 1</div>
    <div class="flex-item flex-1">flex item 2</div>
    <div class="flex-item flex-1">flex item 3</div>
</div>

</body>
</html>

image-20231007115649231

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

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

相关文章

c++视觉图像线性混合

c++视觉图像线性混合

图像线性混合 使用 cv::addWeighted() 函数对两幅图像进行线性混合。alpha 和 beta 是两幅图像的权重&#xff0c;它们之和应该等于1。gamma 是一个可选的增益&#xff0c;这里设置为0。 你可以通过调整 alpha 的值来改变混合比例。如果 alpha0.5&#xff0c;则两幅图像等权重…
阅读更多...
扬尘在线监测是什么？如何实现？

扬尘在线监测是什么？如何实现？

扬尘在线监测技术是一种针对扬尘污染问题的环境监测技术&#xff0c;它通过实时监测和数据分析&#xff0c;为管理者提供准确及时的信息&#xff0c;以便他们可以采取有效的控制措施来减少扬尘污染对空气质量和人们健康的影响。 扬尘在线监测系统通常由传感器、数据采集仪器、…
阅读更多...
SpringBoot项目：Cannot find declaration to go to

SpringBoot项目：Cannot find declaration to go to

SpringBoot项目get,set方法总报Cannot find declaration to go to 搜了很多答案&#xff0c;没解决 后来仔细一想&#xff0c;原来是我的idea软件重装了&#xff0c;lombok插件没重新安装导致。 安装步骤&#xff1a; 1、下载地址&#xff1a;https://plugins.jetbrains.com…
阅读更多...
12P2532X152 KJ3222X1-BA1 CE4003S2B1 EMERSON DELTAV

12P2532X152 KJ3222X1-BA1 CE4003S2B1 EMERSON DELTAV

12P2532X152 KJ3222X1-BA1 CE4003S2B1 EMERSON DELTAV 除了标准的实时计算、通信和控制&#xff0c;边缘设备和关键网络应用的fog通常执行人工智能(AI)、虚拟现实(VR)和增强现实(AR)解决方案。 目前&#xff0c;制药商和医疗保健机构对它们的需求快速增长&#xff0c;因为它们…
阅读更多...
el-table进阶（每条数据分行或合并）

el-table进阶（每条数据分行或合并）

最麻烦的还是css样式&#xff0c;表格样式自己调吧 <!-- ——————————————————————————————————根据数据拓展表格—————————————————————————————————— --> <div style"display: flex"&…
阅读更多...
SAP从入门到放弃系列之QM检验方法（Inspection Method）

SAP从入门到放弃系列之QM检验方法（Inspection Method）

概述 检验方法描述了如何对检验特征执行检验。 QS21-创建主检验特征时&#xff0c;可以对主检验特征可以分配多种检验方法。关于创建主检验特征详见&#xff1a;SAP从入门到放弃系列之QM主检验特征 当任务清单中包含主检验特征时&#xff0c;将为任务清单中的特征选择特定的…
阅读更多...
vue3 -- 封装 Turf.js地图常用方法

vue3 -- 封装 Turf.js地图常用方法

Turf.js中文网 地理空间分析库，处理各种地图算法 文档地址 安装 Turf 库 npm install @turf/turf创建src/hooks/useTurf.ts 文件1：获取线中心点 效果： 代码： useTurf.ts import * as turf from @turf/turf// 获取线中心点 export class CenterPointOfLine {
阅读更多...
Linux系列讲解 —— 【fsck】检查并修复Linux文件系统

Linux系列讲解 —— 【fsck】检查并修复Linux文件系统

当文件系统出现损坏时&#xff0c;例如文件无法查看&#xff0c;删除等&#xff0c;可以使用 fsck&#xff08;File System Consistency Check&#xff09;进行修复。但是需要注意fsck在修复时&#xff0c;如果检查出某个文件有问题&#xff0c;可能会向用户请求删除。所以&…
阅读更多...
分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey 摘要一、介绍二、基础知识回顾2.1 强化学习2.2 分层强化学习2.2.1 子任务符号2.2.2 基于半马尔可夫决策过程的HRL符号 2.3 通用项定义 三、分层强化学习方法3.1 学习分层策略 (LHP)3.1…
阅读更多...
赴日IT 35岁以上程序员能申请日本技术人文签证吗？

赴日IT 35岁以上程序员能申请日本技术人文签证吗？

我们都知道&#xff0c;要想去日本工作&#xff0c;必须要办理签证&#xff0c;日本人文技术国际业务签证就是一个非常好的签证种类。那么办理此类签证需要满足哪些要求呢&#xff1f; 年龄上其实比较推荐的是25-35岁这个年龄阶段&#xff0c;因为这个年龄段通常在日语能力和工…
阅读更多...
抖音账号矩阵系统开发源码----技术研发

抖音账号矩阵系统开发源码----技术研发

一、技术自研框架开发背景&#xff1a; 抖音账号矩阵系统是一种基于数据分析和管理的全新平台&#xff0c;能够帮助用户更好地管理、扩展和营销抖音账号。 抖音账号矩阵系统开发源码 部分源码分享&#xff1a; ic function indexAction() { //面包屑 $breadc…
阅读更多...
elasticsearch内存占用详细分析

elasticsearch内存占用详细分析

内存占用 ES的JVM heap按使用场景分为可GC部分和常驻部分。 可GC部分内存会随着GC操作而被回收&#xff1b; 常驻部分不会被GC&#xff0c;通常使用LRU策略来进行淘汰&#xff1b; 内存占用情况如下图&#xff1a; common space 包括了indexing buffer和其他ES运行需要的clas…
阅读更多...
添加/查看/清空购物车 -----苍穹外卖day7

添加/查看/清空购物车 -----苍穹外卖day7

1.添加购物车 产品原型 接口设计 新增类使用post 需求分析 数据库查询过程中设计了冗余字段&#xff0c;意义在于提高查询速度&#xff0c;不用和菜品表中去连接查询&#xff0c;直接查询购物车表。但是冗余字段必须相对稳定不能经常变化 代码开发 在使用DTO与实体类交接的…
阅读更多...
国科大体系结构习题 | 第三章 二进制与逻辑电路

国科大体系结构习题 | 第三章 二进制与逻辑电路

第三章 Q1: A1:(1) 原码&#xff1a; [ − ( 2 63 − 1 &#xff0c; 2 63 − 1 ] [-(2^{63}-1&#xff0c;2^{63}-1] [−(263−1&#xff0c;263−1] 补码&#xff1a; [ − ( 2 63 &#xff0c; 2 63 − 1 ] [-(2^{63}&#xff0c;2^{63}-1] [−(263&#xff0c;263−1] …
阅读更多...
flex 布局：元素对齐

flex 布局：元素对齐

前言 略 使用flex的align-items属性控制元素对齐 上下对齐并铺满 <view class"more">展开更多<text class"iconfont20231007 icon-zhankai"></text></view>.more {display: flex;flex-direction: row;color: #636363;justify-co…
阅读更多...
12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller 我们提供三种不同类别的EDGEBoost I/O模块供选择&#xff0c;以实现最大程度的I/O定制: 数字和模拟输入/输出网络和连接边缘人工智能和存储 利用EDGEBoost I/O实现变革性技术 EBIO-2M2BK EBIO-2M2BK载板支持…
阅读更多...
IGH码云克隆包

IGH码云克隆包

1.gitlab仓库比较慢 该开源包是由德国的团队维护在gitlab上的&#xff0c;但是在国内下载的比较慢&#xff0c;时常打不开。故而把这个包通过码云克隆了一遍。 地址如下&#xff1a; ​​​​​​​ethercat-igh: 这个是gitlab上比较新的仓库&#xff0c;因为从原地址一直无法…
阅读更多...
SAP从入门到放弃系列之QM物料规范（Material Specification-物料说明）

SAP从入门到放弃系列之QM物料规范（Material Specification-物料说明）

目录 一、概述1.1 物料规范的结构1.2 物料规范的使用 二、操作2.1、物料主数据设置2.2、物料说明创建2.3 效果 一、概述 Material Specification-可以翻译为物料说明或者物料规格或物料规范&#xff0c;物料的检验相对简单的时候也可以在系统中使用物料规范&#xff0c;相对于…
阅读更多...
Leetcode901-股票价格跨度

Leetcode901-股票价格跨度

一、前言 本题基于leetcode901股票价格趋势这道题&#xff0c;说一下通过java解决的一些方法。并且解释一下笔者写这道题之前的想法和一些自己遇到的错误。需要注意的是&#xff0c;该题最多调用 next 方法 10^4 次,一般出现该提示说明需要注意时间复杂度。 二、解决思路 ①…
阅读更多...
苹果手机的祛魅时刻，国产厂商的颠覆征程

苹果手机的祛魅时刻，国产厂商的颠覆征程

“iPhone翻车了&#xff1f;”有网友如此质疑。 发布未满一个月&#xff0c;iPhone 15系列多次因负面问题登上热搜。 首先曝出钛金属边框容易沾染指纹的情况&#xff0c;尚未涉及功能性方面&#xff0c;但后续接连曝出发热严重、电池循环次数低、外放破音、Wi-Fi链接缓慢的问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023