【CSS3系列】第八章 · 伸缩盒模型

这篇具有很好参考价值的文章主要介绍了【CSS3系列】第八章 · 伸缩盒模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面


        Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误不足之处,请多多指正!谢谢大家!!!

        如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!

【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程


目录

写在前面

1. 伸缩盒模型

1.1 伸缩盒模型简介

1.2 伸缩容器、伸缩项目

1.3 主轴与侧轴

1.4 主轴方向

1.5 主轴换行方式

1.6 flex-flow

1.7 主轴对齐方式

1.8 侧轴对齐方式

1.9 flex 实现水平垂直居中

1.10 伸缩性

1.11 flex复合属性

1.12 项目排序

1.13 单独对齐

结语


【往期回顾】

【CSS3系列】第七章 · 过渡和动画

【CSS3系列】第六章 · 2D和3D变换

【CSS3系列】第五章 · web 字体

【CSS3系列】第四章 · CSS3新增渐变

【CSS3系列】第三章 · CSS3新增边框和文本属性

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性


【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】


1. 伸缩盒模型


1.1 伸缩盒模型简介

  • 2009 年, W3C 提出了一种新的盒子模型 —— Flexible Box (伸缩盒模型,又称:弹性盒子)。
  • 它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序 .......
  • 截止目前,除了在部分 IE 浏览器不支持,其他浏览器均已全部支持。
  • 伸缩盒模型的出现,逐渐演变出了一套新的布局方案 —— flex 布局。

小贴士:

  • 传统布局是指:基于传统盒状模型,主要靠: display 属性 + position 属性 + float属性。
  • flex 布局目前在移动端应用比较广泛,因为传统布局不能很好的呈现在移动设备上。

1.2 伸缩容器、伸缩项目

伸缩容器 : 开启了 flex 的元素,就是:伸缩容器。
  • 给元素设置:
    • display:flex display:inline-flex ,该元素就变为了伸缩容器。
    • display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。
    • 一个元素可以同时是:伸缩容器、伸缩项目。
伸缩项目 :伸缩容器所有 子元素 自动成为了:伸缩项目。
  • 仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
  • 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会块状化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_伸缩容器_伸缩项目</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .inner3 {
            display: flex;
            /* font-size: 20px; */
            /* line-height: 2em; */
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner inner3">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>
</body>
</html>

1.3 主轴与侧轴

  • 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边是终点)。
  • 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边是终点)。

1.4 主轴方向

  • 属性名: flex-direction
  • 常用值如下:
    • row :主轴方向水平从左到右 —— 默认值
    • row-reverse :主轴方向水平从右到左。
    • column :主轴方向垂直从上到下。
    • column-reverse :主轴方向垂直从下到上。
【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_主轴方向</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            /* flex-direction: row; */

            /* 调整主轴方向,水平从右到左 */
            flex-direction: row-reverse;

            /* 调整主轴方向,垂直从上到下 */
            /* flex-direction: column; */

            /* 调整主轴方向,垂直从下到上 */
            /* flex-direction: column-reverse; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>
</html>

1.5 主轴换行方式

  • 属性名: flex-wrap
  • 常用值如下:
【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_主轴换行方式</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,不换行,默认值 */
            /* flex-wrap: nowrap; */

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴换行方式,反向换行 */
            /* flex-wrap: wrap-reverse; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner">9</div>
        <div class="inner">10</div>
        <div class="inner">11</div>
    </div>
</body>
</html>

1.6 flex-flow

  • flex-flow 是一个复合属性,复合了 flex-direction flex-wrap 两个属性。 值没有顺序要求。
flex-flow: row wrap;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_flex-flow</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            /* flex-direction: row; */

            /* 主轴换行方式,换行 */
            /* flex-wrap: wrap; */

            flex-flow: row wrap;

        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner">9</div>
        <div class="inner">10</div>
        <div class="inner">11</div>
    </div>
</body>
</html>

1.7 主轴对齐方式

  • 属性名: justify-content
  • 常用值如下:
    • flex-start :主轴起点对齐。—— 默认值
    • flex-end :主轴终点对齐。
    • center :居中对齐
    • space-between :均匀分布,两端对齐(最常用)。
    • space-around :均匀分布,两端距离是中间距离的一半。
    • space-evenly :均匀分布,两端距离与中间距离一致。
【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_主轴对齐方式</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            /* justify-content: flex-start; */

             /* 主轴的对齐方式,主轴的结束位置 */
             /* justify-content: flex-end; */

             /* 主轴的对齐方式,中间对齐 */
             /* justify-content: center; */

             /* 主轴的对齐方式,项目均匀的分布在一行中,项目与项目之间的距离,是项目距边缘的二倍 */
            /* justify-content: space-around; */

             /* 主轴的对齐方式,项目均匀的分布在一行中,项目与项目之间的距离是相等的,项目距边缘没有距离 */
            justify-content: space-between;

            /* 主轴的对齐方式,项目均匀的分布在一行中 */
            /* justify-content: space-evenly; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>
</html>

1.8 侧轴对齐方式

一行的情况
  • 所需属性: align-items
  • 常用值如下:
    • flex-start :侧轴的起点对齐。
    • flex-end :侧轴的终点对齐。
    • center :侧轴的中点对齐。
    • baseline : 伸缩项目的第一行文字的基线对齐。
    • stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06_侧轴对齐方式_一行</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;

            /* 侧轴的对齐方式,侧轴的起始位置对齐 */
            align-items: flex-start;

            /* 侧轴的对齐方式,侧轴的结束位置对齐 */
            /* align-items: flex-end; */

            /* 侧轴的对齐方式,侧轴的中间位置对齐 */
            /* align-items: center; */

            /* 侧轴的对齐方式,侧轴的中间位置对齐 */
            /* align-items: baseline; */

            /* 侧轴的对齐方式,拉伸到整个父容器(前提:伸缩项目不能给高度),默认 */
            /* align-items: stretch; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .inner2 {
            height: 300px;
            font-size: 80px;
        }
        .inner3 {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1x</div>
        <div class="inner inner2">2x</div>
        <div class="inner inner3">3x</div>
    </div>
</body>
</html>
多行的情况
  • 所需属性: align-content
  • 常用值如下:
    • flex-start :与侧轴的起点对齐。
    • flex-end :与侧轴的终点对齐。
    • center :与侧轴的中点对齐。
    • space-between :与侧轴两端对齐,中间平均分布。
    • space-around :伸缩项目间的距离相等,比距边缘大一倍。
    • space-evenly : 在侧轴上完全平分。
    • stretch :占满整个侧轴。—— 默认值
【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07_侧轴对齐方式_多行</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;

            /* 侧轴的对齐方式(多行)侧轴的起始位置对齐 */
            align-content: flex-start;

            /* 侧轴的对齐方式(多行)侧轴的结束位置对齐 */
            /* align-content: flex-end; */

            /* 侧轴的对齐方式(多行)侧轴的中间位置对齐 */
            /* align-content: center; */

            /* 侧轴的对齐方式(多行),伸缩项目之间的距离是相等的,且是边缘距离的2倍 */
            /* align-content:space-around; */

            /* 侧轴的对齐方式(多行),伸缩项目之间的距离是相等的,且边缘没有距离 */
            /* align-content:space-between; */

            /* 侧轴的对齐方式(多行),伸缩项目之间的距离是相等的 */
            /* align-content:space-evenly; */

            /* 侧轴的对齐方式(多行),拉伸,默认 */
            /* align-content: stretch; */
            
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .inner2 {
            height: 300px;
        }
        .inner3 {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner">9</div>
        <div class="inner">10</div>
        <div class="inner">11</div>
    </div>
</body>
</html>

1.9 flex 实现水平垂直居中

  • 方法一:父容器开启 flex 布局,随后使用 justify-content align-items 实现水平垂直居中
.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}
  • 方法二:父容器开启 flex 布局,随后子元素 margin: auto
.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}

1.10 伸缩性

1. flex-basis

  • 概念: flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。
  • 备注:主轴横向:宽度失效;主轴纵向:高度失效
  • 作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值 auto ,即:伸缩项目的宽或高。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09_项目在主轴的基准长度</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .inner2 {
            /* 设置伸缩项目在主轴上的基准长度,若主轴是横向的宽失效,若主轴是纵向的高失效 */
            flex-basis: 300px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner inner2">2</div>
        <div class="inner">3</div>
    </div>
</body>
</html>

2. flex-grow(伸)

  • 概念: flex-grow 定义伸缩项目的放大比例,默认为 0 ,即:纵使主轴存在剩余空间,也不拉伸(放大)。
  • 规则:
    • 若所有伸缩项目的 flex-grow 值都为 1 ,则:它们将等分剩余空间(如果有空间的话)。
    • 若三个伸缩项目的 flex-grow 值分别为: 1 2 3 ,则:分别瓜分到: 1/6 2/6 3/6 的空间。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_伸缩项目_伸</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            flex-grow: 0;
        }
        .inner1 {
            flex-grow: 1;
        }
        .inner2 {
            flex-grow: 2;
            width: 300px;
        }
        .inner3 {
            flex-grow: 3;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

3. flex-shrink(缩)

  • 概念: flex-shrink 定义了项目的压缩比例,默认为 1 ,即:如果空间不足,该项目将会缩小。
  • 收缩项目的计算,略微复杂一点,我们拿一个场景举例:
  • 例如:
  • 三个收缩项目,宽度分别为: 200px 、 300px 、 200px ,它们的 flex-shrink 值分别 为: 1 、 2 、 3 ,若想刚好容纳下三个项目,需要总宽度为 700px ,但目前容器只有 400px ,还差 300px ,所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:

1. 计算分母: (200×1) + (300×2) + (200×3) = 1400

2. 计算比例:

  • 项目一: (200×1) / 1400 = 比例值1
  • 项目二: (300×2) / 1400 = 比例值2
  • 项目三: (200×3) / 1400 = 比例值3

3. 计算最终收缩大小:

  • 项目一需要收缩: 比例值1 × 300
  • 项目二需要收缩: 比例值2 × 300
  • 项目三需要收缩: 比例值3 × 300
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11_伸缩项目_缩</title>
    <style>
        .outer {
            width: 400px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            /* flex-wrap: wrap; */

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;

            /* 侧轴的对齐方式 */
            align-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            flex-grow: 1;
        }
        .inner1 {
            flex-shrink: 1;
        }
        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }
        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">
            <div style="width: 50px;height:50px;background-color: green;">1</div>
        </div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

1.11 flex复合属性

  • flex 是复合属性,复合了:flex-grow flex-shrink flex-basis 三个属性,默认值为 0 1 auto
  • 如果写 flex:1 1 auto ,则可简写为:flex:auto
  • 如果写 flex:1 1 0 ,则可简写为:flex:1
  • 如果写 flex:0 0 auto ,则可简写为: flex:none
  • 如果写 flex:0 1 auto ,则可简写为:flex:0 auto —— flex 初始值。

1.12 项目排序

  • order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0

1.13 单独对齐

  • 通过 align-self 属性,可以单独调整某个伸缩项目的对齐方式
  • 默认值为 auto ,表示继承父元素的 align-items 属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13_项目排序与单独对齐</title>
    <style>
        .outer {
            width: 600px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            /* flex-wrap: wrap; */

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;

            /* 侧轴的对齐方式 */
            align-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            /* 可以拉伸 可以压缩 设置基准长度为0,可简写为:flex:1 */
            flex: 1 1 0;
        }
        .inner1 {
            order: 3;
        }
        .inner2 {
            order: 2;
        }
        .inner3 {
            order: 1;
        }
        
        .inner2 {
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程

结语


本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程

【CSS3系列】第八章 · 伸缩盒模型,CSS3基础精讲,css3,前端,html,css,软件工程文章来源地址https://www.toymoban.com/news/detail-523090.html

到了这里,关于【CSS3系列】第八章 · 伸缩盒模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 统计学习导论(ISLR) 第八章树模型课后习题

    🌸个人主页:JOJO数据科学 📝个人介绍: 统计学top3 高校统计学硕士在读 💌如果文章对你有帮助,欢迎✌ 关注 、👍 点赞 、✌ 收藏 、👍 订阅 专栏 ✨本文收录于【R语言数据科学】 本系列主要介绍R语言在数据科学领域的应用包括: R语言编程基础、R语言可视化、R语言进

    2024年02月12日
    浏览(35)
  • 第八章 OpenGL ES 基础-MVP矩阵理解

    第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标 第二章 OpenGL ES 基础-GLSL语法简单总结 第三章 OpenGL ES 基础-GLSL渲染纹理 第四章 OpenGL ES 基础-位移、缩放、旋转原理 第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵 第六章 OpenGL ES 基础-FBO、VBO理解与运用 第七章 OpenGL ES 基础-输入

    2024年04月26日
    浏览(31)
  • 第八章 模型篇:transfer learning for computer vision

    参考教程: transfer-learning transfer-learning tutorial 很少会有人从头开始训练一个卷积神经网络,因为并不是所有人都有机会接触到大量的数据。常用的选择是在一个非常大的模型上预训练一个模型,然后用这个模型为基础,或者固定它的参数用作特征提取,来完成特定的任务。

    2024年02月11日
    浏览(39)
  • 第八章:AI大模型的安全与伦理问题8.3 AI伦理问题

    随着人工智能(AI)技术的发展,人类社会正面临着一系列新的挑战。这些挑战不仅仅是技术上的,更多的是人类价值观、道德和伦理的面临。在这一章节中,我们将深入探讨AI伦理问题,以期帮助读者更好地理解这一领域的关键问题和挑战。 AI技术的发展为人类带来了巨大的

    2024年02月03日
    浏览(46)
  • 《计算机系统与网络安全》 第八章 操作系统安全基础

    🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍》学会IDEA常用操作,工作效率翻倍~💐 🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅,敬

    2024年02月11日
    浏览(49)
  • 第八章:AI大模型的部署与优化8.1 模型压缩与加速8.1.2 量化与剪枝

    作者:禅与计算机程序设计艺术 8.1.1 背景介绍 随着深度学习技术的不断发展,人工智能模型的规模越来越庞大。然而,这也带来了新的问题:大模型需要更多的计算资源和存储空间,同时在移动设备上运行效率较低。因此,模型压缩与加速成为了当前研究的热点。 8.1.2 核心

    2024年03月08日
    浏览(47)
  • (数字图像处理MATLAB+Python)第八章图像复原-第一、二节:图像复原概述和图像退化模型

    图像复原 :在图像生成、记录、传输过程中,由于成像系统、设备或外在的干扰,会导致图像质量下降,称为 图像退化 ,如大气扰动效应、光学系统的像差、物体运动造成的模糊、几何失真等。图像复原是指通过使用图像处理技术来恢复受损图像的原始信息,使其尽可能接

    2024年02月12日
    浏览(65)
  • CSS3盒子模型

    盒子模型分为两种: 第一种是 W3C 标准的盒子模型(标准盒模型) 第二种 IE 标准的盒子模型(怪异盒模型) 标准盒模型与怪异盒模型的表现效果的区别之处: 1、标准盒模型中 width 指的是内容区域 content 的宽度 height 指的是内容区域 content 的高度 标准盒模型下盒子的大小 =

    2024年02月21日
    浏览(49)
  • CSS3盒模型

    CSS3盒模型规定了网页元素的显示方式,包括大小、边框、边界和补白等概念。2015年4月,W3C的CSS工作组发布了CSS3基本用户接口模块,该模块负责控制与用户接口界面相关效果的呈现方式。 在网页设计中,经常会听到内容(content)、补白(padding)、边框(border)、边界(margin)等术语,

    2024年02月06日
    浏览(31)
  • 【期末不挂科-单片机考前速过系列P8】(第八章:21题速过AT89S51单片机的内部硬件结构)经典例题盘点(带图解析)

    前言 大家好吖,欢迎来到 YY 滴C++系列 ,热烈欢迎! 本章主要内容面向接触过C++的老铁 主要内容含: 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专栏 YY的《C++11》专栏 YY的《Linux》专栏 YY的《数据结构》专栏 YY的《C语言基础》专栏 YY的《初学者易

    2024年01月19日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包