后端也得会的两万字CSS技术（下篇）-CFANZ编程社区

❤️CSS必备知识详解❤️

第一部分：盒子模型（box-model）

（1）盒子模型之边框

效果展示：

（2）盒子模型之内边距

效果展示：

（3）盒子模型之外边距

效果展示：

拓展：盒子模型之内外边距问题：

1.外边距问题：

（1）比如：此例中，上面那个盒子设置了下外边距为50px，下面那个盒子设置了上外边距100px，那么实际上，这两个div边框之间的距离是100px，而不是150px！
（2）比如：此例中，左边那个盒子设置了右外边框为100px，右边那个盒子设置了左外边框50px，那么实际上这两个div边框之间的距离是150px！

2.内边距问题：

盒子模型内外边距总结：

第二部分：重置样式（RESET CSS）

实操如下：

1.RESETCSS.css文件
2. 5重置样式(RESET CSS).html文件
3.效果展示：

第三部分：浮动

（1）三种情况的浮动：

1.A右浮动时：
2.A左浮动时：
3.当ABC全部左浮动时：

（2）浮动带来的问题：高度坍塌！

首先：子盒子不设置浮动时，没有任何问题：
其次：给所有子盒子设置浮动，出现高度坍塌！

（3）三种解决高度坍塌的方法：

1.父元素设置（超出部分隐藏）
2.设置一个空的div
3.使用伪元素：
三种解决高度坍塌的方法的总结：

第四部分：定位

（1）静态定位
（2）相对定位

效果展示：

（3）绝对定位

1.使用绝对定位时，div2的父级div1没有设置定位时，div2以浏览器为参考对象进行定位。因为div1高300px，div2相对于上方向下移动200px，如果是以父级为参考对象的，则div2下边框应与div1下边框重叠（但是有个问题哦—我没有重置样式，所以小伙伴们多多思考，为啥我这没重叠呢！）。
2.使用绝对定位时，父级设置了定位，则以设置了定位的这个父级为参考对象进行定位。

（4）固定定位

效果展示：

书籍介绍

【书籍封面】
【参考文案】
【内容简介】
【作者简介】
【编辑推荐】

????

????????直接跳到末尾???????? ——>领取专属粉丝福利????

☝️

重点来啦！重点来啦！！???????????? 小伙伴们，快拿出你们的笔记本，开始上课啦！（要打起十足的精神哦~）

回馈粉丝活动，本篇博客将会在评论区抽出三位幸运观众送出《机器学习数学基础（Python语言实现）》三本【包邮哦~】。书籍介绍请看文末。

第一部分：盒子模型（box-model）

学习盒子模型的目的： Html中的每个元素（标签），都有自己的大小（占地面积）了解每个元素的大小，有助于我们更好的对页面进行布局。

通过盒子模型的特征进行布局，是html布局的主要方式之一。

什么是盒子模型？可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念。

盒子模型的组成：盒子模型由内容（通过width和height指定的大小区域），内边距（内容区域和外框之间的空隙），边框和外边距（当前元素和其他元素之间的距离）组成。

盒子模型理解图：后端也得会的两万字CSS技术（下篇）_盒子模型

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

（1）盒子模型之边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之边框</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;

            /*复合样式  顺序可变*/
            /*1px：边框的宽度；solid：边框的样式；red：边框的颜色*/
            border:solid 1px red;
        }

        #div2{
            width: 300px;
            height: 300px;

            /*单独设置边框属性*/
            /*边框的宽度*/
            border-width: 5px;
            /*边框的颜色*/
            border-color: #623cff;
            /*边框的样式*/
            /*solid：实线；dashed：虚线；double：双线；dotted：点线*/
            border-style: solid;
        }
        #div3{
            width: 300px;
            height: 300px;

            /*设置边框部分属性，注意：使用的是复合样式*/
             /*设置上边框*/
             /* 可以拆分写：border-top-width:1px;border-top-color:red;border-top-style:solid;*/
            border-top:1px solid red;
            /*设置右边框*/
            border-right: 2px dashed yellow;
            /*设置下边框*/
            border-bottom: 4px dotted blue;
            /*设置左边框*/
            border-left: 8px double pink;
        }
    </style>
</head>
<body>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

<center><font size=2>（本人运营微信公众号：孤寒者）</font></center>
<center><font size=2>（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）</font></center>

</body>
</html>

效果展示：

后端也得会的两万字CSS技术（下篇）_外边距_02

（2）盒子模型之内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之内边距</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            /*通过复合样式设置一下盒子边框*/
            border: 1px solid red;

            /*一个个设置盒子内边距样式 注意：设置内边距时不能设置负值！！！*/
            /*设置内边距时，会自动把边框撑大，以适应设置的内边距*/
            /*上内边距*/
            padding-top: 50px;
            /*下内边距*/
            padding-bottom: 50px;
            /*左内边距*/
            padding-left: 50px;
            /*右内边距*/
            padding-right: 50px;

        }

        .div2{
            width: 300px;
            height: 300px;
            /*通过复合样式设置一下盒子边框*/
            border: 1px solid red;

            /*复合样式设置盒子内边距*/
            /*只设置1个值时：上下左右内边距都改为设置的值；
               设置2个值时，第一个值是上下内边距，第二个值是左右内边距；
               设置3个值时，第一个值是上边距，第二个值是左右边距，第三个值是下边距；
               设置4个值时，上右下左*/
            padding: 50px;
        }

    </style>
</head>
<body>

<div id="div1">啊啊啊啊</div>

<div class="div2">啊啊啊啊</div>

</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

效果展示：

后端也得会的两万字CSS技术（下篇）_html_03

（3）盒子模型之外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之外边距</title>
    <style>
        .div1{
            width: 300px;
            height: 300px;
            /*使用复合样式设置盒子模型的边框*/
            border: 1px solid red;

            /*这是将块状元素或者内联元素转换为行内块状元素*/
            /*转换的原因是：如果不转换，块状元素div会独占一行，不能观察到右外边距的效果；*/
            /*如果设置行内元素的话，行内元素不能设置宽高也不行。所以：转换为行内块状元素*/
            /*这样就可以解决所有问题了！！！*/
            display: inline-block;
            /*行内块状元素的特点：
            1.设置宽高有效*
            2.不会自动换行
            3.当有多个行内块状元素时，默认从左往右排序*/

            /*注意：设置外边距时，如果没有同级元素，比如此例中class为div1的上面没有div，那么这个盒子模型
            的上外边框以及右外边框就与浏览器相适应*/
            /*一个个设置各个外边距  注意：设置外边距可以为负值哦！！！*/
            /*上外边距*/
            margin-top: 50px;
            /*下外边距*/
            margin-bottom: 50px;
            /*左外边距*/
            margin-left: 50px;
            /*右外边距*/
            margin-right: 50px;
        }

        #div2{
            width: 300px;
            height: 300px;
            /*使用复合样式设置盒子模型的边框*/
            border: 1px solid blue;

            display: inline-block;

            /*使用复合样式设置盒子模型的外边距*/
            /*一个值时：上下左右外边距都是这个值；*/
            /*两个值时，第一个值是上下外边距，第二个值是左右外边距；*/
            /*三个值时：上  左右   下；*/
            /*四个值时：上右下左*/
            margin: 50px;
        }

        /*拓展：*/
        span{
            /*将内联元素转换为块状元素
            这样就可以设置宽高了！*/
            display: block;
        }

    </style>
</head>
<body>

<div class="div1"></div>

<div id="div2"></div>

<span>我是内联标签</span>

<center><font size=2>（本人运营微信公众号：孤寒者）</font></center>
<center><font size=2>（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）</font></center>


</body>
</html>

效果展示：

后端也得会的两万字CSS技术（下篇）_盒子模型_04

注意：

元素的总宽度：
width + (padding-left) + (padding-right) + (border-left) 
+ (border-right) + (margin-left) + (margin-right)

元素的总高度：
height + (padding-top) + (padding-bottom) + (border-top)
+ (border-bottom) + (margin-top) + (margin-bottom)

拓展：盒子模型之内外边距问题：

1.外边距问题：

相邻div间的margin，上下外边距取值为两个div各自设置margin的最大值，而不是相加值!!! 但是，左右外边距取值就是为相加值！！！

（1）比如：此例中，上面那个盒子设置了下外边距为50px，下面那个盒子设置了上外边距100px，那么实际上，这两个div边框之间的距离是100px，而不是150px！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距问题</title>
    <style>
        .top,.bottom{
            width: 300px;
            height: 300px;
        }
        .top{
            background: red;
            margin-bottom: 50px;
        }
        .bottom{
            background: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>

<div class="top">我是上面的边框</div>

<div class="bottom">我是下面的边框</div>

</body>
</html>

效果：

后端也得会的两万字CSS技术（下篇）_后端_05

（2）比如：此例中，左边那个盒子设置了右外边框为100px，右边那个盒子设置了左外边框50px，那么实际上这两个div边框之间的距离是150px！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距问题</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: #ff25ec;
            display: inline-block;
            margin-right: 100px;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            margin-left: 50px;
        }
    </style>
</head>
<body>

<div id="div1">我是第一个盒子</div>
<div id="div2">我是第二个盒子</div>

</body>
</html>

效果：

后端也得会的两万字CSS技术（下篇）_html_06

后端也得会的两万字CSS技术（下篇）_盒子模型_07

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

2.内边距问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距问题</title>
    <style>
        .pad{
            width: 100px;
            height: 100px;
            background: gray;
            padding-left: 100px;
        }
        .mar{
            width: 200px;
            height: 200px;
            background: deepskyblue;
        }
        .mar>div{
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-left: 500px;
        }
    </style>
</head>
<body>

<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>

</body>
</html>

效果：

后端也得会的两万字CSS技术（下篇）_css_08

盒子模型内外边距总结：

padding内边距设置，调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）
border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。

第二部分：重置样式（RESET CSS）

什么是RESET CSS? 翻译过来就是重置CSS。
为什么需要RESET CSS？浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致。
如何使用？直接将重置样式代码写进一个.css文件，引入.css样式表文件即可。

举个例子：

重置样式代码链接（红色部分）—https://meyerweb.com/eric/tools/css/reset/

将上述网站中的红色部分代码用CV大法放进我们的.css样式表中即可！！！

最后在我们的HTML文件中引入这个样式表。

实操如下：

1.RESETCSS.css文件

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

2. 5重置样式(RESET CSS).html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置样式（RESET CSS）</title>
    <link rel="stylesheet" href="RESETCSS.css">
</head>
<body>

<div style="width:100px;height:100px;background: red"></div>

</body>
</html>

3.效果展示：

后端也得会的两万字CSS技术（下篇）_盒子模型_09

第三部分：浮动

什么是浮动？就是让元素脱离正常的文档流。
为什么需要浮动？当正常文档布局不能解决的时候，则需要脱离正常文档流。
浮动带来的问题？高度塌陷。

（1）三种情况的浮动：

没有浮动时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: #a3ff50;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>

<center><font size=2>（本人运营微信公众号：孤寒者）</font></center>
<center><font size=2>（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）</font></center>


</body>
</html>

后端也得会的两万字CSS技术（下篇）_css_10

1.A右浮动时：

原本的块状元素是从上往下排列的，设置浮动让他脱离正常的文档流，不再和其他块状元素是一个级别的了，这就是为啥设置浮动之后块状元素可以同一行了

后端也得会的两万字CSS技术（下篇）_css_11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            /*给div1设置了右浮动*/
            float: right;
            background-color: red;
        }
        #div2{
            background-color: #a3ff50;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>

</body>
</html>

知识点补给站：

常见的导航栏是通过浮动和无序列表实现的！

2.A左浮动时：

直接将float属性值设为left即可！注意：A设置了浮动，就已经脱离了正常的文档流，可以理解为A现在已经飞到了天上，而B现在被A覆盖了。

后端也得会的两万字CSS技术（下篇）_css_12

3.当ABC全部左浮动时：

给B和C也设置float属性即可！注意：现在ABC三个都已经脱离了正常的文档流，飞到了天上！那么效果就由没设置的从上往下排，变成了从左往右排

后端也得会的两万字CSS技术（下篇）_后端_13

（2）浮动带来的问题：高度坍塌！

不设置浮动时，一个父盒子包着多个子盒子，给这多个子盒子设置浮动后，父盒子会包不住子盒子！高度坍塌问题出现的原因分析：父盒子没有设置宽高时，它本身的宽高是靠子盒子撑起来的，但是如果给子盒子设置了浮动，那么子盒子就脱离了正常的文档流，那么这就出现了问题，父盒子的宽高怎么办？

首先：子盒子不设置浮动时，没有任何问题：

后端也得会的两万字CSS技术（下篇）_后端_14

其次：给所有子盒子设置浮动，出现高度坍塌！

后端也得会的两万字CSS技术（下篇）_css_15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动带来的问题：高度坍塌</title>

    <style>
        div div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left;
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>

（3）三种解决高度坍塌的方法：

1.父元素设置（超出部分隐藏）

2.设置一个空的div

三种方法效果一样：

后端也得会的两万字CSS技术（下篇）_盒子模型_16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度坍塌的三种方法</title>

    <style>
        div div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left;
            background-color: blue;
        }
        /*第一种方法：父元素设置（超出部分隐藏）*/
        #div4{
            overflow: hidden;
        }

    </style>
</head>

<body>

<div id="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <!--第二种方法：添加一个空的div   可以解决的原因：设置了一个空的div，那么这个空的div就可以撑起父盒子的宽高了-->
    <div id="div5"></div>
</div>

</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

3.使用伪元素：

跟第二种方法类似，不过写法不一样！！！

伪元素就是在网页中不存在的一个元素，但是可以当做一个元素来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度坍塌的三种方法</title>

    <style>
        div div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            float: left;
            background-color: red;
        }
        #div2{
            float: left;
            background-color: #a3ff50;
        }
        #div3{
            float: left;
            background-color: blue;
        }
        /*第三种方法：使用伪元素  注意：是对父盒子使用！*/
        #div4:after{
            content: "";       /*一定要设置一个空的内容*/
            display: block;    /*默认加入的内容是内联元素，我们要使设置宽高有效，所以需要转成块状元素*/
            clear:both;        /*清除左右浮动*/
        }

    </style>
</head>

<body>

<div id="div4">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

</body>
</html>

三种解决高度坍塌的方法的总结：

父元素设置overflow:hidden；
添加一个空div;如果页面浮动布局多，就要增加很多空div，不推荐使用。
使用伪元素，推荐使用，建议定义公共类，以减少CSS代码。

第四部分：定位

什么是定位？定位就是将元素定在网页中的任意位置。
为什么需要定位？因为有时候需要对某些元素进行定位。
定位的好处：想定哪里，就定哪里。

（1）静态定位

（2）相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;

            /* 第一种：静态定位，即默认值，不会改变位置*/
            /*position: static;*/

            /*第二种：相对定位   底下必须写位置变化（top,bottom,left,right)。  以本身的初始位置为参考对象*/
            /*不脱离文档流*/
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

效果展示：

后端也得会的两万字CSS技术（下篇）_css_17

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

（3）绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        #div2{
            width: 100px;
            height: 100px;
            background-color: blue;

            /*绝对定位  以设置了定位的父级为参考对象。  脱离文档流，已经飞上天了。
            如果一直往上找没有找到设置了定位的父级，则以浏览器为参考对象*/
            /*绝对定位使用时，通常是父相子绝（父级设置相对定位；本身设置绝对定位）*/
            position: absolute;
            top:200px;
        }
        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            /*position: relative;*/
            /*top: 100px;*/
        }
    </style>

</head>
<body>

<div id="div1">
    <div id="div2"></div>
</div>

</body>
</html>

需要注意两种情况：：：

1.使用绝对定位时，div2的父级div1没有设置定位时，div2以浏览器为参考对象进行定位。因为div1高300px，div2相对于上方向下移动200px，如果是以父级为参考对象的，则div2下边框应与div1下边框重叠（但是有个问题哦—我没有重置样式，所以小伙伴们多多思考，为啥我这没重叠呢！）。

后端也得会的两万字CSS技术（下篇）_盒子模型_18

2.使用绝对定位时，父级设置了定位，则以设置了定位的这个父级为参考对象进行定位。

后端也得会的两万字CSS技术（下篇）_盒子模型_19

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

（4）固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        #div2{
            width: 100px;
            height: 100px;
            background-color: blue;

            /*固定定位  相较于当前浏览器*/
            /*顾名思义，固定定位就是固定在当前页面不会动    窗口滚动也不会变*/
            position: fixed;
            top: 100px;
            left: 100px;
        }
        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>

</head>
<body>

<div class="div1">
    <div id="div2"></div>
</div>

<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>

</body>
</html>

效果展示：

固定定位

书籍介绍

【书籍封面】

后端也得会的两万字CSS技术（下篇）_外边距_20

【参考文案】

近年来，随着人工智能技术的飞速发展，传统机器学习算法的应用领域也逐渐扩大，岗位需求增加，越来越多的人投身到人工智能、大数据领域的探索学习中。人工智能是目前计算机科学中十分热门的一个领域，而机器学习作为人工智能的核心技术，其底层逻辑就是数学知识的应用。本书亮点 1.104幅图表展示，降低理解难度。 2.知识点丰富，满足机器学习必备数学知识。 3.基于Python编程的“小试牛刀”，检验学习效果。 4.20个“专家点拨”，帮助读者答疑解惑。 5.数学思想和人工智能解决方案的有效实践。 6.提供书中相关案例的源代码，方便读者学习参考。

【内容简介】

本书是一本系统介绍机器学习所涉及的数学知识和相关Python编程的实例工具书，同时还介绍了非常经典的综合案例，除了编写机器学习的代码，还编写了深度学习的代码。本书一共分为两部分。第一部分为数学基础知识部分，包含 8个章节，介绍了微积分、线性代数、概率统计、信息论、模糊数学、随机过程、凸优化和图论的系统知识体系及几个数学知识点对应的Python编程实例。通过这些实例，读者能够了解Scikit-learn、Scikit-fuzzy、Theano、SymPy、NetworkX和CVXPY中相应的库函数的应用。第二部分为案例部分，包含4个章节，介绍了微积分、线性代数和概率统计问题的建模方法、求解流程和编程实现，以及工业生产领域的Python实战，包含了机器学习算法和深度学习PyTorch框架的应用。在学习本书内容前，建议读者先掌握基本的Python编程知识和数学基础，然后将本书通读一遍，了解本书的大概内容，最后再跟着实例进行操作。本书既注重数学理论，又偏重编程实践，实用性强，适用于对编程有一定基础，对系统的数学知识非常渴望，想从事人工智能、大数据等方向研究的读者。同时也适合作为广大职业院校相关专业的教材或参考用书。

【作者简介】

周洋成都嘉捷信诚解决方案专家，拥有12年toB行业大数据相关经验，对工业大数据、智慧电厂、智慧城市、智慧交通、智慧安防等行业趋势发展有前瞻性判断力。对机器学习、深度学习、大数据、知识图谱等技术有深入研究。

【编辑推荐】

1.104幅图表展示，降低理解难度。 2.知识点丰富，满足机器学习必备数学知识。 3.基于Python编程的“小试牛刀”，检验学习效果。 4.20个“专家点拨”，帮助读者答疑解惑。 5.数学思想和人工智能解决方案的有效实践。 6.提供书中相关案例的源代码，方便读者学习参考。

京东自营购买链接

https://item.jd.com/13345898.html

当当自营购买链接

http://product.dangdang.com/29271763.html

公众号后台回复【CSS下篇笔记】，可得CSS下篇系列MD原文笔记~ 【可以公众号里私聊，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】