Open FrankKai opened 6 years ago
在HTML中,行内元素是那些仅仅占据定义元素边界的标签空间的元素,而不是去破坏内容流。在这篇文章中,我们将检查HTML行内元素并且与block做对比。
一个行内元素不会在a new line开始,而且仅仅占据必要的元素宽度空间,不会多占空间。
用一个简单例子来示范就好。
.highlight {
font-weight:bold;
}
Inline 首先,让我们看一下下面的inline元素的示范:
<p>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>
在这个例子中,
(段落)块级元素包含一些文本。在text文本内部有一个行内元素。因为标签是行内的,所以段落正确地绘制出一个单个的,没有断开的文本流,就系那个下面这样。
The following span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.
block-level
现在把<span>
替换成<div>
:
<p>The following div is an <div class="highlight">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>
绘制完之后是这样的:
The following div is an block-level element; its background has been colored to display both the beginning and end of the block-level element's influence.
看到差异了吗?<div>
元素改变了text的layout,将文本切分成了3个片段:在<div>
之前的text,<div>
的text,在<div>
之后的text。
你可以使用CSS的display属性改变元素的level。 inline blocks 通过将display的值从inline改为block,你可以告诉浏览器将一个inline元素,渲染成block box而不是inline box。改了属性值以后,不一定会完全呈现,它可能还是表现成行内元素,所以一定要看看结果。
简而言之,在概念上inline和block-level元素有以下区别:
下面的元素默认是inline的。
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
HTML元素通常要么是"block-level"元素,要么是"inline elements"。
浏览器一般会在block-level元素前后展示一个新行。我们可以把它想象成一个box stack(盒子栈)。
一个block-level元素通常从一个新的行开始,占据可用空间的全部宽度。(从左到右尽可能的拉伸)。
下面的例子示范了block-level元素的影响:
HTML
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
CSS
p { background-color: #8ABB55; }
这里有一对行内元素和块级元素之间的区别。
block-level 与inline 元素之间的区别用于HTML4.01以下的规范。
在HTML5中,这个两者之间的区别,由于content categories所以变得更为复杂了。
下面的列表是一个复杂的HTML块级元素列表(尽管"block-level"在HTML5中没有明确定义给任何元素。)
<address>
Contact information.//联系信息
<article>
Article content.//文章内容
<aside>
Aside content.//旁边内容
<blockquote>
Long ("block") quotation.//长块引用
<canvas>
Drawing canvas.//绘制canvas
<dd>
Describes a term in a description list.//在说明列表中介绍单个term
<div>
Document division.//文档格
<dl>
Description list.//说明列表
<dt>
Description list term.//说明列表某一项
<fieldset>
Field set label.//设置label的field
<figcaption>
Figure caption.//图标题
<figure>
Groups media content with a caption (see <figcaption>).//媒体内容与标题分开
<footer>
Section or page footer.//部分或者是page的页脚
<form>
Input form.//输入表单
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Heading levels 1-6.//标题
<header>
Section or page header.//章节或者page的页头
<hgroup>
Groups header information.//Group的头部信息
<hr>
Horizontal rule (dividing line).//横向规则
<li>
List item.//列表条目
<main>
Contains the central content unique to this document.//包含当前文档的中心唯一内容
<nav>
Contains navigation links.//包含导航链接
<noscript>
Content to use if scripting is not supported or turned off.//如果scripting不被支持或者关闭时使用
<ol>
Ordered list.//有序列表
<output>
Form output.//表单输出
<p>
Paragraph.//段落
<pre>
Preformatted text.//预先格式化的文本
<section>
Section of a web page.//一个web page的章节
<table>
Table.//表格
<tfoot>
Table footer//表格脚
<ul>
Unordered list.//无序列表
<video>
Video player.//视频播放器
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
display CSS属性指明了元素渲染盒子的类型。在HTML中,默认display属性值取自HTML规范或浏览器/用户默认样式表中描述的行为。XML默认值是inline,包括SVG元素也是。
除了各种各样的display盒类型之外,none 值使得你关闭元素的展示。当你使用none,所有的后裔元素也都关闭了展示。尽管element不能在document tree中展示,但是它依然会被渲染。
关于display值,有以下几种分类:
<display-outside>
指明了元素外部的展现类型,这基本是它在流式布局中的作用。例如inline,block<display-inside>
指明了元素内部的展现类型,定义了布局formatting context的类型(假设它是一个不可替换的元素)。例如table,flex,grid<display-listitem>
元素生成了用来存放内容的块盒子以及一个分离的list-item行内盒子。例如list-item<display-internal>
一些布局模型,例如table和ruby,有复杂的内部结构,有几个不同的角色,他们的孩子和后代可以填补。这一步跟定义了那些"internal"display值,它只在特定的layout mode下才生效。
除非有特殊声明,否则inner和outer display类型都可以设置为下面的关键字。
例如:table-row-group,table-header-group等等<display-box>
是否展示box。例如none,contents(实验中)<display-legacy>
CSS2 使用单关键字的语法为display属性设置值,在同一个layout模型中,为块级元素和行内元素引用分离的关键词。例如inline-block,inline-table等等。最好只为display设置一个值,因为组合的方式还不被一些浏览器支持。
关于这部分,我将挑选常见的inline,block,table,inline-block,flex以及grid进行举例。
<display-outside>
<display-inside>
<table>
HTML标签一样表现。它定义了一个block-level盒子。<display-legacy>
由于display-legacy类型较为有趣,因此将其全部进行翻译。
可能你觉得这是一个老掉牙的问题,但其实并没有那么简单。
对于初学者来说,当遇到面试官问到这个问题的时候,脑海里的第一印象是css的display属性,值为inline时为行内元素,值为block时为块级元素,那值为inline-block时呢,元素是块级行内元素吗?
其实我们看问题的角度从一开始就错了,错误地站在了css的角度,而真正正确的是站在html的角度。因为这里的元素,本质上是指html的DOM元素。
下面我们就3个原理展开深入:
并且提出两个问题: