display:table, box, and width percentages to distribute the box comparison

Box

box is suitable for sharing the inner sub box without the border of the parent box, otherwise the inner box border overlap problem is not very good processing, in addition, if there is margin value from the box, the middle margin will be double on both sides, then the Nth-child (index) can be adjusted individually.
Instead of dividing the entire width of the parent box, Box-flex is dividing the remainder of the sub-box's content area and the fixed-width sub-box, thus causing all the sub-boxes to be set to box-flex:1, but not evenly divided because of the number of sub-boxes.

Features of Box
1. When the parent element is set to Display:box, the internal self-box, regardless of whether it is an inline element, is arranged horizontally in the default direction.
2. The width of the inner block-level sub-box is determined by the content and no longer fills the entire line, even if it is arranged vertically.
3. When block-level elements are present in the inner box, it is useful to apply the box's related properties on the parent box, if the inner box is all inline elements will not work. The properties of the Box-flex box only work on block-level sub-boxes.

summarize the application of box:
1. Achieve the horizontal layout of the inner box: box-orient:horizontal
2. Center alignment of inner sub-box: Box-align:center;box-pack:center
Justify: Box-pack:justify
3. Sub-boxes divide the parent box (remainder) width by a certain proportion: box-flex:num; (width can still be set)

Set width: Percent

Setting the width of the sub-box is usually required to know the width of the parent box , the width of the area after the sub-box width, such as margin, border value, etc., which require accurate calculations, which is not convenient. It is usually necessary to float the child box first to achieve a horizontal layout, in percent usage. Or the width of the parent element is unknown, but there is no margin between the sub-boxes to be considered or can be directly used in this way evenly.

Display:table

It is possible to divide the remainder of the width except the margin by 100%, so that the width of the parent box does not have to be accurately calculated, and the border-spacing can also be used to avoid the problem of double after setting the margin. Border-collapse:collapse can also avoid border overlap problems.
Note, however, that table is no longer a block-level element, not a full line, and that the width and height are stretched by the content (but can be set to width and height). It can be set to a width of 100%.
Invalid margin value applied to Table-cell. Table-cell can also be broken by some other CSS properties, such as float, position:absolute, and so on using Display:table-cell and Float:left or Position:absolute Attributes are not used as much as possible.
Table-cell can be used alone, table and Table-cell can be used with two, can not table-row.

summarize the table application:
1. Set the inner box to Table-cell for horizontal arrangement
2. Set width for the inner box to achieve equalization, adaptive layout
3.border-collapse can avoid border overlap problem
4.border-spacing avoids setting the margin value to separate the margin double problem caused by the inner box.
5.table-cell activates the Vertical-align property, which can be used to center the inner element vertically
6. Achieve a high-level layout

limitations : ie8+ and modern browser support

The application of several Display:table-cell I know

Landscape layout

1.display:inline-block

2. Floating

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Display:table, box, and width percentages to evenly compare boxes