1：HTML介紹
HTML指的是超文字標記語言 (HTML)（Hyper Text Markup Language）,它不是一種程式設計語言，而是一種 標記語言——通過標籤（Tag）來描述網頁的。舉一個簡單的例子：1 <html> 2 <head> 3 網頁相關資訊 4 </head> 5 <body> 6 <--! body之間的文本是可見的頁面內容--> 7 <h1>Heading</h1> 8 <p>paragraph.</p> 9 </body>10 </html>
像該例子中<html>這些由角括弧包圍的關鍵字便是HTML的標籤，通常標籤具有以下幾個特徵：
而通常一個網頁的骨架便是如上面例子所述的那樣：
定位（position）允許你定義元素相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至是整個瀏覽器視窗本身的位置。
div、h1 或 p 元素常常被稱為區塊層級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。您可以使用 display 屬性改變產生的框的類型。這意味著，通過將 display 屬性設定為 block，可以讓行內元素（比如 <a> 元素）表現得像區塊層級元素一樣。還可以通過把 display 設定為 none，讓產生的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文檔中的空間。但是在一種情況下，即使沒有進行顯式定義，也會建立區塊層級元素。這種情況發生在把一些文本添加到一個區塊層級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：1 <div>2 some text3 <p>Some more text.</p>4 </div>在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。區塊層級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助於理解在螢幕上看到的所有東西都形成某種框。
1 #box_relative {2 position: relative;3 left: 30px;4 top: 20px;5 }如所示：
#box_absolute { position: absolute; left: 30px; top: 20px;}
如所示：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
5：CSS中關於box-module的認識 --引
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
