Dimension Properties
| Property | Possible Values | Description |
|---|---|---|
width | auto, px, %, em, vw | Defines the width of an element |
height | auto, px, %, em, vh | Defines the height of an element |
max-width | none, px, %, vw | Sets the maximum width an element can have |
max-height | none, px, %, vh | Sets the maximum height an element can have |
min-width | 0, px, %, vw | Sets the minimum width an element must have |
min-height | 0, px, %, vh | Sets the minimum height an element must have |
box-sizing | content-box, border-box | Defines whether padding and border are included in width/height |
Explanation of Values
| Value Type | Description | Example |
px (pixels) | Fixed size, does not change with screen size | width: 300px; |
% (percentage) | Relative to the parent element | width: 50%; |
vw (viewport width) | Percentage of the browser's width | width: 80vw; |
vh (viewport height) | Percentage of the browser's height | height: 100vh; |
auto | Adjusts size based on content | width: auto; |
em / rem | Relative to font size | width: 10em; |
Example:
.container {
width: 80%;
max-width: 1200px;
min-width: 300px;
height: auto;
}
Qus. 1 : Which CSS property is used to control the order of flex items in the container
- flex-order
- order
- flex-direction
- item-order
- Opacity
- Visibility
- Stacking order
- Font size
- clear
- overflow
- z-index
- display
Programs
css code to design a box using div with following specifications
css code to design a circle using div with following specifications
css code to change the square into circle when mouse is over to the square shape
css code to create 3 different colors box which partially overlapped to each other
CSS code to blink text using keyframes