What does 100% mean in CSS? (2020)

Post by chrismorgan » Fri, Jul 09, 2021, 6:30 AM UTC

lifthrasiir wrote: post #13

keithnz wrote: post #2

and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add inset:0rem; margin: auto; it will center vertical and horizontal it without having to translate it courtesy of Kevin Powell - https://www.youtube.com/watch?v=HOM47v73yG8 ( who I've found to be an amazing resource for learning all kinds of CSS info )

Note that inset is a very recent introduction, only supported by Firefox 66+, Chrome 87+ and Safari 14.1+ (14.5+ in iOS). It will take quite a while to use it without thinking.

Post by est » Fri, Jul 09, 2021, 6:41 AM UTC

Post by colordrops » Fri, Jul 09, 2021, 6:58 AM UTC

myfonj wrote: post #18

colordrops wrote: post #15

I'm a little embarrassed to admit that I've been working with this stuff for decades and I just now found out that margin and padding top is based on parent width if expressed in percentages. I'm only a little embarrassed because who expresses margins in percentages anyway.

You never needed to set some flexible containers dimensions to have some precise aspect ratio? Up until very recently [1] the "padding hack" used to be the only option… https://css-tricks.com/aspect-ratio-boxes/ [1] Recently `aspect-ratio` got into evergreen browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...

Post by system2 » Fri, Jul 09, 2021, 7:01 AM UTC

sroussey wrote: post #11

jalbertoni wrote: post #3

Not gonna lie, the last example made me happy, but my practical side was screaming "just use flexbox, jeez"

Or table

Post by system2 » Fri, Jul 09, 2021, 7:04 AM UTC

optimusclimb wrote: post #14

This is why I knew how to be a frontend engineer at one point in life but never pursued it past the early 2000s. The brainpower wasted on web layout is immense.