zoukankan      html  css  js  c++  java

  • css 块级元素VS内联元素

    我们先来认识in-line内联元素和block-line块元素，因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。 

    in-line这个词有很多种说法：内嵌、内联、行内、线级等，但是，它们都是表示相同的意思，在这里我选择我习惯的叫法。 

    块元素可以包含内联元素或某些块元素（刚才的例子其实是错误的使用，我把<div>放在<p>里面），但内联元素却不能包含块元素，它只是包含其他的内联元素。

    p、h1、或div，li等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）.

    下面的用法错误：

    <p>测试文字 

<ul> 

<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li> 

</ul> 

测试文字 

</p>

    为什么呢？因为我们使用的DTD中规定了块级元素是不能放在<p>里面的，再加上一些浏览器纵容这样的写法： 

    <p>这是一个段落的开始 

    <p>这是另一个段落的开始 

    当一个<p>签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样： 

    <p>这是一个段落的开始</p> 

    <p>这是另一个段落的开始</p> 

    所以刚才那样的写法会变成这样： 

    <p>测试文字</p> 

    <ul> 

    <li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li> 

    </ul> 

    测试文字<p></p> 

    这也是跟刚才说第一个例子中<p>里面放<div>不合理是同一个道理。 

    那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，在讲 2.2 网页的构成时我们已经知道<html>是在最外层，<html>下一级里面只会 有<head>、<body>、<frameset>、<noframes>，而我们已经知道了可视的 元素只会出现在<body>里，所以我们把<body>划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就 归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记 的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>； 段落标记的<p>；分隔线<hr>和一个特别的元素<dt>，它只存在于列表元素<dl>的子一级。 

    为什么说第二级的元素可以自由嵌套呢？我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把<ul>嵌在<div>里面，也可以把<div>嵌在<li>里面。 

    在HTML里有几个元素是比较特别的：<ul>、<ol>、<dl>、<table>，它们的子一层必 须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须 是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容 的<td>或者<th>。 

    很多人在W3C校验无法通过也是这个原因--错误的元素嵌套，然而把提示错误的标签改成<div>或者<span>就可以通过， 但是我们不能这样盲目的为了校验而校验，<div>也不是神，<div>代替不了语义化的标签。 

    附件中有一张表示关于(X)HTML Strict下的嵌套规则，可以随时参考。

    其实在内联元素中，还是可以再区分一下的，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为replaced元素，我也找不到适合翻译的词，它们 在属于in-line的情况下同样具有block-line的一些特性，在"10.7 类desplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，你暂时也不用过 多了解，等到后面再学习它。

    sitepoint.com关于replaced element 解释：

    A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>（button文字决定了 大小）, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

    Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the heightof the element will be scaled by the same amount, to 50px.

    Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.

    In an inline formatting context, you can also think of a replaced element as being one that acts as a single, big character for the purposes of wrapping and layout. A width and height can be specified for replaced inline elements, in which case the height of the line box in which the element is positioned is made tall enough to accommodate the replaced element, including any specified box properties.

     另一篇文章：

    标签 li 是不是块级元素分析

    为什么它可以设定高度，但又不像 <h1 /> 这些元素，那种感觉就像它是个“半内联"的（内联：inline[text]-level）元素。HTML 4是这样描述的： 

    The following elements may also be considered block-level elements since they may contain block-level elements:

    • DD – Definition description
    • DT – Definition term
    • FRAMESET – Frameset
    • LI – List item
    • TBODY – Table body
    • TD – Table data cell
    • TFOOT – Table foot
    • TH – Table header cell
    • THEAD – Table head
    • TR – Table row

    这段描述中，似乎也是在说， <li /> 就是一个"半内联"的元素。当然，这个列表里面的类似于 <td /> 这些元素，也曾给我带来这样的疑惑。今天看了一下各浏览器的默认CSS。结果是这样的：

    BrowsersCSS
    IE6/IE7 li{display:block;}
    IE8+ / Webkit / Firefox / Opera li{display:list-item;}

    在这里，也基本上明了了。在除 IE6/7 以外的 A-Grade 浏览器中，就是一个"半内联"的元素。提到display:list-item; ，其实，即使现在所有的 A-Grade 浏览器都支持，用的人其实不多。为什么？其实就是没什么用。在 Quirks Mode，PPK 是这样说的：


    display: list-item     means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI’s in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI’s).

    Live example:
    display: block
    display: list-item
    display: list-item

    Right。其实这个意义不大。但也算是解了自己的一个疑惑。分享出来，如果你也有这样的疑惑，或许下次 Coding 的时候出现 Bug 或者其他疑问，估计也就能很快反应过来了。

    另一篇文章：

    对于很多初级学习者来说，最基本的概念莫过于认识内联元素与块级的元素使用方法了，这节css教程我们来探讨学习，CSS内联元素与块级元素的区别，怎么样使用CSS内联元素与块级元素。

    p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）

    　　《CSS权威指南》中文中：任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。这些知识在workcss.com上有较多的文章。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

    　A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。
    　B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。
    　C：一般的 块级元素诸如段落<p>、标 题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..
    　D：块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
    　E：<span>在CSS定义中属于一个行内元素，而<div>是块级元素。 

     

    <style type-"text/css">
strong,p
{
    border-bottom:1px solid red;
}

</style>
    <strong>任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。这些知识在workcss.com上有较多的文章。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。</strong>
<p>任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。这些知识在workcss.com上有较多的文章。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
</p>

    如上所述：strong内每行下面都有红线，p只有最下面一行有横线。

    　用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器 了。

    <span>就是小容器。


    　　块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。

    “form”这个块元素比较特殊，它只能用来容纳其他块元素。

    　　如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。


    　　你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。 

    　　内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
    　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

    可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

    　　ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界(float时margin)问题。

     另一篇 文字：

    HTML elements can be displayed either in block or inline style.

    The difference between these is one of the most basic things you need to know in order to use CSS effectively.

    The 3 ways that HTML elements can be displayed

    All HTML elements are naturally displayed in one of the following ways:

    Block
    Takes up the full width available, with a new line before and after (display:block;)
    Inline
    Takes up only as much width as it needs, and does not force new lines (display:inline;)
    Not displayed
    Some tags, like <meta /> and <style> are not visible (display:none;)

    Block example

    <p> tags and <div> tags are naturally displayed block-style.

    (I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)

    A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

    Here I’ve started a paragraph and now I’m going to insert a <div>

    new div inside my paragraph

    and then continue the text here…

    See how the <div> jumped in and took over the full width of the space?

    Common HTML elements that are naturally block-display include:

    <div>
    Your general-purpose box
    <h1> … <h6>
    All headings
    <p>
    Paragraph
    <ul>, <ol>, <dl>
    Lists (unordered, ordered and definition)
    <li>, <dt>, <dd>
    List items, definition list terms, and definition list definitions
    <table>
    Tables
    <blockquote>
    Like an indented paragraph, meant for quoting passages of text
    <pre>
    Indicates a block of preformatted code
    <form>
    An input form

    Inline example

    Inline-display elements don’t break the flow. They just fit in with the flow of the document.

    So here I’ve got a paragraph going on, and I’m going to add a <span> tag thathas a yellow background and italic text. See how it just fits right in with the flow of the text?

    More elements are naturally inline-style, including:

    <span>
    Your all-purpose inline element
    <a>
    Anchor, used for links (and also to mark specific targets on a page for direct linking)
    <strong>
    Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
    <em>
    Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
    <img />
    Image
    <br>
    The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.
    <input>
    Form input fields like  and
    <abbr>
    Indicates an abbr. (hover to see how it works)
    <acronym>
    Working much like the abbreviation, but used for things like this TLA.

    You change the display property of any elements

    Although each HTML element has its natural display style, you can over-ride these in CSS.

    This can be very useful when you want your page to look a particular way while using semantically-correct HTML.

    Examples

    Say you want to provide a list of items, but you don’t want a big bulleted list. You just want to say that you’re going to the store to buy:

    • some fizzy drinks,
      •  
    • a chainsaw,
      •  
    • and some nylon stockings.

    Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a <ul>.

    Here’s the code

    <ul>

    <li><a href=”#”>Home</a></li>
    <li><a href=”#”>About us</a></li>
    <li><a href=”#”>Products</a></li>
    <li><a href=”#”>FAQs</a></li>
    <li><a href=”#”>Contact us</a></li>

    </ul>

    Here’s how it looks as a normal list

    Just adding the class “toolbar”…

    <style type=”text/css”>

.toolbar li {

display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;
}

</style>

<ul class=”toolbar”>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>
</ul> 

    Here’s how it looks with the CSS styles applied

    来源：

    http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

     http://hi.baidu.com/ate0611/blog/item/a7d39d134ab6eb085aaf538c.html
  • 相关阅读:
    Hsqldb中设置主键，并让主键自增
    解决Hsqldb指针只能单向移动，不能回滚问题（.first()）
    MySql服务的启动和停止
    jetty和tomcat比较
    查看某一端口被什么程序占用
    小程序修改swiper小圆点
    小程序返回上一页。或者某一页上刷新返回页
    小程序或者vue商品秒杀倒计时
    小程序 wx.switchTab 不能带参数的解决办法
    微信小程序倒计时60S
  • 原文地址：https://www.cnblogs.com/youxin/p/2647383.html
Copyright © 2011-2022 走看看