HTML可視結構是什麼呢？

當為元素項的多個類賦予樣式時，樣式表能夠良好地運行，但是當賦予特殊樣式時，它就會變成一個累贅。為了賦予一個元素樣式，通常你會給它加上ID,並且在樣式表中設置這個ID的樣式。在單個文檔中，這種做法還算差強人意。但是，當文檔和樣式表發生變更，很多文檔共享相同的樣式表時，這種做法就會變得很麻煩。例如，用於特殊樣式的一個ID是元素的一部分，樣式會跟隨元素發生移動。當你修改一篇文檔時，將有可能導致無法預料的結果，並且它會使你在尋找問題的根源中迷失自己。下面我們給大家介紹一下HTML可視結構吧!

水平線，塊狀間隔或塊狀間隔移除設計模式是特殊樣式很好的解決方案，因為它們會插入一個元素到文檔中。這個元素有結構上的含義，它是自文檔化的，並且很容易復位。你可以使用標准的類設計這些間隔元素的樣式，這樣的話你就不必設計特殊樣式了。間隔元素專門針對特殊樣式的情況。

定位樣式

在很多情況下，你可能想要賦予某個元素樣式，因為它處於某個特定位置。例如，你可能想改變第一個子元素之前和最後一個子元素之後的塊狀元素的外邊距大小，因為抵消外邊距對第一個和最後一個子元素表現得有所不同。如果你直接對第一個子元素應用特殊的外邊距，然後將第一個元素移到中間，那麼它的特殊外邊距也會跟著移動。這並不是你要的結果，因為你只是想設計位置的樣式--而不是元素的樣式。

設計位置樣式的一種方式是使用水平線、塊狀間隔或塊狀間隔移除設計模式。這些模式都能夠起作用，因為很容易保持一個間隔元素在右邊的位置--特別是如果你直觀地為它的類命名，比如first-child和last-child.位置樣式最終的解決辦法是位置選擇器，但是它在CSS 2.1中功能有限，並且不能在IE 6運行(雖然能在IE 7運行)。CSS 3中提供的位置樣式功能足夠強大，但是現在還不能應用到實踐中。

問題

希望以可見的方式顯示一篇文檔的結構。

解決方案

CSS提供了許多通過賦予塊狀元素樣式來顯示文檔結構的方法。可以在塊狀元素之間放置垂直外邊距，或者使用首行縮進的方式形象地把內容分成塊狀。可以在一個塊狀的邊緣放置項目符號或者數字來列舉塊狀。可以使用外邊距、邊框、內邊距在塊狀周圍放置方框來表明它們是怎樣被互相嵌套在一起的。也可以指定標題的字體大小，如果標題的作用范圍大，字體也越大--這可以揭示塊狀元素的嵌套情況而不用把它們放到盒模型中。

可以顯示地為文檔結構賦予樣式，通過這種方式便能幫助用戶識別出一篇文檔的結構了。為了強調一種緊密的結構關系，可以把元素更緊密地放在一起，並且賦予它們相似的外觀。例如，為了把各個元素分開，可以將它們隔離開，並給它們賦予不同的樣式。例如，列表、表格和塊狀元素有不同的默認樣式來強調它們的結構的不同含義。而且，無序列表使用項目符號來說明它們各項的無序性。

為了使風格統一，通常我們會對相同類型的所有塊狀元素賦予一個標准的樣式集。例如，你可能希望所有的段落和列表項都有一個2像素的垂直內邊距。在樣式表中，可以選擇一種類型的所有元素或者一個類別的所有元素，並按照自己的想法來賦予它們樣式。我將在實例中演示這一點。

有時候，你可能想改變兩個特定的塊狀元素之間的空隙。可以把它們更緊密地放在一起，以此強調它們之間關系的嚴密性，或者把它們設置為相隔很遠的兩部分來強調它們之間的不同。在結構上，這是在設計塊狀之間的空隙。這種關聯不是兩個塊狀中任何一個的一部分，而是兩個塊狀之間的，因此在兩者之間插入一個空白塊比設計其中一個塊狀的外邊距在結構上更加精確和簡便，它可以作為正常樣式設計的一個例外。

HTML提供元素的目的是在塊狀之間插入一個結構間斷是為了在內聯元素之間插入一個斷行符)。水平線設計模式介紹了怎樣使用和怎樣為賦予樣式。

當你想插入一個強度不如水平線的結構間斷或者使兩個塊狀之間更加緊密時，你可以使用塊狀間隔和塊狀間隔移除設計模式。

水平線、塊狀間隔或塊狀間隔移除的使用應屬於特殊樣式設計，而不是標准樣式設計。元素之間的間斷和連接的結構含義沒有嵌套結構強度那麼大。

為了強調塊狀元素之間的緊密關系，你或許希望合並兩個塊狀元素，我將在內聯化和內嵌設計模式中探討它。

以上就是我們給大家介紹的HTML可視結構的內容了。希望大家繼續關注我們的網站!