首页 > 其他分享 >盒子模型

盒子模型

时间:2023-12-30 20:46:33浏览次数:27  
标签:盒子 margin 模型 边框 padding width border

目录


页面布局要学习三大核心:盒子模型、浮动 和 定位。

学习好盒子模型能非常好的帮助我们布局页面。

网页布局的本质

网页布局的核心本质: 就是利用 CSS 摆盒子。

  • 网页布局过程:

1.先准备好相关的网页元素,网页元素基本都是盒子 Box 。
2.利用 CSS 设置好盒子样式,然后摆放到相应位置。
3.往盒子里面装内容

盒子模型(Box Model)组成

盒子模型:把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框外边距内边距实际内容

边框(border)

边框的使用

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色

border : border-width || border-style || border-color; 
属性 作用
border-width 定义边框粗细,单位:px
border-style 边框的样式
border-color 边框颜色

CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框样式 border-style 可以设置如下值:

属性 说明
none 没有边框即忽略所有边框的宽度(默认值)
solid 边框为单实线(最为常用的)
dashed 边框为虚线
dotted 边框为点线
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子模型之边框</title>
        <style>
            div {
                width: 300px;
                height: 200px;
                /* border-width 边框的粗细  一般情况下都用 px */
                border-width: 5px;
                /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
                border-style: solid;
                /* border-style: dashed; */
                /* border-style: dotted; */
                /* border-color 边框的颜色  */
                border-color: pink;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

边框的合写分写

边框简写:

border: 1px solid red;

边框分开写法:

border-top: 1px solid red;  /* 只设定上边框, 其余同理 */
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>边框的复合写法</title>
        <style>
            div {
                width: 300px;
                height: 200px;
                /* border-width: 5px;
                border-style: solid;
                border-color: pink; */
                /* 边框的复合写法 简写:  */
                /* border: 5px solid pink; */
                /* 上边框 */
                border-top: 5px solid pink;
                /* 下边框 */
                border-bottom: 10px dashed purple;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse; /*表示相邻边框合并在一起*/
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>今日小说排行榜</title>
        <style>
            table {
                width: 500px;
                height: 249px;
            }
            th {
                height: 35px;
            }
            table,
            td, th {
                border: 1px solid pink;
                /* 合并相邻的边框 */
                border-collapse: collapse;
                font-size: 14px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table align="center" cellspacing="0">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>进入搜索</th>
                    <th>最近七日</th>
                    <th>相关链接</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>

                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>西游记</td>
                    <td><img src="up.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
            </tbody>           
        </table>
    </body>
</html>

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。

因此我们有两种方案解决:

  • 测量盒子大小的时候,不量边框。
  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>边框会影响盒子的实际大小</title>
        <style>
            /* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */
            div {
                width: 180px;
                height: 180px;
                background-color: pink;
                border: 10px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

内边距(padding)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型之内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>
</html>

合写属性

padding 属性(简写属性)可以有一到四个值。

值的个数 表达意思
padding: 5px; 1个值,代表上下左右都有5像素内边距
padding: 5px 10px; 2个值,代表上下内边距是5像素,左右内边距是10像素
padding: 5px 10px 20px; 3个值,代表上内边距5元素,左右内边距10像素,下内边距20像素
padding: 5px 10px 20px 30px; 4个值,上是5像素,右10像素,下20像素,左30像素(顺时针)

分写属性

padding 属性用于设置内边距,即边框与内容之间的距离。

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子模型之内边距</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* padding-left: 5px;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-right: 5px; */
                /* 内边距复合写法(简写) */
                /* padding: 5px; */
                /* padding: 5px 10px; */
                /* padding: 5px 10px 20px; */
                padding: 5px 10px 20px 30px;
            }
        </style>
    </head>
    <body>
        <div>
            盒子内容是content盒子内容是content盒子内容是content盒子内容是content
        </div>
    </body>
</html>

内边距会影响盒子实际大小

当我们给盒子指定 padding 值之后,发生了 2 件事情:

内容和边框有了距离,添加了内边距。

padding影响了盒子实际大小。

内边距对盒子大小的影响

  • 如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
  • 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。

解决方案

如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>内边距会影响盒子实际大小</title>
        <style>
            div {
                width: 160px;
                height: 160px;
                background-color: pink;
                padding: 20px;
            }

        </style>
    </head>
    <body>
        <div>
            padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
        </div>

    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>padding不会影响盒子大小的情况</title>
        <style>   
            h1 {
                /* width: 100%; */
                height: 200px;
                background-color: pink;
                padding: 30px;
            }
            div {
                width: 300px;
                height: 100px;
                background-color: purple;
            }
            div p {
                padding: 30px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <h1></h1>
        <div>
            <p></p>
        </div>
    </body>
</html>

外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子模型之外边距margin</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            /* .one {
            margin-bottom: 20px;
            } */
            .two {
                /* margin-top: 20px; */
                /* margin: 30px; */
                margin: 30px 50px;
            }
        </style>
    </head>
    <body>
        <div class="one">1</div>
        <div class="two">2</div>
    </body>
</html>

外边距典型应用

外边距可以让块级盒子水平居中的两个条件:

  • 盒子必须指定了宽度(width)。
  • 盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}

常见的写法,以下三种都可以:

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意:

以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>块级盒子水平居中对齐</title>
        <style>
            .header {
                width: 900px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <div class="header"></div>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>行内元素/行内块元素水平居中对齐</title>
        <style>
            .header {
                width: 900px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                text-align: center;
            }
            /* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
        </style>
    </head>
    <body>
        <div class="header">
            <span>里面的文字</span>
        </div>
        <div class="header">
            <img src="down.jpg" alt="">
        </div>
    </body>
</html>

外边距合并

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。主要有两种情况:

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottommargin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案:

  • 尽量只给一个盒子添加 margin 值。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>外边距合并-相邻块级元素垂直外边距合并</title>
        <style>
            .damao, .ermao {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            .damao {
                margin-bottom: 100px;
            }
            .ermao {
                margin-top: 200px;
            }
        </style>
    </head>
    <body>
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </body>
</html>

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:

  • 可以为父元素定义边框。
  • 可以为父元素定义内边距。
  • 可以为父元素添加 overflow:hidden
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
        <style>
            .father {
                width: 400px;
                height: 400px;
                background-color: purple;
                margin-top: 50px;
                /* border: 1px solid red; */
                /* border: 1px solid transparent; */
                /* padding: 1px; */
                overflow: hidden;
            }
            .son {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
</html>

清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

* {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
}

注意:

行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除内外边距</title>
        <style>
            /* 这句话也是我们css 的第一行代码 */
            * {
                margin: 0;
                padding: 0;
            }
            span {
                background-color: pink;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        123
        <ul>
            <li>abcd</li>
        </ul>
        <span>行内元素尽量只设置左右的内外边距</span>
    </body>
</html>

小知识:去掉 li 前小圆点

去掉 li 前面的 项目符号(小圆点)

list-style: none;

PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。

  • 文件→打开 :可以打开我们要测量的图片
  • Ctrl+R:可以打开标尺,或者 视图→标尺
  • 右击标尺,把里面的单位改为像素
  • Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图
  • 按住空格键,鼠标可以变成小手,拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区

圆角边框

在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

border-radius: length;    
  • 参数值可以为数值百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
  • 该属性是一个简写属性,可以跟四个值,分别代表:左上角、右上角、右下角、左下角
  • 兼容性 ie9+ 浏览器支持,但是不会影响页面布局,可以放心使用
属性 说明
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>圆角边框</title>
        <style>
            div {
                width: 300px;
                height: 150px;
                background-color: pink;
                border-radius: 10px;
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>

</html>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>圆角边框常用写法</title>
        <style>
            .yuanxing {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* border-radius: 100px; */
                /* 50% 就是宽度和高度的一半  等价于 100px */
                border-radius: 50%;
            }

            .juxing {
                width: 300px;
                height: 100px;
                background-color: pink;
                /* 圆角矩形设置为高度的一半 */
                border-radius: 50px;
            }

            .radius {
                width: 200px;
                height: 200px;
                /* border-radius: 10px 20px 30px 40px; */
                /* border-radius: 10px 40px; */
                border-top-left-radius: 20px;
                background-color: pink;
            }
        </style>
    </head>

    <body>
        1. 圆形的做法:
        <div class="yuanxing"></div>
        2. 圆角矩形的做法:
        <div class="juxing"></div>
        3. 可以设置不同的圆角:
        <div class="radius"></div>
    </body>

</html>

盒子阴影

CSS3 中新增了盒子阴影。

box-shadow 属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow 【必需】,水平阴影的位置,允许负值
v-shadow 【必需】,垂直阴影的位置,允许负值
blur 【可选】,模糊距离
spread 【可选】,阴影的尺寸
color 【可选】,阴影的颜色
inset 【可选】,将外部阴影(outset)改为内部阴影

注意:

  • 1.默认的是外阴影(outset),但是不可以写这个单词,否则造成阴影无效
  • 2.盒子阴影不占用空间,不会影响其他盒子排列。
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子阴影</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;

                /* box-shadow: 10px 10px; */
            }

            div:hover {
                box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            }

            /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
        </style>
    </head>

    <body>
        <div></div>
    </body>

</html>

文字阴影

text-shadow 属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;
描述
h-shadow 【必需】,水平阴影的位置,允许负值
v-shadow 【必需】,垂直阴影的位置,允许负值
blur 【可选】,模糊的距离
color 【可选】,阴影的颜色
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文字阴影</title>
        <style>
            div {
                font-size: 50px;
                color: orangered;
                font-weight: 700;
                text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);

            }
        </style>
    </head>

    <body>
        <div>
            你是阴影,我是火影
        </div>
    </body>

</html>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>行内块中间有缝隙</title>
        <style>
            div {
                float: left;
                width: 150px;
                height: 200px;
                background-color: pink;
                /* display: inline-block; */
            }
        </style>
    </head>

    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>

</html>

标签:盒子,margin,模型,边框,padding,width,border
From: https://www.cnblogs.com/leizia/p/17936787

相关文章

  • 【玩转腾讯混元大模型】怎么说?我用混元AI大模型开发了个IDEA插件
    前言halo我是杨不易呀,在混元大模型内测阶段就已经体验了一番当时打开页面的时候灵感模块让我大吃一惊这么多角色模型真的太屌了,随后我立马进行了代码处理水平和上下文的效果结果一般般但是到如今混元大模型代码处理水平提升超过20%,代码处理效果在实测中高于ChatGPT6.34%Human......
  • AI大模型引领数智未来【坚果派-坚果】
    AI大模型引领数智未来作者:坚果华为HDE,润开鸿生态技术专家,坚果派创始人,OpenHarmony布道师,开发者联盟优秀讲师,2023年开源之夏导师,2023年OpenHarmony应用创新赛导师,OpenHarmony金融应用创新赛导师,RISC-V+OpenHarmony应用创意赛导师,OpenHarmony三方库贡献者,开放原子开源基金会技术+生......
  • 电视盒子刷机armbian系统教程
    https://github.com/ophub/amlogic-s9xxx-armbian/releases下载镜像包:下载这里面对应版本的烧录包,用rufus镜像写工具写入到U盘中,让电视盒子从U盘启动:找个牙签之类的,捅住盒子背面小孔里的复位键(位于后壳两个U口之间)【晶晨短接神器也可以】;5、盒子按下电源开关加电,加电5秒后松开,加电......
  • R语言逻辑回归模型的移动通信客户流失预测与分析
    全文链接:https://tecdat.cn/?p=34723原文出处:拓端数据部落公众号通过对某移动通信公司客户的流失数据分析,了解客户流失规律,建立流失预警系统,为客户关系管理服务。数据介绍某年度随机抽取的1000个移动通信客户。因变量是他们来年的流失行为(0=未流失,1=流失)。为了能够预测客户......
  • 大模型时代,如何构建技术壁垒?
    在2023年的尾声回顾这一年,大模型毫无疑问是科技产业最值得关注的话题。在人们畅想掀起新一波AI浪潮的大模型将如何变革各个行业时,却发现大模型最先“颠覆”的是AI产业本身:大模型具备如此强大且不断进化的“泛化”能力,让“小模型”时代发展起来的众多AI公司似乎在一夜之间丧失了自己......
  • 区域人数超员AI算法模型的应用介绍
    视频AI智能分析技术已经深入到人类生活的各个角落,与社会发展的方方面面紧密相连。从日常生活中的各种场景,如人脸识别、车牌识别,到工业生产中的安全监控,如工厂园区的翻越围栏识别、入侵识别、工地的安全帽识别、车间流水线产品的品质缺陷AI检测等,AI智能分析都发挥着不可或缺的作用。......
  • 探索大语言模型 :首场英智未来AI沙龙精彩回顾
    12月27日,英智未来主办的第一期英智AI沙龙《大语言模型创新应用与最新发展现状》在深圳南山顺利举行。本次沙龙汇集了来自IT、文娱、金融等行业的精英人士和AI爱好者,共同探讨大语言模型在各领域的创新应用及其发展趋势。  以大模型为核心的通用人工智能正在驱动新一轮智......
  • 探索大语言模型 :首场英智未来AI沙龙精彩回顾
    12月27日,英智未来主办的第一期英智AI沙龙《大语言模型创新应用与最新发展现状》在深圳南山顺利举行。本次沙龙汇集了来自IT、文娱、金融等行业的精英人士和AI爱好者,共同探讨大语言模型在各领域的创新应用及其发展趋势。以大模型为核心的通用人工智能正在驱动新一轮智能革命的持续演......
  • 方案:智能分析网关V4区域人数超员AI算法模型的应用场景介绍
    视频AI智能分析技术已经深入到人类生活的各个角落,与社会发展的方方面面紧密相连。从日常生活中的各种场景,如人脸识别、车牌识别,到工业生产中的安全监控,如工厂园区的翻越围栏识别、入侵识别、工地的安全帽识别、车间流水线产品的品质缺陷AI检测等,AI智能分析都发挥着不可或缺的作用......
  • 谷歌云 | Dataflow 和 Vertex AI:可扩展高效的模型服务
    【CloudAce云一 是GoogleCloud全球战略合作伙伴,在亚太地区、欧洲、美洲和非洲拥有二十多个办公室。CloudAce在谷歌专业领域认证及专业知识目前排名全球第一位,并连续多次获得GoogleCloud各类奖项。作为谷歌云托管服务商,我们提供谷歌云、谷歌地图、谷歌办公套件、谷歌云认......