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