Some unimportant nonsense
Recently visit the Nuggets found that the nuggets have a new functional module ———— creator center. And I went to look, and this is what happened.
Wow, it’s all zero, nothing…
So I figured I had to do something.
Back to business, this time I want to talk to the big boys about percentages in CSS. I used to think that the percentage of child elements in CSS is calculated relative to their parent elements, but later I tweaked it and found that it is not as easy as I thought.
The body of the
First, we complete element A and add a child element B (green) to element A (purple). The diagram below:
It can be seen that the width of element B is calculated from the width of its parent element A, the height of element B is calculated from the height of its parent element A, and the margin/padding of element B is calculated from the width of its parent element A.
| Child element attribute | Referenced to the parent element attribute |
|---|---|
| width | width |
| height | height |
| margin/padding-(top/left/right/bottom) | width |
Then we add a child element C to b (although I added it earlier, so pretend we didn’t see it), and the width and height of c(blue) is the width and height of its parent element B.
And then we change it a little bit…
Add position: relative to element A; Add position to element C: absolute; It turns out that the percentage of element C is now calculated in terms of element A.
W3school says the set percentage is based on the containing block (parent element); Absolute, on the other hand, generates an absolute position relative to the first parent element other than the static position. So, this gives me the impression that with positioning set, the percentage calculation is relative to the parent element of the direct non-static positioning (the default positioning). And then add to the table:
| Child element attribute | Referenced to the parent element attribute |
|---|---|
| width | width |
| height | height |
| margin/padding-(top/left/right/bottom) | width |
| top/bottom | height |
| left/right | width |
Identify new problems
Problem a
I made a few small changes:
- Remove height from element A and add min-height
- Element B gets rid of the padding-top
The height of element B is 0. The height of the child element is 0. But the terms of element C don’t really matter, which is…
Question 2
When element B has no height, it is found that there is a certain distance on the top, and it is found that it is influenced by margin-bottom. But why?
Guys, if there’s anyone who knows why, please help me out, or I can answer my own questions when I find out for myself
The last
Write an article for the first time, if have what didn’t write correct ask big guy to correct. Of course, I wouldn’t necessarily change it.