Java學習筆記：2022年1月8日
Java學習筆記：2022年1月8日
摘要：這天主要學習了HTML超文字標記語言以及CSS層疊樣式表的基本知識，主要就是通過這兩種技術進行基本的網頁渲染。
@
目錄1.HTML語言基礎知識
1.HTML語言簡介
HTML全稱為超文字標記語言，它不是一種程式語言，而是一種標記語言，用於組織資訊，標記文字，簡而言之，就是將網際網路上離散的網頁資訊組織起來，讓他們成為相對獨立的個體，進而能夠被人眼識別。簡而言之，它是一種網頁排版的規則。在百度百科上，HTML語言是這樣被定義的：HTML的全稱為超文字標記語言，是一種標記語言。它包括一系列標籤．通過這些標籤可以將網路上的文件格式統一，使分散的Internet資源連線為一個邏輯整體。HTML文字是由HTML命令組成的描述性文字，HTML命令可以說明
真是晦澀難懂啊，對於我們初學者或者使用者來說，可以這樣記：HTML語言不是一種程式語言，而是一種標記語言，它不用於邏輯的書寫，而是用於網頁前端的排版，它是一種頁面排版的規則。我們書寫時遵循某種規則，瀏覽器也會按照這個規則進行解析，這樣一來就可以解析獲得我們所預期的頁面佈局，HTML中的基本元素是標籤，我們使用標籤來進行格式排版，相對應的，瀏覽器也會按照標籤來進行解析，在合適的地方寫相對應的標籤，瀏覽器在進行解析時就會解析出正確的資訊，我們通過瀏覽器這個黑盒作為標籤程式碼和前端頁面的對映函式，只通過程式碼就可以得到一個預期的頁面。
2.HTML的基本構造
HTML語言是一種標籤語言，在HTML語言中任何希望可以得到控制的東西，都要寫在標籤裡，如我們希望控制一段文字的字型以及顏色，那麼前提就是它必須存在一個標籤中，如果它不存在，那麼網頁確實可以將它顯示出來，但是我們沒有辦法使用某些規則控制他們的樣式。
在HTML中，縮排是非常重要的一種幫助人們理解程式碼的手段，通常來講，我們使用縮排來表示包含關係，被包含的元素標籤往往需要比包含它的元素標籤多縮排一格，如下：
<div class="div1">
<div class="div2">See</div>
<div class="div2">You</div>
<div class="div2">Cow</div>
<div class="div2">boy</div>
<div class="div2">Bebop</div>
</div>
我們注意到，div2這個類他們是同級的，而div1包含它們，這是他們之間就應該有這樣的縮排關係，使用這種縮排關係有助於程式碼具備良好的可讀性，由於程式碼中的包含關係和網頁上的包含關係是一一對應的，因此根據包含關係進行縮排，有助於我們結合程式碼理解頁面的佈局，這是一種非常好的習慣。
HTML的整體構造如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
首先在最開始是關於檔案型別的宣告，<!DOCTYPE html>便是宣告這個檔案是一個html型別的檔案，之後就是一個大的html型別的標籤，它是整個檔案的主體，需要表達在網頁上面的東西，必須寫在它裡邊的<body>標籤中才能夠被識別。在它的<head>標籤中，主要有一些基本資訊，比如<mate>標籤中的元資訊，這關標籤中存有一些針對瀏覽器引擎的基礎資訊宣告，如更新頻度的描述等，以及這裡的“UTF-8”的編碼型別。<title>標籤中可以自定義你希望的彈窗標題，也就是瀏覽器上邊的頁面小彈窗中的標題。在這裡，我們還可以寫上<style>標籤，進行內部樣式的書寫，還可以加入<link>標籤，引入一些外部檔案，用於支援本頁面的開發設計。
在<head>標籤和<body>標籤之前我們也可以新增其他一些標籤，最常用的為<script>標籤。<script>可以在<body>標籤的上邊和下邊插入， 當然也可以寫一個獨立的Js檔案然後進行引入。需要注意的是在HTML頁面中，也是從上到下進行編譯識別的，因此當<script>標籤在上邊並進行一些元件操作時，很可能會發生找不到元件的錯誤，因為這個<script>標籤在載入併發揮作用時，下邊的標籤還沒有被識別並加載出來，這時需要將Js操作寫在文件就緒函式中，這種函式會保證裡邊的操作在下邊的程式碼在識別載入之後再被執行，進而避免上述問題。在之後的學習中會著重研究這一塊知識點。
3.小結
<!DOCTYPE html>標籤是用來宣告檔案型別的，瀏覽器通過它就可以知道某個檔案的型別。我們通常叫它文件型別宣告，在下面的圖片中，它宣告文件型別是html：
<mate>叫做元標籤，也叫元元素，元標籤。可以理解為某種意義上的源頭，它裡邊放一些基本的資訊。<charset>是字元設定，設定編碼用的。
我們在書寫HTML編碼時，一定要注意縮排，注意將每層寫完再寫其他的層級，這樣可以避免出錯。我們很少使用記事本等基礎工具來書寫HTML檔案，因為這種標記語言寫起來非常繁瑣，需要注意的地方非常多，因此我們通常會使用一些工具來書寫HTML語言，如Visual Studio Code，WebStorm等，Visual Studio Code是一個免費且且好用的程式碼編輯器，它不僅可以書寫HTML語言，還可以書寫其他語言的工程，非常好用，快捷鍵也很方便，關鍵是免費，因此我將主要使用它來進行HTML語言的編寫。（它可以加EVA的主題，非常因吹斯聽。）
最後一點，在HTML中，縮排是一個非常重要的東西，但是我們需要注意的是，在編輯器自己生成的框架部分，<html>標籤和<body>標籤以及<script>標籤也是有包容關係的，但是它們之間沒有縮排現象，這是因為他們都是基礎的標籤，經過多次反覆的實驗發現為它們進行縮排意義不大且會讓程式碼顯得更加凌亂，因此就不縮進了。
2.HTML語言的編寫
1.盒子模型
在使用HTML語言繪製的前端頁面上，盒子模型是最為基礎重要的繪製原理。可以說，整個前端頁面的排版，全部都是由一個個的盒子們構建而成的，那什麼是盒子模型呢？首先我們先介紹兩種不同的盒子。在HTML中，使用<div>標籤來進行繪製的元素，在進行連續書寫時，會發生換行的現象，而使用<span>繪製的元素，在瀏覽器中不會發生換行的現象，這是為什麼呢？這是因為<div>標籤對應的盒子模型是塊級盒子模型，因此這種標籤或者說是元素，也叫作塊級標籤或者塊級元素，而<span>標籤則屬於內聯級盒子模型，這種標籤或者說是元素，也被叫做內聯級標籤或者內聯級元素，在HTML的盒子模型中，存在兩種大類，就是塊級盒子與內聯級盒子。
①.塊級盒子(元素、標籤) 特徵：獨佔一行；對寬度、高度支援。
②.內聯級盒子(行內盒子，行內元素、標籤) 特徵：不獨佔一行，對寬度高度不支援。
所謂不支援指的是使用層疊樣式表為其加高度和寬度，在渲染時完全不會展現出這兩種屬性，瀏覽器根本不能識別，更別說繪製出來了。而所謂獨佔一行，就是完全獨佔這一行，沒有給下一個元素留空間，因為只能換行了。這種元素把這一行完全佔據了，塊級盒子獨佔一行，不管它的寬度是多少，都會完全獨佔這一行，沒有為下一個元素留空間，因此下一個繪製的元素只能往下繪製了。接下來我們進行實驗，看看是否真的是這樣。
首先我們書寫HTML程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 100px;width: 100px;background-color: aqua;"></div>
<div style="height: 100px;width: 100px;background-color: rgb(255, 72, 0);"></div>
</body>
</html>
我們寫了兩個不同的div，為它們賦予了同樣的大小屬性，而顏色屬性不同，一個是淺藍色，一個則是紅色，我們放到瀏覽器中進行解析：
結果如圖，果真發生了換行，現在我們探究一下其真實的原因，我們將寬度設定刪除，看看會發生什麼：
我們發現，當刪除掉寬度設定後，每個div發生了自動的延展，直接佔據了整行空間，因此我們得出結論，div標籤以及其他一些塊級元素，都是預設佔據整行的，當不為它設定寬度時，它就會預設的填充整行，而當設定了寬度時，為了儲存某些排版上的特性，它仍然是佔據整行，只不過是對寬度以外的畫素不再進行渲染了。
接下來我們試試span標籤，我們書寫程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span style="height: 100px;width: 100px;background-color: aqua;"></span>
<span style="height: 100px;width: 100px;background-color: rgb(255, 72, 0);"></span>
</body>
</html>
那麼顯示如何呢？是這樣的：
我們很意外的發現東西直接都沒了，只剩下白茫茫一片大地真乾淨。這是為什麼呢？我們明明設定好的heigth屬性和width屬性根本沒有發揮作用，這是為啥呢？這是因為內聯級元素中的高度以及寬度樣式根本不能識別，它對寬高度不支援，它的空間大小，完全是由裡邊的東西撐起來的，而非是認為設定的，現在我們往裡邊寫上一點東西。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span style="height: 100px;width: 100px;background-color: aqua;">See you!</span>
<span style="height: 100px;width: 100px;background-color: rgb(255, 72, 0);">Cowboy Bebop!</span>
</body>
</html>
接下來，瀏覽器顯示如下：
這樣一來，整個元素就被撐開了，而且背景顏色這一屬性也被展現了出來。
那麼，塊級元素就真的只能獨佔一行了，無法改變了嗎？當然不是，即使是塊級元素，也是可以被整的像內聯級元素一樣，在一行上並列排布的，如何實現？有些人可能認為只要將一個塊級元素包裝進內聯級元素就好了，接下來我們試試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>
<div style="height: 100px;width: 100px;background-color: aqua;">See You!</div>
</span>
<span>
<div style="height: 100px;width: 100px;background-color: rgb(255, 72, 0);">Cowboy Bebop!</div>
</span>
</body>
</html>
顯示如下：
很顯然，目的沒有達成，那麼究竟是使用什麼辦法呢？我們有三種方法可以選擇，一是浮動樣式，在樣式中新增浮動屬性之後，可以設定浮動方向，這樣一來，塊級元素就可以按照浮動方向進行行上面的排布，但是這種方法有些缺陷；另一種方法叫彈性盒子模型，它可以通過修改彈性方向來控制塊級元素的行上邊的排布，且比浮動樣式更加安全，至於怎麼安全，怎麼使用，我們在之後的筆記中會詳細說明；第三種方法比較硬核，在每個標籤的樣式中，都存在一個display屬性，display屬性可以定義元素型別，塊級盒子自帶一個display:block，內聯自帶display:inline，通過css語言可以修改不同標籤的型別，但是這樣就會使得div從根本上變成一個內聯級元素，span從根本上變成塊級元素，因此丟失一些特性，通常這些特性我們是有需要的，因此這種方法不是特別常見，但是這種方法也不失為一種靈活的排版方式。在此我們先知道這三種使得塊級元素可以在同一行上排布的兩種方法就行了，因為我們現在必須開始講盒子模型了。
2.什麼是盒子模型？
盒子模型可以理解成一種佈局與排版的規則，在基於HTML語言的前端頁面中，所有的元素都可以看做一種盒子，這種盒子裡有很多不同的組成部分，我們通過控制這些組成部分進而對每個元素進行相應的控制，進而完成頁面的排版。需要注意的是，盒子模型本質上是基於CSS的，CSS是層疊樣式表，在之後我會著重介紹CSS語言，這裡我們先從HTML語言以及前端元素的展現方式上介紹盒子模型。
每一個HTML元素都可以看做一個盒子，顧名思義，盒子是用來裝東西的，這裡邊的盒子模型也是一種容器，我們將資訊放入容器，然後對盒子進行樣式的修改，這樣我們就間接的對盒子內部的東西進行了修改。在HTML中，每個元素的盒子有如下部分：
每一個元素都是一個盒子，它們主要由四個部分組成，分別為：內容區、填充區、邊框區、外邊距。實際上，外邊距很難和區域聯絡在一起，外邊距實際上更偏向於一個屬性，我們可以將外邊距區理解為盒子外的區域，但實際上，外邊距確實是一個組成部分，因此為了便於理解，有些人也將外邊距區叫做外界區。
如圖所示，內容區位於盒子模型的最內部，實際上，它在編碼中也是位於一個標籤的最內部，如div標籤：
<div>
大家好！
</div>
這個大家好位於雙標籤之間，被瀏覽器解析之後，它便是位於上圖中的內容區中。
邊框區就是盒子理論上的最外部的框，它是整個元素可以被人眼看見的顯示部分的邊境，整個元素長寬，邊框的樣式，粗細都是歸邊框區管，在CSS中有一個專門針對邊框區進行樣式修改的屬性，為：border。使用border屬性進行控制，我們可以靈活的控制整個元素邊框的粗細，樣式。
對於border屬性，我們用的多的是它的三個方面：border-style：邊框的樣式、border-width：邊框的粗細、border-color：邊框的顏色。另外我們要牢記border屬性的四個方向：border-top、border-right、border-bottom、border-left。border是一個複合屬性，關於這個我之後在講完填充區以及外界區之後會詳細分析這一點。關於border的某一個樣式，我們可以使用none值來進行取消，如我們已經設定了border-style的具體樣式，這時，我們可以在樣式程式碼中這個樣式的下邊，或者更新的地方為這個樣式屬性重新賦值為none，這樣一來這個樣式就會消失，這樣一來我們可以先為其賦值設定樣式，再設定none屬性讓這個樣式消失。這在設計動態變化的頁面時有奇效。
border屬性還有一個最基本的用法，那就是直接使用border屬性，後邊可以聯寫三個值，但是和padding與margin不同，這種寫法只能是控制所有的邊，但是它可以控制三個屬性，即寬度，型別，顏色，如下：
border:10px solid red;
它的意思為：寬度為10畫素的，樣式為實心的紅色邊框，它一下子定義了：寬度，樣式，顏色三種屬性，這種寫法只能一次控制上下左右四條邊框，也就是所有的邊框。同時，這種寫法不用在上邊定義border-style，因為在其內部已經存在了。
內邊距為上圖中內容區和邊框區的藍色部分，顧名思義，內邊距就是內容區和邊框區的距離，當我們希望元素內的文字和邊框的內表面的距離稍微大一點時，我們就可以通過設定內邊距的畫素大小來進行調節。內邊距同樣具有一個屬性來進行控制，這個屬性為：padding，padding這個屬性和border屬性不同，它不是一個花裡胡哨的屬性，而是一個專一的，專門用來控制距離的屬性，它有一個自己的控制格式。
padding後邊的引數排列，有一個自己的解析方法或者說是解析規則，padding後邊的屬性值，就是距離，這個距離值可以用多種單位來修飾，通常是用畫素(px)來修飾，不加任何字尾的padding屬性後邊最多可以加四個屬性值，這四個屬性值會被分別解析為：上邊的距離，右邊的距離，下邊的距離，左邊的距離。也就是說，它的解析順序是從上邊開始，然後順時針旋轉的，具體來說是這樣的：
padding:上邊距 右邊距 下邊距 左邊距;
padding：10px 20px 30px 40px;
//這樣一來一個元素的盒子模型內部的上邊距為10px，右邊距為20px，下邊距為30px，左邊距為40px
同時，這裡邊的值可以不填滿四個，填寫一個到三個時，它也有一套獨特的解析方式，如下：
padding:所有方向;
padding:10px;
//當padding後邊只有一個引數時，瀏覽器就會將其解析為所有方向的邊距，此時內容區的上下左右到邊框區的內表面的距離都會被控制
也就是說，當padding後邊只有一個屬性時，它控制的是四個方向的距離。
當padding後邊跟兩個值時呢？如下：
padding:上下 左右;
padding:20px 30px;
//此時這兩個值會分別被渲染到上下邊距，左右邊距。
因為一共有四個方向，四個方向正好可以被分為兩對，因此瀏覽器將他們按照先後順序分為兩對，這是的兩對的順序和之前四個屬性時的渲染順序不同了，變成了上下，左右，注意這裡的順序變化。當上下和左右邊距需要一致時通常使用這種格式。實際上這種識別方式還是和最上邊的四個值的識別方式有關聯的，因為它的基本識別方式為上右下左，因此當只有兩個值時，它便優先識別到了上面和右邊，而其他兩個方向沒有定義，因此其他兩個方向就預設和與他們相對的方向一樣了，也就是上和下相對，左和右相對。
當有三個屬性時，情況又發生了變化，如下：
padding:上 左右 下;
padding:10px 30px 20px;
//此時三個屬性分別被渲染為，上邊，左右邊，下邊。
這個渲染規則實際上也是和最上邊的基本規則有關，因為基本的渲染規則為上、右、下、左，這時我們可以識別到上，右，下，而最後一個“左”是識別不到的，因此這時瀏覽器先對上，右，下進行渲染，而左預設和它相對的右一致。
另外一個需要我們注意的是：padding屬性提供的距離，是額外增加的，我們為它設定不同的距離，會直接導致整個元素變大，並且無視使用height與width屬性設定的長寬，如：
這時，瀏覽器是這樣的：
而我們為其加大邊距後，這時：
瀏覽器中是這樣的：
明顯發生了大小的改變，而我們在屬性中也明明設定了長寬屬性。即使我們將這個padding屬性放到最上邊，也不會被長寬屬性覆蓋掉。當我們修改長寬的值之後，整個元素的大小又發生了變化，這裡邊的原理就是是什麼呢，實際上，在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。換句話說，width和height屬性是控制的內容區的大小，當padding不設定時，預設為零，這時內容區的大小直接影響整個元件的大小 。而padding設定值後，填充區和內容區的長寬設定將共同影響整個元件的大小，因此我們可以知道：元件的大小是由內容區和填充區共同影響的。在不設定填充區時，內容區和填充區預設是重合的，或者說填充區此時完全沒有畫素。
外界區也被稱為外邊距，也就是邊框區的外部距離其他元件的距離，設定這個屬性我們可以控制組件與元件之間的距離，我們可以換一種理解方式，就是從邊框區的外邊框畫素出發，到設定的畫素的距離處有一個透明的盒子，這個盒子不會渲染，但是它的碰撞會加入計算，它會佔用整個頁面的空間，進而和其他元件劃出界限。
控制外界區的屬性名為：margin。margin和padding屬性類似，是一個專門用來控制距離的屬性，同時，margin屬性也有上右下左四個方向的渲染屬性，同時它的識別規則和padding的一模一樣，需要注意的是margin屬性擁有一個叫auto的屬性，使用這個屬性可以讓元件自動居中。在瀏覽器中，頁面是有寬度限制的，但是沒有高度限制，因此對於一個元件來說，它至少存在一個寬度，才能使用這個屬性值，因為寬度方向的居中需要使用到它的寬度進行計算。
現在我們再來看border這個屬性，我們現在可以看到它和其他屬性的不同了，border屬性是一個複合屬性，它控制的東西並不單一，它不僅可以控制粗細，還能控制顏色，樣式等各種屬性，但是相對應的，它失去了margin和padding這種可以聯寫幾個屬性直接對不同方向進行控制的方式，使用border控制邊框只能是直接用border直接控制邊框，或者是用四個方向進行控制，它在屬性名的部分可以進行復合聯寫，如：
border-left-color: red;
同時我們需要尤其注意的是：border是一個複合屬性，它樣式的展現需使用多個border屬性進行分工合作。border屬性中最為重要的就是border-style屬性，使用這個屬性可以設定邊框的樣式，而且想要進行邊框設定的話，樣式中必須要有這個屬性，沒有這個屬性，邊框就渲染不出來。如：
瀏覽器如下：
當我們在前邊設定border-style:solid之後，如：
瀏覽器中有：
可見，沒有border-style的話，邊框的樣式是渲染不出來的，在所有的邊框屬性之前，加上border-style屬性，就可以讓邊框展示出來。border-style屬性有著很多不同的值，solide也就是“實心的”只不過是其中之一，它還要很多其他多種多樣的值，這裡不再一一介紹。需要注意的是，邊框的粗細也會影響到整個元件的整體大小，也就是說，整個元件盒子的大小取決於：內容區寬高，內邊距長度，邊框粗細。當只有一個元件時，其大小就是受這些屬性的影響，當頁面中存在多個元素，外邊距的大小也會對元件的大小產生影響，同時有可能導致內容器的擠壓，這裡暫時不進行深入研究。
由上可知，邊框和外邊距也會讓元素寬度變化，而我們用的width和height一般只對內容起作用，但是加上box-sizing：border-box這個屬性值之後，就可以使得width和height是對這個盒子包括邊框進行長度高度控制，我們便可以進行更為巨集觀的控制。
3.小結
盒子模型主要分為四個區域：內容區，填充區，邊框區，外邊距。我們通過控制這四個屬性來進行頁面的排布。在瀏覽器中，為了美觀，會自動的為<body>標籤加margin以及padding屬性，因此我們若是想完全按照自己的樣式渲染，在一開始，可以使用“*”選擇器，也就是類選擇器中的正則表示式，表示全部的意思，把整個頁面中的所有樣式進行清楚，如下：
.*{
margin:0;
padding:0;
}
我們在進行距離上的排版是，可以多使用百分比來控制各種距離，而不是使用畫素，這樣一來當頁面整體發生縮放時，它可以保證裡邊的元素排布不會混亂，是一種健壯性很強的排布方式，建議多使用。
3.關於浮動屬性
在塊級元素中有一個屬性叫做浮動，寫做：float，和Java中的浮點型別是一個字母，也譯為：飄。浮動型別可以讓塊級元素變得像行內元素那樣，可以按照一行一行的排列，同時可以改變浮動方向。這個有點類似在水中飄浮的意思，設定的飄浮方向就是水面，被設定好的元素就會主動向水面的方向上浮，若是上邊已經有一個元素了，那麼它就被擋住了，進而形成這種按行排列的效果。當代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</body>
</html>
三個塊級元素就可以按照行並排了，如下：
然而，float是存在弊端的，當我們用一個父元素容納這幾個並排的塊級元素時，當父元素的高度沒有設定，會出現父標籤渲染消失，元素重疊的現象，如下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
float: left;
}
.try {
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="try">
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</div>
</body>
</html>
在網頁中，父元素就完全不會展現，子元素不會撐開父元素：
而即使設定了高度，當高度比子元素小時，程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
float: left;
}
.try {
width: 900px;
background-color: blue;
height: 150px;
}
</style>
</head>
<body>
<div class="try">
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</div>
</body>
</html>
也會有如下情況：
這並不好看，那麼我們如何解決這個問題呢？CSS提供了一個比較方便的方式：溢位隱藏。我們如何使用溢位隱藏呢？溢位隱藏需要在父元素內使用，我們為父元素設定一個屬性：overfloat，屬性名設定為hidden，這樣就可以解決這個問題，然而這個方法有缺陷，為什麼有缺陷呢？我們先看看當不設定高度時的情況，程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
float: left;
}
.try {
width: 900px;
background-color: blue;
overflow: hidden;/*在不設高度的情況下進行溢位隱藏，就可以解決這種問題*/
}
</style>
</head>
<body>
<div class="try">
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</div>
</body>
</html>
效果如下：
這樣一來問題就得到解決了，看似解決的非常完美，但是，當我們為父元素設定高度後，讓我們看看會發生什麼，程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
float: left;
}
.try {
width: 900px;
background-color: blue;
height: 150px;
overflow: hidden;
/* 我們為父元素設定了一個小於子元素的高，並且添加了溢位隱藏屬性 */
}
</style>
</head>
<body>
<div class="try">
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</div>
</body>
</html>
情況如下：
我們發現，現在情況和上邊發生了變化，現在父元素的高度不再取決於子元素，而是取決於自身，高度完全按照父元素的高度進行了渲染，子元素多出去的部分直接被截掉了。
重點來了，我們需要注意，overfloar:hidden叫做溢位隱藏，見名知意的話，它應該是用於解決溢位問題的屬性，而非解決浮動問題屬性。實際上，溢位隱藏能夠解決不設高度時，父元素不被渲染的問題只是它的一個特性，而不是它的設計目的，它的設計目的是用於隱藏父元素中溢位的子元素這一問題。因此，它並不能完美的解決我們的問題，它解決不設高度時父元素不渲染的情況，只是它的解決溢位問題時，父元素高度為零的一種特殊情況，在這種特殊情況下它會導致父元素隨子元素的高度進行擴充，而當父元素的高度存在時，它這一特性便會消失，轉而直接展示自己的功能，即進行溢位隱藏。因此我們可知：使用float進行塊級元素行方向排布時，當父元素不設高，導致父元素不渲染的情況可以用溢位隱藏解決，但是溢位隱藏被設計的目的並不是解決這個問題，這只是利用溢位隱藏的特性偶然解決了這個問題，當父元素設高時，溢位隱藏就會展現自己的真實能力，即隱藏掉溢位父元素的部分，但此時我們的目的不是隱藏溢位部分，因此會導致頁面排版錯誤。
所以我們在解決這個問題時，儘量不用溢位隱藏，或者也儘量不用浮動，而是使用另一種更為高效的方法：彈性盒子模型。
4.彈性盒子模型
所謂彈性盒子，就是讓這個盒子變得有彈性，可以隨著裡邊的子元素進行大小擴充套件，與此同時，它的另一個特性，就是可以使得父元素內部的子元素按照行方向進行排布，那麼如何使用彈性盒子模型呢？我們只需為父元素新增一個屬性：display: flex;即可，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
}
.try {
width: 900px;
background-color: blue;
display: flex;
}
</style>
</head>
<body>
<div class="try">
<div class="try1">See You!</div>
<div class="try1">Cow</div>
<div class="try1">boy Bebop!</div>
</div>
</body>
</html>
然後我們就可以發現頁面有：
當我們設定父元素的高度後，仍然會出現溢位現象，但是這時彈性盒子模型的使用不會導致子元素被擷取，因為它被設計出來的目的並不是擷取，而是真正的解決這種問題。
當我們需要解決行方向排布的問題時，最好用彈性盒子模型，而不是使用浮動與清除浮動，因為清除浮動的方式並不是真正用來清除浮動的，它是用於隱藏溢位部分的，這樣使用容易產生歧義與錯誤，最好專門的方法就用在專門的領域。
5.彈性盒子模型的基本用法
當我們不想用橫向佈局，但又想用彈性盒子模型時，我們可以使用 flex-direction:colum-reverse；用這個方法可以改變彈性盒子模型的排列方向，讓其在縱向排列，而不再橫向排列。這個實際上是通過引數改變了排列方向，顯得像是恢復了塊級元素的特性，實際上是將按行方向排列變成了按列方向排列。
如果希望成為換行這種模式，用flex-warp:warp。這個屬性是讓彈性盒子內的元素在必要是進行拆行，也就是說當一行不再足夠放元素時，另起一行放置元素。實際上就是子元素的換行，當子元素設定了固定的長寬時，使用這個屬性非常的有幫助，可以讓子元素不發生形變的按照設計好的方式進行展現。
justify-content:排布方向的分佈方式，即改變排布方式。控制未佔滿空間的空白。屬性有：flex-start flex-end center space-between space-around
另一個重要屬性為排列方向垂直方向的對齊方式：align-item。它有一些重要的屬性值，為：
1.flex-start;預設就是這個模式，開端/頂端對齊，就是以上邊框為基準線對齊
2.flex-end;底部對齊，以下邊框為基準線對齊
3.flex-center;居中對齊，按照中線對齊
4.baselinr;基準線對齊，以內容底邊進行對齊，也就是子元素內容器的底邊進行對齊。
以上為基本的彈性盒子模型的屬性及使用方法，在之後的學習中，我將會詳細的總結彈性盒子模型的使用方法。這裡只是作為一個學習瞭解的內容筆記。
6.樣式與選擇器
關於樣式的書寫，在上邊的筆記中我就已經使用了不少，現在我們來介紹一下樣式這個東西。樣式，實際上就是使用CSS，層疊樣式表所書寫的程式碼部分。我們大部分的樣式都是用CSS書寫的，樣式分為三種：行內樣式、內部樣式、外部樣式。這三種樣式的使用體現了程式碼複用的思想。現在我們來逐一介紹這幾種樣式。
1.行內樣式
行內樣式是最為基礎的樣式書寫方式，它書寫在一個元素的style屬性內，我們可以使用行內樣式對每個元素或者說是標籤進行最為精確的樣式設計。
2.內部樣式
內部樣式書寫在html檔案的<head>標籤內的<style>標籤中，在這裡我們能窺見CSS程式碼的書寫方式，這就是一個內部樣式：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.try1 {
padding: 30px;
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
}
.try {
width: 900px;
background-color: blue;
display: flex;
/* 我們為父元素設定了一個小於子元素的高，並且添加了溢位隱藏屬性 */
}
</style>
</head>
你可能已經注意到了裡邊的try單詞有些特殊，這個叫做選擇器，稍後就會解釋。
3.外部樣式
外部樣式則是程式碼複用的進一步加深，它將CSS程式碼和HTML程式碼剝離開，自主形成了一個CSS型別的檔案，HTML檔案需要使用Link標籤進行引入才可以使用，它內部的書寫方式和內部樣式一樣，只不過是自己獨立成為了一個檔案。如在這個html程式碼中便使用到了外部樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>See you CowBoy Bebop 2022</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">
<span class="bp">About Bebop</span>
<span class="more">more+</span>
</div>
<ul class="main">
<li>
<div class="imgfield">
<img src="images/3.png" alt="">
</div>
<h3>Spike Spiegel</h3>
<p>Once upon a time, in New York City in 1941...</p>
<p>At this club opens to all comers to play, Night after night,</p>
<p>At a club named "MINSTONS PLAY HOUSE" in Harlem,</p>
<p>they play jazz session competing with others.</p>
</li>
<li>
<div class="imgfield">
<img src="images/2.png" alt="">
</div>
<h3>Faye Valentine</h3>
<p>Young jazz men with new sense are gathering.</p>
<p>At last, they created a new genre itself.</p>
<p>They are sick and tired of conventional fixed style jazz.</p>
<p>They eager to play jazz more freely as they wish. then...in 2071 in the universe.</p>
</li>
<li>
<div class="imgfield">
<img src="images/4.png" alt="">
</div>
<h3>Jet Black</h3>
<p>The bounty hunters,who are gathering in spaceship "BEBOP",</p>
<p>will play freely without fear of risky things.</p>
</li>
<li>
<div class="imgfield">
<img src="images/5.png" alt="">
</div>
<h3>Edward</h3>
<p>They must create new dreams and films by breaking t raditional styles.</p>
<p>The work, which becomes a new genre itself, will be called... "COWBOY BEBOP"</p>
</li>
</ul>
</div>
</div>
</body>
</html>
在頭標籤中，引用了link標籤：<link rel="stylesheet" href="css/index.css">。首先使用了rel進行了檔案型別的宣告，宣告為樣式表文件，這樣瀏覽器就可以知道找樣式就從這個檔案裡找了，而後邊是它的連線地址，是它的路徑，通過這樣的方式就可以將外部的CSS檔案引入進來。需要注意的是，瀏覽器在進行樣式渲染時，採取的是就近原則，當某個元件有自己的行內樣式時，便會優先使用行內樣式渲染，當不存在行內樣式時，便會優先從自己的頭部標籤的樣式標籤中進行搜尋，如果沒有樣式標籤，就會從link標籤中引入的樣式表文件中進行搜尋並進行渲染。
那麼另一個問題來了，使用行內樣式渲染倒是還可以理解，內部樣式以及外部樣式的話，css程式碼根本沒有和標籤在一起，瀏覽器如何識別哪個樣式屬於哪個標籤呢？答案就是上邊剛剛提到的選擇器。
4.選擇器
選擇器是用於標記某一個樣式對應某一個或者是某一類標籤的工具。在html的標籤中，我們可以為標籤指定class屬性，id屬性，這幾種屬性，其實就算是對於這個標籤的一種標識，其中class是類標識，id則是唯一標識，當我們使用內部樣式或者是外部樣式想對一個指定的標籤進行渲染時，就可以使用這種標識記性選擇性渲染。如下：
.try{
省略
類選擇器
}
#div1{
省略
id選擇器
}
div{
省略
元素選擇器
}
div,span,body{
省略
選擇器組合
}
在CSS檔案中，這種格式的程式碼，便是選擇器，格式通常為：符號 標籤識別碼{樣式}。這個符號和我們使用的標籤識別碼有關係，當我們希望使用class屬性來進行選擇時，使用"."來作為字首，當我們希望使用id屬性來進行選擇時，我們使用"#"作為字首，後邊緊跟著的就是我們在標籤中定義好的相應的屬性值。以上四種選擇器分別為：類選擇器，id選擇器，元素選擇器，選擇器組合。分別是靠class屬性，id屬性，元素名稱，元素組合進行選擇渲染的。其中元素選擇器是選擇器組合的特殊情況，當裡邊只有一個元素時，便是元素選擇器的樣子，元素選擇器會選擇頁面中的所有元素，選擇器組合也會選擇所有列出來的元素進行渲染。
當然這只是四種最為基本的選擇器，在之後還會有其他型別的選擇器。
7.筆記原文
1.1月8日上午
關於html之類的
html是超文字標記語言，裡邊標籤就是它的規則，是一種多媒體的標記性的展示語言。
html的層次通過縮排表示，但是解析不用，程式碼通過縮排變得清晰
凡益之道，與時偕行。
文件型別宣告，它宣告文件型別是html
mate 元元素，元標籤，源頭。放一些基本的資訊
charset字元設定，設定編碼用的。
div>a可以理解為下一個，這樣可以一次性生成多層巢狀的東西
在寫html時，每層一定要寫完。
把公共的東西提取出來，提升複用性，這就是解耦。提升每個元素自己和自己的關係，鬆散化元素之間的關係。變數存在的意義就是解耦。
html、head、body是非常基礎的，關係接近的層次，因此他們基本上不用縮排
+號可以並列生成
div和span div會自動換行，span不會，這是為什麼？這涉及材質問題，盒子模型的問題：塊級盒子
塊級盒子(元素、標籤) 特徵：獨佔一行；對寬度、高度支援
內聯級盒子(行內盒子，行內元素、標籤) 特徵：不獨佔一行，對寬度高度不支援
內聯級元素加了寬度高度也沒用，識別不了，不支援
註釋ctrl + /
所謂獨佔一行，就是完全獨佔這一行，沒有給下一個元素留空間，因為只能換行了。這種元素把這一行完全佔據了。
以後還有個彈性盒子概念，代替flow屬性 這是啥？不知道，學學。
display屬性可以定義元素型別，塊級盒子自帶一個display:block，內聯自帶display:inline。通過css語言可以修改不同標籤的型別
style後邊就是簡單的css語句，用於控制元素樣子，disply屬性就是用以控制它是塊級元素還是內聯級的屬性
style後邊的語句是css語句，控制不同樣式的屬性用；分隔
盒子模型一有四個區域：內容區，填充區，邊框區，外邊距
width和height預設僅對內容區設定，
填充區用什麼進行設定？padding，用padding進行設定
padding：10px 填充區是額外增加的，是對外邊框的擴充。padding就是內容區和邊框區的邊框的間隔，預設為0，但是如果設定，會導致整個div變大
1.padding:10px
2.padding:10px 20px//上下，左右。當上下左右不一樣時用這種方法
3.padding:10px 20px 30px
上 右 下 左沒有，於是左右對稱
以上為開始順時針旋轉，如果沒有的話就對稱部位
padding還可以用top，bottom，left，right進行單邊控制，也可以用四引數方式寫
外邊距 margin 這個的設定方式也是這種規則進行設定的
一個div塊的大小就是由內容區和填充區大小控制的
boder 四個方向 三個方面
三個方面：border-style 邊框的樣式
border-width 邊框的粗細
bodrer-color 邊框的顏色
border是一個複合屬性，因此不能想padding那樣連寫控制多個邊，border沒設定style的話，就不會顯示出來
border可以用none來取消邊的繪製，先繪製，再取消
margin可以設定外邊距
margin可以加一個auto屬性值，可以左右居中，沒有上下居中，因為上下是一個無限制的，左右是有限的，可以設定自動居中
居中只有這個塊有寬度時才有意義
瀏覽器會自動的給一些元素加mardin，為了美觀
float的弊端：會導致父標籤的渲染消失，如果使用不當，會導致元素重疊的問題
如果父標籤沒有高度時，就會出現父標籤渲染消失，元素重疊，設定高度之後，就會解決這個問題。但是div不能設定高度，因為div設定高度後會出現溢位問題。
如果排布使用了float，就要用overfloat進行溢位隱藏
用%進行字標籤排布很方便
邊框和外邊距也會讓元素寬度變化，我們用width和height一般只對內容起作用
加上box-sizing：border-box
加上這句話之後，使得width和height是對這個盒子包括邊框進行長度高度控制
彈性盒子當子元素超出父親之後，他們會等比例壓縮
若是想使用橫向佈局，讓某些元素進行橫向佈局，可以加上彈性盒子佈局，比漂浮好
display: flex;
給父親標籤加這個就行
2.彈性盒子模型
當我們不想用橫向佈局，但又想用彈性盒子模型
我們用 flex-direction:colum-reverse；
用這個方法可以改變彈性盒子模型的排列方向，讓其在縱向排列，而不再橫向排列
如果希望成為換行這種模式，用flex-warp:warp
justify-content:排布方向的分佈方式，即改變排布方式。控制未佔滿空間的空白。屬性有：flex-start flex-end center space- between space-around
排列方向垂直方向的對齊方式：align-item:
flex-start;預設就是這個模式，開端/頂端對其
flex-end;底部對齊
flex-center;居中對齊
baselinr;基準線對齊，以內容底邊進行對齊
還有一種對齊方式忘了，一會看視訊
align-content：；行的控制方式，想要有行，先要產生行，其次是出現換行的情景
彈性盒子：圖片已歸檔
3.1月8日下午
class別名，分類，通過別名來找標籤，用來分類，這個是用來解耦的方法，方便的管理式。
在style標籤中定義好的樣式塊，叫做內部樣式，它將行內樣式轉化成內部樣式，通過錨點進行定位，提高內聚程度，提高複用度。
和class統計的屬性，還有一個id屬性，就是身份證號的意思，用於唯一確定一個標籤或者事物。
style 行內樣式
class 分類別名
id 唯一別名
id屬性的值不要重複，用於準確的尋找一個標籤
id和class都是在為標籤加標記，id用#標記，class用.
他們都叫選擇器。
除此以外，還存在一種元素選擇器，或者叫標籤選擇器。
id選擇器是專門用於精確定位的，不要重複！
選擇器組合
div,span,body{
}
class選擇器，id選擇器，元素選擇器，組合選擇器
第三種樣式：外部樣式
外部樣式就是把樣式全都集中起來放在外部然後直接引用
這幾種樣式互有長短，不能相互代替，行內樣式優先順序更高
渲染優先順序：行內>內部>外部
在專案開發時，我們對於樣式一般不會改動別人寫好的樣式包，而是根據需求直接寫內部或者行內樣式對自己的進行創新
快捷鍵：div.hhh class為hhh
div#jjj id為jjj
若是想用live server用服務的方式跑起來，必須要建立一個資料夾，用打包建檔案的方式儲存，才可以用這個外掛拋棄服務來，可以熱更新。