CSS display:block 到底是做什么的;对一个元素做什么?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/633827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:24:09  来源:igfitidea点击:

What exactly does display:block; do to an element?

css

提问by Sam152

What are the exact specs of display:block? I know quite a few of the specific things applying this to an element will do but I would like to hear them all.

display:block 的具体规格是什么?我知道将这个应用于元素的很多具体事情都会做,但我想听听他们的全部。

Thanks.

谢谢。

采纳答案by ólafur Waage

Quote from W3C

来自 W3C 的报价

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).

在块格式化上下文中,框从包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式上下文中相邻块框之间的垂直边距折叠。

在块格式上下文中,每个框的左外边缘接触包含块的左边缘(对于从右到左的格式,右边缘接触)。即使存在浮动也是如此(尽管盒子的内容区域可能会因浮动而缩小)。

回答by kkyy

Autistic Cuckoo's article about display properties and their differences (part 1, part 2, part 3) is also a recommended read.

Autistic Cuckoo 关于显示属性及其差异的文章(第 1部分第 2部分第 3 部分)也值得推荐阅读。