What’s good, my people? Today we’re talking about CSS units and layout positioning.
Now, you might be thinking, “What the heck is that?” but trust me, it’s a key ingredient in making your web pages look fly.
CSS Units
Let’s start with CSS units. CSS units determine how we measure different properties in CSS. We got two main types of units: Absolute units and Relative units.
Absolute units are like rulers. They’re fixed units that stay the same no matter what. For example, pixels (px) are an absolute unit.
So if you set the font size to 20px, it’s always gonna be 20 pixels tall, no matter what.
Relative units, on the other hand, are more like stretchy pants. They adapt to the size of their container. For example, percentages (%) are a relative unit. So if you set the width of a div to 50%, it’ll be half the width of its parent element.
Layout positioning
Now let’s move on to layout positioning. Layout positioning is how we control the position of our elements on the page. We got four main types of layout positioning: static, relative, absolute, and fixed.
Static positioning is the default positioning. It’s like standing in one spot. You can’t really move around.
Relative positioning is like standing on a skateboard. You can move around a little bit, but you’re still attached to your original position.
Absolute positioning is like being a ninja. You can move around freely without anyone noticing. You’re not attached to any other elements on the page.
Fixed positioning is like being a VIP at a party. You’re always in the same spot, no matter where the other elements are.
To position an element, we use the CSS property “position”. For example, if you want to position a div with relative positioning, you can do it like this:
div {
position: relative;
top: 20px;
left: 20px;
}
This will position the div 20 pixels from the top and left of its original position
Conclusion
And that’s the basics of CSS units and layout positioning.
With these tools, you can create some dope layouts and make your web pages look fly as heck.
So, get out there and experiment with different units and positions.
Peace out, my peeps!
