Difference between revisions of "User:RainSlide/CSS Boxes"
(CSS Boxes, part one) |
m (→float: right: It's left) |
||
| Line 105: | Line 105: | ||
== A new block formatting context == | == A new block formatting context == | ||
=== <code>float: | === <code>float: left</code> === | ||
''Will everything go right?'' | ''Will everything go right?'' | ||
Revision as of 11:17, 22 September 2021
If a set of style is not compactable with adaptive width, it span to its full width even when it don't need to.
If a set of style is not compactable 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.
Table
display: table
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
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.
Table cells are not blocky! Without this sentence, they are in the same row by now.
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.
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.
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.
Other table display values works like table rows, or won't even display its contents.
A new block formatting context
float: left
Will everything go right?
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
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.
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.
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 the end of part one. Part two will feature contain: 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.