CSS Positioning and Sizing.
CSS positioning and sizing has been for me the hardest part of learning web development.
I have never had any difficulties in understanding why HTML works the way it does. The structure seems completely logical in its hierarchical organisation. And even with programming languages, which do of course all have their quirks and idiosyncrasies, ultimately you can usually figure out how to get stuff done by thinking logically.
CSS, though, or rather the way it handles the positioning and sizing of the various DOM elements with respect to each other, their siblings, their parents and the viewport, sometimes has had me completely stumped. It has seemed like learning a completely unknown human language in that I have sometimes just felt at a loss, because I can't express what I want to say or achieve, and I can't use logical thinking to make an intelligent guess.
But finally I think I'm starting to understand the way it behaves, though I still have much to learn.
I do think it's rather like a sort of black art though!
So, partly for my own benefit, but also for anyone who's having issues with positioning and sizing in CSS, I've compiled a list of the topics I need to understand in this regard. I haven't provided any answers but at least there's a list which I can work through, taking each in turn and just playing about till enlightenment comes!
What I need to learn more about:
When to use
position: fixed/static/absolute/relative/sticky.When to use
height,width,max-height,max-width,top,bottom,left,rightRelationships between containers and their children in terms of sizing; how sizes and positions change when you change positioning and sizing on the parent or grandparent element, etc.
Different sizing and positioning behaviours of elements like
<img>,<iframe>,<video>etc.to text elements like<p>,<h1>etc..Effects of
floatandclear.When to use
display: inline/block/inline-block/grid/flex/visible/none.How containers change their properties dependent on the
displayproperty.Overview of Flexbox and Grid; when you might want to use one or the other - or both?
Responsive design and media breakpoints; mobile-first or desktop-first development?
Effects of the properties of containers on sizing and positioning of elements when the user resizes the viewport.
When to use
px,em,rem,pt,fr, percentages....Viewport units -
vw,vh,vmin,vmax- and how they make life simpler!Example: how to make an image scale when the user resizes the viewport instead of being cropped.
Addendum
I recently submitted a version of the above list to the excellent Syntax FM Podcast and was delighted to get a mention from Wes Bos on Episode 86 for "the most nicely formatted question I've ever seen!" and from Scott Tolinski, who said "It's so good!"
Wes added "Thank you, we're just gonna take your entire outline and do a show on that!"; so I await said show with considerable interest!