＃4佈局與CSS
構建網絡佈局與CSS
類似於添加的風格元素，改變一個元素的位置首先添加一個類，然後編輯位置屬性。您將了解的margin，padding，顯示，浮動，溢出和位置。
保證金和填充的例子
爆炸新聞
聯邦探員突襲Gunshop，查找武器
店老闆史蒂夫Witmere先前涉嫌黑市火箭筒交易。承認自己捲入俄羅斯黑手黨。
其中在gunshop發現眾多火箭炮是數以萬計的價值至少為$ 10,000個非法獲得的畫作。那是一個沉重的代價，這些愚蠢的畫作。
說明 ：margin 和padding可以在樣式面板的位置面板中找到。加入餘量將增加空間的塊之外，並且增加填充將增加一個塊的內部空間。
添加間距自己
爆炸新聞
聯邦探員突襲Gunshop，查找武器
店老闆史蒂夫Witmere先前涉嫌黑市火箭筒交易。承認自己捲入俄羅斯黑手黨。
其中在gunshop發現眾多火箭炮是數以萬計的價值至少為$ 10,000個非法獲得的畫作。那是一個沉重的代價，這些愚蠢的畫作。
提示： 首先，在主灰塊（父元素）的四周添加填充。然後添加下邊距到各個文本元素（子元素）之間添加間距。提示：在使用保證金/填充控制，適用於所有各方和ALT也適用於對側按住SHIFT鍵。
“顯示：塊”的例子
這個標題設置為display：block
本款被設置為display：block。使其充滿父窗口的寬度和堆疊在其它塊的頂部。
按鈕顯示：塊與顯示按鈕：可以關閉此連接設置為display：block 這個鏈接設置為display：block說明： 設置元素的顯示設置，以阻止會使他們對彼此頂部堆疊並填寫100％其父塊的寬度。大多數元素實際上是在默認情況下此設置。
“顯示：inline-block的”的例子
說明： 設置元素的顯示設置為inline-block的會使塊的寬度順應它裡面的內容的寬度。這意味著，如果它們的含量足夠小它們可以堆疊彼此相鄰。您可以複製粘貼上面的按鈕和編輯中的文本，看看它是如何工作的。
浮法例子
謝謝！您提交的內容已收到！
哎呀！同時提交表單出事了:(
說明： 設置顯示：inline-block的或浮動（本例中）是並排堆疊單元一側的最常見的方式。在這個例子中，我會告訴你如何漂浮的東西。
自己浮起來
謝謝！您提交的內容已收到！
哎呀！同時提交表單出事了:(
提示： 首先選擇的文本字段，使其浮動：左，並給它一個百分比寬度（例如：60％）。然後設置按鈕浮動：左，以及和其它設置寬度的百分比（如40％），因此它們都加起來為100％。這是一個人工的方式來強迫任何元素並排堆放的一面。
絕對位置示例
我的喬杯
這是一個照片的標題文字。
精選
說明： 如果一個元素設置位置為絕對，你就可以在其母公司塊內的任意位置來定位。要選擇哪一方的內部定位，設置父元素的立場相對。注意：當元素是絕對定位它們漂浮在其他元素。
款式吧自己
我的喬杯
這是一個照片的標題是我最喜歡的一杯咖啡。
精選
提示： 首先選擇形象包裝元素，並將其定位為相對。接下來選擇標題，將其拖動到圖像設置它的位置，以絕對和選擇7預設。要定位精選徽章到正確的位置選擇第二預置和手動定位。
