CSS Is Not Hard(You &#re Just Missing These Basics)- Mastering the Foundation(Part 2)-CSS Tutorial-php.cn

Thank you all for the comments on the last article, it really does mean a lot. I hope you learn one or two things from this article.

In this article, we'll explore two fundamental concepts in CSS—positioning and layout. Positioning and layout are at the heart of creating visually appealing and functional webpages. Mastering these concepts allows you to craft responsive designs that enhance user experience. By the end, you'll know how to use these techniques to structure your webpages like a pro.

- Positioning and Layout

CSS Positioning controls how elements are positioned or placed on a web page. Positioning is influenced by the offset values Top, Bottom, Left and Right when applicable. There are 5 main CSS Position values;

1. Static: All HTML elements are positioned static by default. This simply means the element is unchanging and does not move and is not influenced by the offset values Top, Bottom, Left and Right.

2. Relative: Elements are positioned relative to their normal position.

3. Absolute: Elements are positioned relative to their nearest ancestor(parent) or the viewport.

4. Fixed: Elements are positioned relative to the viewport and remain fixed during scrolling.

5. Sticky: Sticky positioning allows an element to switch between relative and fixed positions based on scroll position and offset values Top, Bottom, Left and Right.

Below is an illustration that explains CSS positioning.

CSS Is Not Hard(You

Here is the code that helped bring the illustration to life. Feel free to copy and modify on your own.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Copy after login

— Pause, Take a deep breath, and then proceed!!—
- CSS Layout

1. Flexbox: This is a one-dimensional layout method used for laying items out in a single axis (horizontally and vertically).

Features of a flexbox

display: flex - This creates a flexbox for the container.
align-items: center - This controls the container's vertical alignment.
justify-content: space-between - This controls the container's horizontal alignment.
gap: adds spacing between flex items without needing margins.

Here's the before and after of a simple Navigation Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

Copy after login

Result:

CSS Is Not Hard(You

2. Grid: This is a 2-dimensional layout method used in creating rows and columns.

Features

display: grid - This creates a Grid for the container.
grid-template-columns/grid-template-rows - This defines a row or column for the container.
repeat(2, 1fr) - This creates 2 equal-width columns.
gap: 10px- Adds spacing between grid items.

Here is a before and after of some cat photos i found on Unsplash.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Copy after login

Result:

CSS Is Not Hard(You

Comparison Table

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

Positioning and Layout are the foundation of CSS. Understanding when and how to use them will not only make your styling experience easier but also more enjoyable and efficient. While this article gets you started with Flexbox and Grid, I’ll soon publish a more in-depth guide exploring their advanced features, tips, and tricks. Stay tuned for that!

And that’s a wrap on Mastering CSS Basics! I hope you enjoyed reading this as much as I enjoyed writing it. But before we part ways, I’d love to hear from you:

Which CSS layout method do you prefer for your projects—Flexbox or Grid? And why?

Feel free to share your thoughts in the comments below.

Bye for now!!!!

The above is the detailed content of CSS Is Not Hard(You &#re Just Missing These Basics)- Mastering the Foundation(Part 2). For more information, please follow other related articles on the PHP Chinese website!