What is the document flow? (Normal stream Normal Flow)
1. What determines the height of a div?
Example: When we write font-size: 20px; time to apply different fonts, different height of the div.
The default font is different rows high is not the same.
If there is only one div highly inline elements, div equal to the row height. line-height: 20px;
2, how text alignment?
Routine: change html, plus a div distraction and alignment of the back behind the name.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> div{ border: 1px solid red; font-size: 20px; } span{ border:1px solid green; display: inline-block; width: 5em; text-align: justify; line-height: 20px; overflow: hidden; height: 20px; } span::after{ content:''; display: inline-block; width: 100%; border: 1px solid blue; } </style></head><body> <div> <span>姓名</span> <br> <span>联系方式</span> </div></body></html>复制代码
3, between inline elements if there are any spaces, line breaks and other invisible characters, the page will be void.
Do not use inline-block, with routines: the body plus child elements float: left; plus the parent element body
.clerafix::after{ content: ''; display: block; clear: both;}复制代码
4, multi-line text overflows back becomes an ellipsis google: css multi line text ellipsis
Code:
div{ display: -webkit-box; -webkit-line-clamp: 2; //要几行就写几 -webkit-box-orient: vertical;}复制代码
Center problem
1, vertical center text
Do not write highly adaptive
example:
Required height 40px;
div{line-height: 24px;padding: 8px 0;}复制代码
2, the text is centered horizontally
div{text-align: center;}复制代码
There div div how vertically centered horizontally?
1, highly uncertain:
{display: flex;justify-content: center;align-items: center;}复制代码
The combined margin
If the parent element has no border; then the margin of sub-elements of the upper and lower maigin will merge.
If the solution? On the parent element plus margin-top or add padding-top or add overflow: hidden; (not a last resort do this)
Make a 1: div 1 of
div{
padding-top: 100%
}
to sum up:
Div height is determined by the sum of the height of its internal document stream,
Refers to the document flow inline elements arranged sequentially from left to right (), if space is insufficient, renewed flow line;
Block elements on a separate line, from top to bottom.
From the document flow:
Method a float: left;
Method Two position: absolute;
Method three position: fixed;
Reproduced in: https: //juejin.im/post/5d0a5ad55188256de15daff3