Making Count Master In Gdevelop

Advanced CSS Concepts

Box Model Deep Dive

The CSS box model is fundamental to understanding how elements are laid out on the web. It consists of the following parts:

• Content: The actual content of the element.
• Padding: The space between the content and the border.
• Border: The border around the padding and content.
• Margin: The space outside the border.

Box Sizing

The box-sizing property controls how the total width and height of an element are calculated. It can be set to:

• content-box: The default value. Width and height include only the content, not padding, border, or margin.
• border-box: Width and height include content, padding, and border, but not the margin.

div {

    box-sizing: border-box;

}

Positioning

CSS provides several properties to position elements:

• static: The default positioning. Elements are positioned according to the normal flow of the document.
• relative: Elements are positioned relative to their normal position.
• absolute: Elements are positioned relative to their nearest positioned ancestor (if any); otherwise, they are positioned relative to the initial containing block.
• fixed: Elements are positioned relative to the browser window.
• sticky: Elements switch between relative and fixed positioning depending on the scroll position.

div {

    position: absolute;

    top: 50px;

    left: 100px;

}

Display Property

The display property specifies the display behavior of an element. Key values include:

• block: The element is displayed as a block.
• inline: The element is displayed as an inline element.
• inline-block: The element is displayed as an inline-level block container.
• none: The element is not displayed.
• flex: The element is a flex container, enabling the use of Flexbox layout.

div {

    display: flex;

}

Introduction to Flexbox

Flexbox is a layout model that provides an easy and efficient way to lay out, align, and distribute space among items in a container. Key properties include:

• display: flex;: Defines a flex container.
• flex-direction: Defines the direction of the flex items. Values include row, column, row-reverse, and column-reverse.
• justify-content: Aligns flex items along the main axis. Values include flex-start, flex-end, center, space-between, and space-around.
• align-items: Aligns flex items along the cross axis. Values include flex-start, flex-end, center, baseline, and stretch.

.container {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}

Conclusion

Today's lecture covered advanced CSS concepts such as the box model, positioning, display properties, and an introduction to Flexbox. These tools and techniques will help you create more complex and responsive web layouts.

Practice

Box Model Practice

Modify the example below to use box-sizing: border-box and set a width of 100% for the .box class:

.box {

    width: 100%;

    padding: 10px;

    border: 2px solid black;

    margin: 20px;

    box-sizing: border-box;

}

Positioning Practice

Create a CSS rule to position an element with the class "absolute-box" 50px from the top and 100px from the left of its nearest positioned ancestor:

.absolute-box {

    position: absolute;

    top: 50px;

    left: 100px;

}

Display Property Practice

Write a CSS rule to make an element with the class "inline-block-item" display as an inline-block element:

.inline-block-item {

    display: inline-block;

}

Flexbox Practice

Set up a flex container with the class "flex-container" that arranges its items in a row, centered along both the main axis and the cross axis:

.flex-container {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}

Final Practice

Create a complete CSS rule set to create a layout with a flex container that has:

• Three child elements.
• The container should use flex-direction: column.
• The child elements should be spaced evenly along the main axis using justify-content: space-between.

.flex-container {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 300px;

}

.flex-container div {

    background-color: lightgrey;

    padding: 10px;

    border: 1px solid #ccc;

}

Related Posts