Scribd
Upload
32 views

g8 Lesson 11

This document discusses visual formatting techniques in CSS including dimension, position, and combining maximum and minimum properties. Dimension deals with height and width while maximum and minimum properties allow setting size ranges. There are four position types - static is the default, relative uses offsetting, fixed stays on screen, and absolute uses the nearest positioned ancestor or document body.

Uploaded by

amerol.220438
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

g8 Lesson 11

This document discusses visual formatting techniques in CSS including dimension, position, and combining maximum and minimum properties. Dimension deals with height and width while maximum and minimum properties allow setting size ranges. There are four position types - static is the default, relative uses offsetting, fixed stays on screen, and absolute uses the nearest positioned ancestor or document body.

Uploaded by

amerol.220438
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

LESSON 11

Visual Formatting
Dimension
• Dimension deals with the height and width of a box element. An element
can be resized by defining its height and width. The
Setting Max-Width and Max-Height

• CSS allows web developers to set the maximum and minimum width and
height of an element.
Setting Min-Width and Min-Height

• The min-width property in CSS is used to set the minimum width of an


element. Min-width also works similarly as the max-width and heigh
Combining Maximum and Minimum Property

• CSS also allows an element to set its maximum and minimum width and
height at the same time. It is beneficial since developers can estimate the
width or height instead of having a fixed size.
Position

• The position property specifies the kind of positioning that will be used for
an element.
• There are 4 positions
1. Static Position
2. Relative Position
3. Fixed Position
4. Absolute Position
Static
• Static is the default value. HTML elements are positioned static by default.
The diagram below shows how an element is positioned using static
property. Use property value position: static; to use static property values
Relative
• Relative behaves similarly to static unless you include additional properties.
Modifying the top, right, bottom, and left properties of this element will
cause it to be moved away from its normal position
• Example:
• div{ position: relative; top: -20px; left: 20px; }
Fixed

• A fixed element is an element that stays in position even if the page is


scrolled. Similar to relative, the top, right, bottom, and left properties are
used.
Absolute
• This element is similar to fixed but uses the nearest position ancestor
instead of the viewport. However, if an absolute positioned element has no
positioned ancestors, it uses the document body, and moves along with page
scrolling.

You might also like