• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网站制作中的块级元素和行内元素是什么

    • 2018-07-26 08:38:56
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.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.0737dz.com/news/wzzz/what-block-level-inline-level.html

    上一篇:网站制作简史

    下一篇:css在网页设计中的引入

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图