<output id="jbxdv"></output>

      1. 網站制作中的塊級元素和行內元素是什么

        • 2018-07-26 08:38:56
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        塊級元素

        塊級元素生成一個元素框,(默認地)它會填充其父元素的內容區,旁邊不能有其他元素。換句話說,它在元素框之前和之后生成了“分隔符”。我們最熟悉的HTML塊元素是p和div。替換元素可以是塊級元素,不過通常都不是。

        列表項是塊級元素的一個特例。除了表現方式與其他塊元素一致,列表項還會生成一個標記符——無序列表中這通常是一個圓點,有序列表中則是一個數字——這個標記符會“關聯”到元素框。除了這個標記符外,列表項在所有其他方面都與其他塊元素相同。

        行內元素

        行內元素在一個文本行內生成元素框,而不會打斷這行文本。行內元素最好的例子就是XHTML中的a元素。strong和em也屬于行內元素。這些元素不會在它本身之前或之后生成“分隔符”,所以可以出現在另一個元素的內容中,而不會破壞其顯示。

        注意,盡管“塊”和“行內”這兩個詞與XHTML中的塊級和行內元素有很多共同點,但也存在一個重要的差別。在HTML和XHTML中,塊級元素不能繼承自行內元素(即不能嵌套在行內元素中)。但是在CSS中,對于顯示角色如何嵌套不存在任何限制。

        要了解這是如何工作的,下面來考慮一個CSS屬性:display。

        你可能已經注意到,display有很多值,其中只有3個值在前面提到過:block、inline和list-item。

        塊級元素和行內元素

        <body>

        <p>This is a paragraph with <em>an inline element</em> within it.</p>

        </body>

        display


        none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header- group | table-footer-group | table-row | table-column- group | table-column | table-cell | table-caption | inherit

        初始值:

        inline

        應用于:

        所有元素

        繼承性:

        計算值:

        對于浮動元素、定位元素和根元素可變(參見CSS2.1第9.7節)。否則為指定值

        這里有兩個塊元素(body和p)和一個行內元素(em)。按照XHTML規范,em可以繼承P,但是反過來不行。一般地,XHTML層次結構要求:行內元素可以繼承塊元素,而反之不允許。

        與此不同,CSS沒有這種限制。仍然是上述標記,不過可以改變兩個元素的顯示角色,如下:

        p {display: inline;}

        em {display: block;}

        這會使得元素在一個行內框中生成一個塊框。這是完全合法的,不違反任何規范。唯一的問題是,如果試圖如下反轉元素的嵌套關系:

        <em><p>This is a paragraph improperly enclosed by an inline element.</p></em>

        不論通過CSS對顯示角色做了什么改變,在XHTML中這都是不合法的。

        對于XHTML文檔來說,盡管改變元素的顯示角色可能很有用,不過對XML文檔的意義則更為重大。XML文檔不太可能有固有顯示角色,所以要由創作人員來定義。例如,你可能想知道如何擺放以下XML片段:

        <book>

        <maintitle>Cascading Style Sheets:The Definitive Guide</maintitle>

        <subtitle>Second Edition</subtitle>

        <author>Eric A. Meyer</author>

        <publisher>O’Reilly and Associates</publisher>

        <pubdate>2004</pubdate>

        <isbn>blahblahblah</isbn>

        </book>

        <book>

        <maintitle>CSS2 Pocket Reference</raaintitle>

        <author>Eric A. Meyer</author>

        <publisher>0'Reilly and Associates</publisher>

        <pubdate>2004</pubdate>

        <isbn>blahblahblah</isbn>

        </book>

        由于display的默認值是inline,默認地其內容會顯示為行內文本。這種顯示用處不大。

        可以用display來定義基本布局:

        book,maintitle,subtitle,author,isbn{display:block;}

        publisher,pubdate{display:inline;}

        現在將7個元素中的5個設置為塊元素,另外兩個設置為行內元素。這意味著,每個塊元素都會像XHTML中的div元素一樣處理,而兩個行內元素的處理方式將類似于span。

        HTML和XHTML網頁文檔有一個固有結構,這里需要重申這一點。事實上,正是這一點導致了以前網頁所存在的部分問題:我們之中太多的人已經忘記網頁文檔要有一個內部結構,而且這與其視覺結構完全是兩碼事。我們可能急于創建最酷的頁面,可能會以各種方式擺放頁面的內容,而通常忽略了一點:頁面應當包含有某種結構含義的信息。

        這種結構正是XHTML和CSS之間關系中的一個固有部分,如果沒有這種結構,就根本不會有任何關系。為了更好地理解這一點,下面來看一個XHTML文檔的例子,后面將逐一介紹這個文檔中的各個部分:

        <html>

        <head>

        <title>Eric's World of Waffles</title>

        <link rel="stylesheet" type="text/css" href ="sheet1.css" media="all"/>

        <style type="text/css">@import url(sheet2.css);

        h1 {color: maroon;}

        body {background: yellow;}

        /* These are my styles! Yay! */

        </style>

        </head>

        <body>

        <h1>Waffles!</h1>

        <p styles="color:gray;">The most wonderful of all breakfast foods is the waffle—a ridged and cratered slab of home-cooked, fluffy goodness that makes every ch1ld's heart soar with joy. And they're so easy to make! Just a simple waffle-maker and some batter, and you're ready for a morning of. aromatic ecstasy!

        </P>

        </body>

        </html>


        當前文章標題:網站制作中的塊級元素和行內元素是什么

        當前URL:http://www.freenetsites.com/news/wzzz/what-block-level-inline-level.html

        上一篇:網站制作簡史

        下一篇:css在網頁設計中的引入

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>