We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
原文链接
格式化上下文(Formatting contexts)是内容放置的区域。每个上下文持有其包含的元素,并且定义了一定的规则来约束其包含的元素如何放置。
最明显的格式化上下文就是整个页面。一个HTML页面定义了块级元素如何一个接一个的流动放置。在页面上,每个静态定位块级元素在下一个静态定位块级元素的上方。
块级格式化上下文是我们在web设计中考虑最多的部分。一个块级格式化上下文定义了其包含的块级元素如何放置。如果你有两个段落,一个接一个,那么在格式化上下文中,第一个段落将会出现在第二个段落的上方。如果没有定义宽度,那么这两个段落将会拉伸涵盖到整个块级格式化上下文的内容宽度。
再看一下常见的没有附加样式的页面。在这样的页面中,_标签为整个页面定义了块级格式化上下文。大部分浏览器会给设置些内间距,因此内容不会碰到窗口的边缘。在_标签里,所有的段落,表格,列表等等一个接一个的在其内容区域排列。
在一个页面里一般有许多块级格式化上下文。这是因为下面这些项可以触发创建块级格式化上下文:
如果你看到HTML页面里含有这些元素,那么很明显这些元素将会创建它们自己的上下文。浮动元素,绝对定位元素和表格单元格元素内的段落都放置在这些容器里。
上面这些元素(可创建上下文的元素)内的静态(和相对)定位元素将被放置在其创建的上下文中,就像与外界隔离开来。当上下文的高度属性是_auto_,其内的浮动元素也会被创建放置在上下文中。
在某种程度上,每个块级格式化上下文有点像微型的文档,以_overflow: auto_创建上下文时最明显。_overflow: auto_的元素和iframe的行为相似,其中元素的内容类似于iframe的源文档。
多个块级格式化上下文对浮动很有用。前面提到过,如果上下文的高度属性是_auto_,它将会拉伸以适应任何其所包含的浮动元素。基于这一事实,我们可以创建“自我清除”的元素,比如:
<style type="text/css"> #container { overflow: auto; padding: 1em; border: 1px; } #floater { float: right; } </style> <div id="container"> <div id="floater">This is text on the right side.</div> </div>
在这个示例中,外层元素的边框和内边距将包围着整个浮动元素。 块级格式化上下文能够有效地创建块级元素,并且不会被浮动元素覆盖。
<style type="text/css"> #floater { float: left; width: 40%; border: 1px solid red; margin-right: 2em; } #clearer { display: table-cell; padding: 1em; border: 1px solid blue; } </style> <div id="floater"> <p>This is floating content.</p> </div> <div id="clearer"> <p>This content is in a box that starts 2em's to the right of the floater.</p> </div>
在这个示例中,红色边框的盒子浮动,蓝色边框的盒子不浮动。蓝色盒子不会被浮动的红色盒子所覆盖。相反的,两个边框之间有_2em_的空隙。
每个块级元素包含的行内元素还将包含一个行级格式化上下文,在块级格式化上下文中,每个块级元素在页面上下一个元素的上方。在行级格式化上下文中是从左向右的,每个行内元素从左到右沿着一条线放置,直到它因为容器边界限制而需要换行。
基本上,行级格式化上下文就是一个段落,表格单元格或者任何其他文本布局。 行内元素和块级元素的定位规则是不同的。
当人们说起“盒模型”时,他们通常描述的是在块级格式化上下文中的尺寸,内间距,边框和外间距。其中,许多概念不适用于行级。尽管水平的内间距,边框和外间距对行内元素也有影响,但是垂直内间距,边框和外间距对文本行间距却没有影响。(注意它们仍然对可替换元素有效,可替代元素代表的是外部资源,比如说表单按钮或者图片,而不是文本或者改变文本格式的元素。)
只有一件事会影响行内元素的垂直间距:行高。通常情况下,行高是基于同一行中文本的高度,或者是任意可替换元素的高度/内间距/边框/外间距。同一行中最大行高(或者可替代高度)的元素将决定这一行的垂直间距。
文本的高度/内间距/边框/外边距对行的高度(或者容器的高度)没有影响。相反,行间的边框、内间距、外间距会相互重叠。如果你想给行内文本设置内间距和边框,确保你有足够的行高。
当对行内元素设置水平边框,内间距或者外边距时,它们只作用于内联元素的两端。如果元素因为边界限制而断开换行,那么边框,内间距或者外边距 边框,内间距或者外边距并不适用于断开位置,只对元素的两端有效。
行内元素内容不会影响包含它的块级元素的宽度。如果行内内容片断大于容器(比如一个大的图片放置在一个小的浮动元素里),它将会溢出。(IE中容器则会被拉伸以适应行内元素)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
格式化上下文
原文链接
格式化上下文(Formatting contexts)是内容放置的区域。每个上下文持有其包含的元素,并且定义了一定的规则来约束其包含的元素如何放置。
最明显的格式化上下文就是整个页面。一个HTML页面定义了块级元素如何一个接一个的流动放置。在页面上,每个静态定位块级元素在下一个静态定位块级元素的上方。
块级格式化上下文(Block formatting contexts)
块级格式化上下文是我们在web设计中考虑最多的部分。一个块级格式化上下文定义了其包含的块级元素如何放置。如果你有两个段落,一个接一个,那么在格式化上下文中,第一个段落将会出现在第二个段落的上方。如果没有定义宽度,那么这两个段落将会拉伸涵盖到整个块级格式化上下文的内容宽度。
再看一下常见的没有附加样式的页面。在这样的页面中,_标签为整个页面定义了块级格式化上下文。大部分浏览器会给设置些内间距,因此内容不会碰到窗口的边缘。在_标签里,所有的段落,表格,列表等等一个接一个的在其内容区域排列。
创建多个块级格式化上下文
在一个页面里一般有许多块级格式化上下文。这是因为下面这些项可以触发创建块级格式化上下文:
如果你看到HTML页面里含有这些元素,那么很明显这些元素将会创建它们自己的上下文。浮动元素,绝对定位元素和表格单元格元素内的段落都放置在这些容器里。
上面这些元素(可创建上下文的元素)内的静态(和相对)定位元素将被放置在其创建的上下文中,就像与外界隔离开来。当上下文的高度属性是_auto_,其内的浮动元素也会被创建放置在上下文中。
在某种程度上,每个块级格式化上下文有点像微型的文档,以_overflow: auto_创建上下文时最明显。_overflow: auto_的元素和iframe的行为相似,其中元素的内容类似于iframe的源文档。
多个块级格式化上下文用于设计
多个块级格式化上下文对浮动很有用。前面提到过,如果上下文的高度属性是_auto_,它将会拉伸以适应任何其所包含的浮动元素。基于这一事实,我们可以创建“自我清除”的元素,比如:
在这个示例中,外层元素的边框和内边距将包围着整个浮动元素。
块级格式化上下文能够有效地创建块级元素,并且不会被浮动元素覆盖。
在这个示例中,红色边框的盒子浮动,蓝色边框的盒子不浮动。蓝色盒子不会被浮动的红色盒子所覆盖。相反的,两个边框之间有_2em_的空隙。
行级格式化上下文
每个块级元素包含的行内元素还将包含一个行级格式化上下文,在块级格式化上下文中,每个块级元素在页面上下一个元素的上方。在行级格式化上下文中是从左向右的,每个行内元素从左到右沿着一条线放置,直到它因为容器边界限制而需要换行。
基本上,行级格式化上下文就是一个段落,表格单元格或者任何其他文本布局。
行内元素和块级元素的定位规则是不同的。
当人们说起“盒模型”时,他们通常描述的是在块级格式化上下文中的尺寸,内间距,边框和外间距。其中,许多概念不适用于行级。尽管水平的内间距,边框和外间距对行内元素也有影响,但是垂直内间距,边框和外间距对文本行间距却没有影响。(注意它们仍然对可替换元素有效,可替代元素代表的是外部资源,比如说表单按钮或者图片,而不是文本或者改变文本格式的元素。)
行级格式化上下文的垂直空间
只有一件事会影响行内元素的垂直间距:行高。通常情况下,行高是基于同一行中文本的高度,或者是任意可替换元素的高度/内间距/边框/外间距。同一行中最大行高(或者可替代高度)的元素将决定这一行的垂直间距。
文本的高度/内间距/边框/外边距对行的高度(或者容器的高度)没有影响。相反,行间的边框、内间距、外间距会相互重叠。如果你想给行内文本设置内间距和边框,确保你有足够的行高。
行级格式化上下文的水平空间
当对行内元素设置水平边框,内间距或者外边距时,它们只作用于内联元素的两端。如果元素因为边界限制而断开换行,那么边框,内间距或者外边距
边框,内间距或者外边距并不适用于断开位置,只对元素的两端有效。
行内元素内容不会影响包含它的块级元素的宽度。如果行内内容片断大于容器(比如一个大的图片放置在一个小的浮动元素里),它将会溢出。(IE中容器则会被拉伸以适应行内元素)
The text was updated successfully, but these errors were encountered: