Without doubt, I wish I'd learnt the underlying concepts of CSS earlier. For example, because CSS rules bind the element that is the subject of the selector to the declarations, it's not at all intuitive that the fundamental building block of layout is the box, and not the element. Only once I'd grasped that, could I see that the display property is about how each element maps to zero, one or more boxes, and I could form a proper mental picture of how these boxes were established and how they interacted with one another.
The other area that's distinctly non-intuitive is the line box. Line boxes are effectively constructed from inline boxes in an inside-to-out fashion, rather than left-to-right, or DOM tree-order. The line box is an emergent construct, no properties directly address it and there's no way to display its boundaries in a browser when its containing block has more than one line box in it, so it's very difficult to visualise. Yet it is critical to understanding how text is laid out on the page.
I've watched and read many CSS tutorials but haven't heard of these things before. Are there any particular resources that helped you grasp these concepts?
Yes, but it's not easy reading. I read and kept re-reading the CSS 2.1 specification until the concepts gradually sunk in. I combined that with time spent using jsfiddle or jsbin trying experiments to see what happened, and when the behaviour wasn't what I expected, searching the spec for an explanation. When you initially read it, the language it uses is quite daunting, but with re-readings it slowly comes to you, and it becomes clear just how much information is packed in there.
In particular, I recommend reading sections 2 through 7 of the CSS 2.2 spec which provide the grounding for CSS, yet are regularly skipped because they don't contain the description of any CSS properties.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Without doubt, I wish I'd learnt the underlying concepts of CSS earlier. For example, because CSS rules bind the element that is the subject of the selector to the declarations, it's not at all intuitive that the fundamental building block of layout is the box, and not the element. Only once I'd grasped that, could I see that the
displayproperty is about how each element maps to zero, one or more boxes, and I could form a proper mental picture of how these boxes were established and how they interacted with one another.The other area that's distinctly non-intuitive is the line box. Line boxes are effectively constructed from inline boxes in an inside-to-out fashion, rather than left-to-right, or DOM tree-order. The line box is an emergent construct, no properties directly address it and there's no way to display its boundaries in a browser when its containing block has more than one line box in it, so it's very difficult to visualise. Yet it is critical to understanding how text is laid out on the page.
Fonts leave space for their ascenders and descenders too, so even more complexity and confusion is caused by that.
I've watched and read many CSS tutorials but haven't heard of these things before. Are there any particular resources that helped you grasp these concepts?
Yes, but it's not easy reading. I read and kept re-reading the CSS 2.1 specification until the concepts gradually sunk in. I combined that with time spent using jsfiddle or jsbin trying experiments to see what happened, and when the behaviour wasn't what I expected, searching the spec for an explanation. When you initially read it, the language it uses is quite daunting, but with re-readings it slowly comes to you, and it becomes clear just how much information is packed in there.
In particular, I recommend reading sections 2 through 7 of the CSS 2.2 spec which provide the grounding for CSS, yet are regularly skipped because they don't contain the description of any CSS properties.