塊級元素和行內元素區別：

Html裡面的容器（body、div、…）他們的寬度，都是預設為你顯示屏的寬度，但是高度，可以不設定，讓裡面的內容進行撐高，而他的行內標籤（span、a、b、p…）他們的寬度和高度，都是隻能根據它裡面的文子大小進行自動撐開，沒辦法設定他們的寬度，和高度。
但是，若想實現對一個a、span、…等標籤設定寬度、高度，就要用display：block設定成塊狀元素，也就是類似一塊div的元素

想讓一個容器居中，你可能一開始的想法是center，但是center並不可以對容器居中，只能對容器裡面的文字進行居中；容器居中的正確辦法就是，設定這個容器的寬度，然後設定他的邊距margin：auto，所以，有時候想讓body顯示在中間，可以設定body的長度並且margin：auto，設定div…也可以

浮動float：

Div、li等容器排列：例如div

現在裡面有3個div，並且有高度寬度，但是，他們沒辦法在同一行

要想他們在同一行，就需要用到float浮動；

float浮動的原理是，是把修飾的塊狀元素進行浮動，加入現在向left浮動，他們會往左邊一直排隊排下去，排成一行，直到位置不夠，他自動換行

上面的三個div，是在body裡面的，現在有完全夠的空間，所以他們會排成一行；但是現在我把body改成寬度599px；三個div加起來的寬度為600px

所以就會出現了有一個div跑到下面去的情況；所以，一般當自己網頁佈局出現這種有一個東西跑到別的地方去的時候，就要點開網頁檢查元素，檢視自己的寬度，是否不足

文字的位置：

假如現在，我要把文字設定到正中間
，需要用到文字居中text-align: center;
和line-height:本容器高度 ;
，關於文字的標籤，常用的有，color顏色、font-size字型大小、font-weight字型粗度（bord加粗）

內間距、外邊距：

佈局要學會觀察：
例如：你會發現我們的body內容一開始都不是貼合在左上角的，而是有一段距離的，這時候你就要學會開開檢查元素
觀看這張圖，這張圖就已經說明了，body的寬為1520高100，外邊距為8所以一開始就會距離左邊上面8畫素。但是想要完全貼合左上角開始，需要通過*來設定magin：0；

外邊距應用：

假如現在有一個ul裡面有三個li並且已經向左浮動了

現在我想實現這三個li，每一塊的距離，都有一段落，以保持美觀，就需要用到外邊距了

看圖，我設定了三個li的外邊距margin。給他們上下左右都新增的8px的邊距，所以他們就會分開，網頁中123上面的距離，就是他們的上邊距，23之間看起來比上面長的原因是，因為23中間的距離是2的右邊距+3的左邊距組成了，所以，以後想單獨設定可以通過margin-top、bottom、…來設定上下左右邊距。

內間距應用：

一般應用的比較少，內間距好比，一個盒子，然後我要給他外邊裝修一層1釐米厚的東西，這個房子，就會比原來上下左右多出一層1cm的東西，裡面的內容不變，而且會改變原來的大小，而外邊距，是不改變原來的大小的只是改變附近的元素和他之間的距離。

定位position：

當一般的浮動和間距解決不了或者難以解決時，就需要用到定位了，
常用的兩個定位absolute（絕對定位）、relative（相對定位）
先說相對定位，相對定位他是相對於原來的位置進行left、top、…移動的，而且移動後，在html的檢查元素還是在原來的位置，就好比，現在有兩個div都左浮動呈現一行

我給第一個div設定相對定位，距離左邊30px後的效果是

他會在原來的位置上距離左邊移動30px；而他的位置還是屬於一開始在左邊的那個位置，所以其他元素不會出現在他原來的位置上；這種操作也稱為不脫離文件流；

文件流的大概意思是：裡面的標籤，都有自己的一個私人位置，別的標籤，是不可以出現在他的這個位置上

現在說絕對定位：
絕對定位，是絕對，定位，在與他，最近的一個，設定了，相對定位，的祖先元素來定位；（上面這句話看不懂私聊問我）
如果沒有一個祖先元素設定了相對定位，那麼絕對定位會預設以body來進行定位。並且他定位，他會脫離文件流，也就是原來的位置，已經不是他了的，是共有的了，別的標籤，可以在他原來的地方覆蓋了。

就像這幅圖，你看到類似這種圖，就要想到，這個紅色是相對於綠色來定位來定位，所以這個紅色div是巢狀在綠色的div裡面，紅色是相對定位，綠色是絕對定位，ps：距離可以是負數