前端 | （七）浮动 | 尚硅谷前端html+css零基础教程2023最新

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

文章目录

  • 📚浮动介绍
    • 🐇元素浮动后的特点
    • 🐇浮动小练习
      • 🔥盒子1右浮动
      • 🔥盒子1左浮动
      • 🔥所有盒子都浮动
      • 🔥所有盒子浮动后，盒子3落下来
      • 🔥所有盒子浮动后，盒子3卡住了
  • 📚解决浮动产生的影响
    • 🐇浮动后的影响
    • 🐇解决浮动产生的影响
      • 🔥方案四示例及细节补充
      • 🔥方案四小结
      • 🔥方案五（本质就是方案四但更优雅）示例
  • 📚浮动布局小练习⭐️⭐️⭐️

⭐️前文回顾：前端 | （六）CSS盒子模型 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p113-p132，本文对应p133-p138
⭐️补充网站：W3school，MDN

📚浮动介绍

这里是引用

🐇元素浮动后的特点

  • 脱离文档流。
  • 不管浮动前是什么元素，浮动后：默认宽高都是被内容撑开（尽可能小），而且可以设置宽高。
  • 不会独占一行，可以与其他元素共用一行。
  • 不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding。

  • 不加浮动的初始效果

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素浮动后的特点</title>
    <style>
        .outer{
            width: 800px;
            height: 400px;
            padding: 10px;
            background-color: gray;
        }
        .box{
            font-size: 20px;
            padding: 10px;
        }
        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: orange;
        }
        .box3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

    在这里插入图片描述

  • 给盒子2加浮动

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素浮动后的特点</title>
    <style>
        .outer{
            width: 800px;
            height: 400px;
            padding: 10px;
            background-color: gray;
        }
        .box{
            font-size: 20px;
            padding: 10px;
        }
        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: orange;
            float: left;
        }
        .box3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

    在这里插入图片描述

    这里是引用

🐇浮动小练习

🔥盒子1右浮动

盒子1单独浮动在右边

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动的小练习</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1{
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

在这里插入图片描述

在这里插入图片描述

🔥盒子1左浮动

盒子1左浮动，盒子2跑到盒子1的背后，然后“盒子2”那三个文字落下来（文字环绕）和盒子3摞到一块去了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动的小练习</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1{
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

在这里插入图片描述

在这里插入图片描述

🔥所有盒子都浮动

盒子1、2、3都浮动，此时父亲没东西撑开所以就只剩下边框了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动的小练习</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
            float: left;
         }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

在这里插入图片描述

在这里插入图片描述

🔥所有盒子浮动后，盒子3落下来

还是三个盒子都飘起来，但是父亲的宽度不够了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动的小练习</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
            float: left;
         }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

在这里插入图片描述

这里是引用

🔥所有盒子浮动后，盒子3卡住了

还是三个盒子都飘起来，且父亲的宽度不太够，除此之外，盒子1把盒子3卡住了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动的小练习</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
            float: left;
         }
        .box1{
            height: 230px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body> 
</html>

在这里插入图片描述

这里是引用

📚解决浮动产生的影响

🐇浮动后的影响

  • 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
    在这里插入图片描述
  • 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
    在这里插入图片描述

🐇解决浮动产生的影响

在这里插入图片描述

前三种方式都能解决父元素塌陷问题，但针对兄弟元素的影响不能很好解决。

🔥方案四示例及细节补充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>解决浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1,.box2,.box3{
            float: left;
        }
        .box4{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
        <div class="box box4">盒子4</div>
    </div>
    <div style="background-color: orange;">
        lalalalaxixixi
    </div>
</body> 
</html>

在这里插入图片描述

神奇的事情：这时候给盒子4也加浮动，本来一行能排开，但4会跑下一行去❓

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>解决浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1,.box2,.box3,.box4{
            float: left;
        }
        .box4{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
        <div class="box box4">盒子4</div>
    </div>
    <div style="background-color: orange;">
        lalalalaxixixi
    </div>
</body> 
</html>

在这里插入图片描述⚠️也就是说，加clear:both的前提是本身得是个好人⚠️
⚠️补充：加clear:both的必须是块元素⚠️
在这里插入图片描述
在这里插入图片描述

🔥方案四小结

方案四的简洁高效解决方案就是加一个纯纯空div，它的作用就是来说一句话clear:both

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>解决浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1,.box2,.box3,.box4{
            float: left;
        }
        .mofa{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
        <div class="box box4">盒子4</div>
        <div class="mofa"></div>
    </div>
    <div style="background-color: orange;">
        lalalalaxixixi
    </div>
</body> 
</html>

在这里插入图片描述

🔥方案五（本质就是方案四但更优雅）示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>解决浮动产生的影响</title>
    <style>
        .outer{
            width: 500px;
            background-color: gray;
            border: 1px solid black;
         }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            /* margin合并，父亲有border所以无塌陷 */
            margin: 10px;
         }
        .box1,.box2,.box3,.box4{
            float: left;
        }
        /* 用伪元素选择器来解决 */
        .outer::after{
            content: '';
            /* 默认是inline */
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
        <div class="box box4">盒子4</div>
    </div>
    <div style="background-color: orange;">
        lalalalaxixixi
    </div>
</body> 
</html>

在这里插入图片描述
⚠️用clear:both之前的所有元素不能出现好孩子，要浮动就全部都浮动！⚠️
⚠️也即在一个父元素里的子元素要么都浮动，要么都别浮动！！⚠️

📚浮动布局小练习⭐️⭐️⭐️

在这里插入图片描述
在这里插入图片描述

具体标注：
在这里插入图片描述

补充技巧：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局练习</title>
    <style>
        /* 首先清楚默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 之后左浮动只需要加上class，不需要再选中选择器 */
        .leftfix{
            float:left
        }
        /* 右浮动同理 */
        .rightfix{
            float:right
        }
        /* 清除浮动同理 */
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .container{
            width: 960px;
            /* 可以临时设置高度和背景颜色，便于观察 */
            /* height: 200px;
            background-color: gray; */
            /* 让版心居中 */
            margin: 0 auto;
            /* 让文字水平居中，放container里，之后的还能继承 */
            text-align: center;
        }
        .logo{
            width: 200px;
        }
        .banner1{
            width: 540px;
            margin: 0 10px;
        }
        .banner2{
            width: 200px;
        }
        .logo,.banner1,.banner2{
            height: 80px;
            background-color: pink;
            /* 垂直居中 */
            line-height: 80px;
        }
        .menu{
            height: 30px;
            background-color: skyblue;
            margin-top: 10px;
            line-height: 30px;
        }
        .content{
            margin-top: 10px;
        }
        .item1,.item2{
            width: 368px;
            height: 198px;
            line-height: 198px;
            border: 1px solid black;
            margin-right: 10px;
        }
        .bottom{
            margin-top: 10px;
        }
        .item3,.item4,.item5,.item6{
            width: 178px;
            height: 198px;
            line-height: 198px;
            border: 1px solid black;
            margin-right: 10px;
        }
        .item7,.item8,.item9{
            width: 198px;
            height: 128px;
            line-height: 128px;
            border: 1px solid black;
        }
        .item8{
            margin: 10px 0;
        }
        .footer{
            height: 60px;
            line-height: 60px;
            background-color: moccasin;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="page-header clearfix">
            <div class="logo leftfix">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
        <!-- 菜单 -->
        <div class="menu">菜单</div>
        <!-- 内容区 -->
        <div class="content clearfix">
            <!-- 左侧 -->
            <div class="left leftfix">
                <!-- 上 -->
                <div class="top clearfix">
                    <div class="item1 leftfix">栏目一</div>
                    <div class="item2 leftfix">栏目二</div>
                </div>
                <!-- 下 -->
                <div class="bottom clearfix">
                    <div class="item3 leftfix">栏目三</div>
                    <div class="item4 leftfix">栏目四</div>
                    <div class="item5 leftfix">栏目五</div>
                    <div class="item6 leftfix">栏目六</div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right rightfix">
                <div class="item7">栏目七</div>
                <div class="item8">栏目八</div>
                <div class="item9">栏目九</div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">页脚</div>
    </div>
</body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

后端Linux软件安装大全[JDK、Tomcat、MySQL、Irzsz、Git、Maven、Redis...持续更新中]

后端Linux软件安装大全[JDK、Tomcat、MySQL、Irzsz、Git、Maven、Redis...持续更新中]

文章目录 前言1.软件安装方式2.安装jdk3.安装Tomcat4.安装MySQL5.安装lrzsz6. 安装Git7. 安装Maven8. 安装Redis 总结 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的…
阅读更多...
Vue第三篇：最简单的vue购物车示例

Vue第三篇：最简单的vue购物车示例

本文参考&#xff1a;Vue Cli&#xff08;脚手架&#xff09;实现购物车小案例 - - php中文网博客 效果图&#xff1a; 编写流程&#xff1a; 1、首先通过vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下&#xff1a; <template><div><div v…
阅读更多...
【深度学习笔记】训练 / 验证 / 测试集

【深度学习笔记】训练 / 验证 / 测试集

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记&#xff0c;视频由网易云课堂与 deeplearning.ai 联合出品&#xff0c;主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习&#xff0c;视频的链接如下&#xff1a; 神经网络和…
阅读更多...
【电路原理学习笔记】第3章：欧姆定律：3.1 电压、电流与电阻的关系

【电路原理学习笔记】第3章：欧姆定律：3.1 电压、电流与电阻的关系

第3章&#xff1a;欧姆定律 3.1 电压、电流与电阻的关系 欧姆定律指出&#xff1a;电流与电压成正比&#xff0c;与电阻成反比。即 I V R I\frac{V}{R} IRV​ 3.1.1 电压与电流之间的线性关系 数学上&#xff0c;线性指的是变量之间的关系在图形上是一条直线。线性方程所对…
阅读更多...
ChatGPT 最佳实践指南之：系统地测试变化

ChatGPT 最佳实践指南之：系统地测试变化

Test changes systematically 系统地测试变化 Improving performance is easier if you can measure it. In some cases a modification to a prompt will achieve better performance on a few isolated examples but lead to worse overall performance on a more representa…
阅读更多...
分布式运用——存储系统Ceph

分布式运用——存储系统Ceph

分布式运用——存储系统Ceph 一、Ceph 介绍1.Ceph 简介2、存储基础2.1 单机存储设备2.2 单机存储的问题2.3 商业存储解决方案2.4 分布式存储&#xff08;软件定义的存储 SDS&#xff09;2.5 分布式存储的类型 3.Ceph 优势3.1 高扩展性3.2 高可靠性3.3 高性能3.4 功能强大 4.Cep…
阅读更多...
pwm呼吸灯

pwm呼吸灯

文章目录 一、呼吸灯二、代码实现三、引脚分配 一、呼吸灯 呼吸灯是指灯光在微电脑的控制之下完成由亮到暗的逐渐变化&#xff0c;使用开发板上的四个led灯实现1s间隔的呼吸灯。 二、代码实现 c module pwm_led( input clk ,input rst_n ,output reg [3:0] led ); …
阅读更多...
mysql中的行格式之compact格式分析

mysql中的行格式之compact格式分析

mysql中的行格式之compact格式分析 mysql行格式 所谓行格式&#xff0c;就是指mysql一行数据的存储格式。 InnoDB 储存引擎支持有四种行储存格式&#xff1a;Compact、Redundant、Dynamic 和 Compressed。 Redundant是很古老的行格式了&#xff0c;因为占用空间最多&#x…
阅读更多...
（1）ADS-B接收机

（1）ADS-B接收机

文章目录 前言 1.1 所需硬件 1.2 连接到自动驾驶仪 1.3 设置 1.4 ADSB输出配置 1.5 启用载人飞行器避障功能 1.6 飞行器数据库 1.7 开发者信息包括模拟 前言 本文介绍了如何安装和配置 ADS-B 模块&#xff0c;以便你的飞机能够知道附近的其他飞机和空中交通管制&#x…
阅读更多...
CSS样式

CSS样式

1.高度和宽度 .c1{height:300px;width:500px;}注意事项&#xff1a; 宽度支持百分比&#xff0c;高度不支持。行内标签&#xff1a;默认无效会计标签&#xff1a;默认有效&#xff08;霸道&#xff0c;右侧区域空白&#xff0c;也不给你用&#xff09; 2.块级和行内标签 块…
阅读更多...
微服务架构+创建微服务工程（商品/订单）

微服务架构+创建微服务工程（商品/订单）

目录 1.微服务架构 1.1.单体应用架构 1.2.微服务应用 1.3 微服务架构的优势 1.4.微服务架构的缺点(挑战) 1.5. SpringCloud与微服务关系 1.6.SpringBoot和SpringCloud关系 2. 创建微服务工程 2.1.数据库 2.2.搭建父工程 2.2 创建公共模块 2.3.商品系统 2.4.订单微…
阅读更多...
Linux/Unix-gcc编译回顾

Linux/Unix-gcc编译回顾

1、gcc编译为可执行程序四步骤&#xff1a;预处理->编译->汇编->链接 注意&#xff1a;-o 用于修改生产的文件名 2、gcc常用参数 指定头文件&#xff1a;-I 语法&#xff1a; gcc -I 头文件所在文件夹路径 源文件 -o 生成文件名 如果头文件和源文件中同一个文件夹…
阅读更多...
Docker 常用命令

Docker 常用命令

docker命令大全 命令说明docker attach将本地标准输入、输出和错误流附加到正在运行的容器docker build从 Dockerfile 构建镜像docker builder管理构建docker checkpoint管理检查点docker commit从容器的更改中创建新图像docker config管理 Docker 配置docker container管理容器…
阅读更多...
GOPATH、GOROOT（VSCode编写第一个go程序）

GOPATH、GOROOT（VSCode编写第一个go程序）

1. GOROOT和GOPATH GOROOT 和 GOPATH 都是 Go 语言中的环境变量&#xff0c;用于指定 Go 工具链和工作区的路径。 GOROOT 指定了 Go 工具链的安装路径&#xff0c;它包含了 Go 语言的标准库、编译器等工具。在使用 Go 编译器、运行时等工具时&#xff0c;它们会默认从 GOROOT…
阅读更多...
新晋 Committer！来自复旦大学的帅哥一枚

新晋 Committer！来自复旦大学的帅哥一枚

点亮Star⭐️ 支持我们 https://github.com/apache/dolphinscheduler 最近&#xff0c;社区星力量又迎来一位新晋 Committer&#xff0c;这次是来自复旦大学研究生在读的王维饶同学&#xff0c;一起来认识一下吧&#xff01; 个人简介 姓名&#xff1a;王维饶职位&#xff1a…
阅读更多...
SignalTap II 软件使用步骤

SignalTap II 软件使用步骤

文章目录 前言一、SignalTap II是什么&#xff1f;二、使用步骤三、总结四、参考资料 前言 环境&#xff1a; 1、Quartus18.1 2、板子型号&#xff1a;原子哥开拓者2(EP4CE10F17C8) 要求&#xff1a; 能够使用SignalTap II进行片上调试。 一、SignalTap II是什么&#xff1f; S…
阅读更多...
华为云子网路由表作用及价值

华为云子网路由表作用及价值

子网路由表 子网路由表作用云专线、VPN的配置与子网路由表强关联&#xff0c;本质是在相应的子网路由表中添加了一条路由Nat路由表问题地址变更问题snat和dnat 子网路由表作用 子网内部作为一个二层网络&#xff0c;通过mac地址互通&#xff0c;不通过路由互通。跨子网&#x…
阅读更多...
ASUS华硕ROG幻14 2021款GA401QM原厂Win10系统工厂模式带ASUS Recovery恢复功能

ASUS华硕ROG幻14 2021款GA401QM原厂Win10系统工厂模式带ASUS Recovery恢复功能

自带恢复分区、所有驱动、出厂主题壁纸LOGO、Office办公软件、奥创控制中心等预装程序 所需要工具&#xff1a;16G或以上的U盘(非必需) 文件格式&#xff1a;HDI,SWP,OFS,EDN,KIT,TLK多个底包 文件大小&#xff1a;11.34GB 注&#xff1a;恢复时会清空电脑上所有盘的数据&…
阅读更多...
【布局优化】基于遗传算法的车间布局优化 车间设施布局优化【Matlab代码#50】

【布局优化】基于遗传算法的车间布局优化 车间设施布局优化【Matlab代码#50】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 车间布局优化2. 基于GA的布局优化模型3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xff1a;资源获取】 1. 车间布局优化 车间设施布置的规划一直是工业工程领域不断研究和探索的内容&am…
阅读更多...
【人工智能】xAI——“X宇宙”又增添了一位新成员

【人工智能】xAI——“X宇宙”又增添了一位新成员

个人主页&#xff1a;【&#x1f60a;个人主页】 &#x1f31e;热爱编程&#xff0c;热爱生活&#x1f31e; 文章目录 前言xAI团队成员做解开宇宙本质的AI 前言 有人问他&#xff0c;xAI公司是干啥的&#xff1f;马斯克的回答引用了其偶像、科幻作家道格拉斯・亚当斯的话&…
阅读更多...
最新文章

Copyright @ 2022~2023