??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指定的大小區域），內邊距（內容區域和外框之間的空隙），邊框和外邊距（當前元素和其他元素之間的距離）組成，
盒子模型理解圖：

（本人運營微信公眾號：孤寒者）（歡迎喜歡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>

效果展示：

在這里插入圖片描述

（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，喜歡編程的小伙伴們的關注哦~）

效果展示：

在這里插入圖片描述

（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>

效果展示：

在這里插入圖片描述

注意：

元素的總寬度：
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>

效果：
在這里插入圖片描述

（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>

效果：
在這里插入圖片描述

（本人運營微信公眾號：孤寒者）（歡迎喜歡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>

效果：
在這里插入圖片描述

盒子模型內外邊距總結：

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.效果展示：

在這里插入圖片描述

第三部分：浮動

什么是浮動？
就是讓元素脫離正常的檔案流，
為什么需要浮動？
當正常檔案布局不能解決的時候，則需要脫離正常檔案流，
浮動帶來的問題？
高度塌陷，

（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>

在這里插入圖片描述

1.A右浮動時：

原本的塊狀元素是從上往下排列的，設定浮動讓他脫離正常的檔案流，不再和其他塊狀元素是一個級別的了，這就是為啥設定浮動之后塊狀元素可以同一行了

在這里插入圖片描述

<!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覆寫了，

在這里插入圖片描述

3.當ABC全部左浮動時：

給B和C也設定float屬性即可！注意：現在ABC三個都已經脫離了正常的檔案流，飛到了天上！
那么效果就由沒設定的從上往下排，變成了從左往右排

在這里插入圖片描述

（2）浮動帶來的問題：高度坍塌！

不設定浮動時，一個父盒子包著多個子盒子，給這多個子盒子設定浮動后，父盒子會包不住子盒子！
高度坍塌問題出現的原因分析：
父盒子沒有設定寬高時，它本身的寬高是靠子盒子撐起來的，但是如果給子盒子設定了浮動，那么子盒子就脫離了正常的檔案流，那么這就出現了問題，父盒子的寬高怎么辦？

首先：子盒子不設定浮動時，沒有任何問題：

在這里插入圖片描述

其次：給所有子盒子設定浮動，出現高度坍塌！

在這里插入圖片描述

<!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

三種方法效果一樣：
在這里插入圖片描述

<!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>

效果展示：

在這里插入圖片描述

（本人運營微信公眾號：孤寒者）（歡迎喜歡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下邊框重疊（但是有個問題哦—我沒有重置樣式，所以小伙伴們多多思考，為啥我這沒重疊呢！），

在這里插入圖片描述

2.使用絕對定位時，父級設定了定位，則以設定了定位的這個父級為參考物件進行定位，

在這里插入圖片描述

（本人運營微信公眾號：孤寒者）（歡迎喜歡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>

效果展示：

固定定位

書籍介紹

【書籍封面】

請添加圖片描述

【參考文案】

近年來，隨著人工智能技術的飛速發展，傳統機器學習演算法的應用領域也逐漸擴大，崗位需求增加，越來越多的人投身到人工智能、大資料領域的探索學習中，人工智能是目前計算機科學中十分熱門的一個領域，而機器學習作為人工智能的核心技術，其底層邏輯就是數學知識的應用，
本書亮點
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原文筆記~ 【可以公眾號里私聊并標明來自CSDN，會拉你進入技術交流群（群內涉及各個領域大佬級人物，任何問題都可討論~）--->互相學習&&共同進步（非誠勿擾）】

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/347177.html

標籤：其他

上一篇：什么都可以丟，唯獨不能丟了你

下一篇：華為網路配置（RIP）

后端也得會的兩萬字CSS技術（下篇）

??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）絕對定位

2.使用絕對定位時，父級設定了定位，則以設定了定位的這個父級為參考物件進行定位，

（4）固定定位

效果展示：

書籍介紹

【書籍封面】

【參考文案】

【內容簡介】

【作者簡介】

【編輯推薦】