Difference between revisions of "User:RainSlide/CSS Boxes"

From PINE64
Jump to navigation Jump to search
(Add display: table-others)
Line 148: Line 148:


== <code>display: flow-root</code> ==
== <code>display: flow-root</code> ==
<div style="overflow: auto;">


<div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: ">
<div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: ">
Line 161: Line 163:
</div>
</div>


This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two.
== And… ==
 
This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: fit-content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two.

Revision as of 13:14, 27 September 2021

This page is mainly for showing why Template:Hint, Template:Note and Template:Warning uses display: table to archive compatibility for both adaptive width and floating sibling(s).

If a set of style is not compatible with adaptive width, it span to its full width even when it don't need to.

If a set of style is not compatible with floating sibling(s), the element may still work well with some short content in it; in another word, it may still looks fine when its content width + margin + padding + border is lower than the "remaining width" lefted by the floating sibling(s). So we have to use Lorem ipsum (as well as a floating box, for sure) to test it.

Ideally, you may just set the widths to fixed values, and pretend nothing happens and CSS is awesome. However, the content container of MediaWiki got adaptive width, and maybe you are maintaining a MediaWiki Template, with only inline styles.

CSS
is
Awesome

Table

display: table

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
No problem for floating siblings. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a wikitable
No padding when it's in another table, however.

display: table-cell

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.

Table cells are not blocky! Without this sentence, they are in the same row by now.

No problem for floating siblings. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table cells have no margin.

display: table-caption

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No adaptive width.
It's hiding. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

There can only be one table caption per table, or, per anything.

display: table-row

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width?
No problem for floating siblings? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table rows have no margin, padding or border.

display: table-others

Other table display values works just like table rows, (table-row-group, table-header-group and table-footer-group), or won't even display its contents (table-column and table-column-group).

A new block formatting context

See guide Block formatting context on MDN.

float: left

Will everything go right with float set to left?

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
It falls off from its floating siblings. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No, something falls down.

display: inline-block

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
But inline blocks are inline.
It also falls off from its floating siblings. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

display: flow-root

This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No adaptive width.
No problem for floating siblings. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And…

This is the end of part one. Part two will feature contain: content, width: fit-content, width: max-content, box-sizing: border-box; max-width: 100%, display: flex, display: grid, and more, if I ever got time to work on the part two.

Retrieved from "https://wiki.pine64.org/index.php?title=User:RainSlide/CSS_Boxes&oldid=11516"