css – 块级框和主要块级框之间有什么区别?

引用 spec

Block-level Boxes are Boxes that participate in a block formatting
context. Each block-level element generates a principal block-level
Box that contains descendant Boxes and generated content and is also
the Box involved in any positioning scheme. Some block-level elements
may generate additional Boxes in addition to the principal Box:
‘list-item’ elements. These additional Boxes are placed with respect
to the principal Box.

它们基本上是一回事吗?

解决方法

主块级框是由给定元素生成的块级框,该元素直接受适用于该元素的样式规则的影响.

大多数元素只生成一个框.对于这些元素,它们基本上是相同的,因为没有涉及其他框.

但是,元素可以根据其显示类型生成多个框,例如list item;当您为这样的元素声明样式时,样式通常应用于主体框,并且相应地呈现生成的任何其他框.

例如,除了主框之外,列表项还有一个标记框;如果指定list-style-position:outside,则列表标记将放置在主框的边界之外,但主框的背景和边框不会受到影响.请注意,标记框仍然是主框的后代,因此可继承的属性(如颜色)将应用于标记(这就是为什么颜色:红色将文本及其子弹标记变为红色).

大多数其他块级元素,包括display:block但不包括display:table(参见section 17.4),只会为其内容生成一个主要的块框,而不是其他内容,使它们基本上只是“块框”,但仅限于这些元素.

换句话说,所有主要块级框都是块级框,但并非所有块级框都是主体,例如anonymous block boxes.此外,内联元素(包括内联块)本身不生成任何主框,也不存在像一个主要的内联盒子这样的东西.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效