因此，我們還沒有覆蓋並評估是定位單元的最重要的概念之一。
那麼，我們如何佈局網頁或移動div來右上角。
或者，我們如何使一個錨標記更寬或圖像之間添加間距。
所有這一切是非常重要的，這一切都涉及到所謂的盒模型。
因此盒模型是真的中心在HD您評估一切它是基本上每個元素周圍有一個長方形的盒子這個基本理念。
所以我們可以看到這裡只是要去MDA的任何網頁，我有檢查人員開放的，我有放大鏡選擇。
當我將鼠標懸停在每一個環節都可以看到，有它周圍的框。
所以這個H2周圍有一個藍色的盒子。
這其中有一個框。
即使事情是不是特別四四方方。
所以這個的圓角DIV ..
它仍然有它周圍的框。
幕後。
所以在這裡做到這一點，這一次是真的不圓或不四四方方希望有這些圓潤的邊角，但它仍然是一個框。
因此，這些箱子是幕後真正有用的，因為我們可以對他們的風格不同的屬性。
因此有四個屬性或每盒子的四個不同部分。
還有很多更多屬性但我們可以操縱箱的部件。
因此，讓我們假設這個圖是也是從MDA，是一個段落。
所以我有一個段落一些文字，我給它一個橙色或黃色邊框，這是用戶看到的一些文字和邊框，但在幕後有實際上一些其他的事情發生。
所以，邊界有一種叫做填充文字之間。
所以填充僅僅是在邊界的內部的空間。
這樣的內容和邊界之間是填充，然後有也餘量是在另一側是在外面和其他任何的邊界之間。
所以我們用保證金往往元素之間添加間距。
因此，如果我們有兩個段落，我希望他們能夠進一步分開那麼我會用保證金和增加。
所以，現在我們要做的深入了解一點點進入一些我們想要的，我們這樣做之前，使用的屬性實際上是語法。
我只想告訴你兩件事你可以期待著讓最激動人心的第一個，但最重要的是，我們現在有使一些看起來像這樣的一種方式。
到現在為止，我們實際上並沒有使這些盒子連接到具有分配了彼此的方式，但它們是空的裡面有沒有文字。
所以我們要了解盒模型和應用，在這裡，使這個井字板，然後我們打算使這個投資組合網站一個虛構的攝影師。
因此，這是很好的。
它的圖像是響應所以它改變大小的變化的窗口大小和電網。
所有這一切是基於關閉的你要在這裡學習的概念。
所以我要繼續前進，在這裡開闢昇華。
而我有我創建了一個非常簡單的文檔。
所以它只是簡單的HTML。
它有連接的樣式表。
它是空的。
除了一些看法，然後兩段。
所以，如果我開這件事，你可以看到它是很基本很無聊，我們只是要使用此玩弄盒模型。
所以我會去我的成功，我要選擇的段落，然後我只是要複製裡面的這些評論讓我可以寫一些代碼在他們之下只是為了直觀地告訴你，我在做什麼。
因此，讓我們給這些邊界開始。
所以這應該是檢討邊境，讓我們做紮實像素藍色保存刷新，你可以看到，我們得到了周圍的邊框內容的所有道路。
而且你還會注意到的是，這裡的內容去所有的方式在屏幕上。
我們的邊界不會停止在這裡那是因為當我們作出缺席一段它去所有的方式在屏幕上。
所以，如果我想改變我可以使用width屬性，我要繼續前進，舉一個寬度文本的段落本身的寬度。
讓我們做200像素啟動。
如果我刷新你可以看到，現在我們已經改變了寬度。
如果我檢查的內容是不是藍色的。
然後，我們周圍有邊框。
所以內容是藍色的。
而這個圖就是在這裡這個盒子這個元素框。
然後我們有一個邊界是直接繞過它。
有邊框和內容之間沒有空格。
與寬度的另一件事，也有一個高度。
因此，讓我們做300像素的高度，看看我們剛剛添加了一堆的空間。
我要擺脫這一點，但有我們可以使用就像使用一個高度。
我們不必只使用像素，所以我們可以用百分比。
而那些是真正有用的，所以讓我給你看。
讓我們做50％，你可能想知道它是什麼50％。
答案是，它的父元素的50％。
因此，在這種情況下，它的體，該段是該段內去橫跨半個身體。
在我們的情況下，主體是整個頁面。
這是一路之隔。
因此，我們結束了一半的頁面。
如果我改變窗口大小也改變讓很多人利用這一點，將使用實際上這一形象電網要使用什麼是關於這個漂亮的。
你可以看到，圖像改變其寬度，這是一個百分比。
行，所以我要保持它像現在。
然後，我們要談下屬性是填充和填充記住的是元素和邊框之間的空間。
而現在我們沒有任何空間的邊界權之上。
因此，有一個屬性調用填充和我們可以給它一個像素數，讓我們做10​​個像素啟動。
保存文件刷新。
現在我們有各方面的填充10個像素。
所以，如果我現在檢查你會看到現在是一個的出台，所以我們有藍色的內容本身，然後我們周圍有綠色的是邊框和內容之間，所以我們可以明顯地增加這個這個綠色的內容，我們得到了很多在裡面更多的空間。
但是，這是不設置填充的唯一途徑。
此將其設置在所有四個側面為完全相同。
但有時我們只希望在一側或兩側就像帶邊框填充。
還有對於更長的版本它是一個上邊框10像素邊框底部的五個像素捷徑。
與填充和同樣的事情就評論說出來，我們可以這樣做填充留下40像素和新鮮。
而我們得到的填充就在這裡。
而這對於填充是唯一的地方。
我記得空間在這裡這個藍色是不是是她的實際內容，從這個是這裡的填充。
所以不同的，即使它看起來像有在右邊的空間。
它是從不同的地方來了。
所以，另一件事，我們可以在這裡做是同裕發揮。
因此，保證金是拼圖的最後一塊。
它是在邊界的外側的空間。
所以元件之間。
因此，這將是有用的，因為我們可能要增加或在這裡或在這裡舉例的這個空間增加這個空間就在這裡的圖像之間使用馬里安集。
因此，它實際上看起來就像填充，所以我們可以說利潤率，讓我們做一些像明顯100像素啟動和刷新。
發生了什麼事是我們現在的空間100像素上的邊界之外的元素的所有邊。
所以，有一個方面。
你會看到，在該公司確定為橙色那麼藍Chrome是內容綠色是橙色填充是保證金。
所以就像填充。
有時候，我們只是想設置保證金一面的一部分，所以我們可以這樣做保證金頂部500像素。
然後，當他們來到的這一個，現在並保存，我們只獲得左側頂部空間沒有什麼。
而在這一個頂部，然後更多的空間。
沒有在底部或左或右。
所以這就是緣。
所以有時候，我們將值添加到保證金的各個方面，但我們不希望有四種不同的線路做。
所以，我們不希望他們，如果他們在這裡是完全一樣的，但我們不都不得不說邊距上邊距左邊距右邊距底部。
因此，有另一種捷徑，就像邊境。
或者，我們可以做一次，我們能夠做到這一點餘量，並給它四個值的東西。
所以，第一個是對的頂部，然後右邊，然後底部。
讓我們做500像素，然後將左，通過這樣做，我們得到這個漂亮的四邊保證金其中的值都不同，但我們只有在一行做。
因此，只要在這裡檢查，看看是否我們得到的底部500像素的它在頂部的20，我們在左邊得到一百那麼我們有合適的我們的40。
因此，有你會用保證金是保證金經常看到的最後一件事。
汽車。
那麼，我們能做的就是設置margin是左邊還是右邊的汽車。
而實際上這是什麼會做的是中心對我們的元素。
因此，讓我告訴你如何工作的。
和註釋了這一點一而再，我們可以寫保證金，讓我們只說零邊距在左邊或右邊的零邊距和底部和經銷商的左側頂級汽車。
如果我讓這個全尺寸並刷新你會看到它的東西中心對我們來說。
那麼，這意味著它的決定，這是因為我們在這裡說，然後計算出左邊的是汽車，右邊是汽車的50％，以便只是它需要做的，實際上將居中對我們來說不亞於。
然後我們對頂部和底部，以便它們蜷縮一起為零。
我們還可以做有這樣做的一個更短的方式，它看起來像這樣利潤率為零奧托。
所以這將設置在頂部和底部的左側和右側，以自動歸零。
所以，沒有什麼變化，如果我要50像素添加到頂部和經銷商或我要添加50像素和20像素，我們也可以使用這個語法。
有一件事要記住的是，你需要在x那裡，除非數量是零。
因此，如果我為此它增加了20上的左和右頂部，然後將其添加50上的頂部和底部。
因此，讓我們在這裡回顧一下只是一個更多的時間。
我們有內部內容是就在這裡。
我們有填充它的邊界之間，我們只有留下填充，然後我們有餘量為邊界之間的另一邊。
所以基本上元素之間。