Display Property
The display property specifies the display behavior of an element. The most common values are:
- none: This value makes the element and its content disappear from the page completely.
- block: This value makes the element take up the full width of its parent element. Block-level elements start on a new line.
- inline: This value makes the element only take up as much width as necessary, and does not force new lines.
- inline-block: This is a hybrid of inline and block. It makes the element only take up as much width as necessary, but allows for setting of width and height like a block element.
Example syntax:
div {
position: none | block | inline | inline-block;
}
Example usage:
div {
display: none; /* The <div> will not appear on the page */
}
p {
display: block; /* The <p> will take up the full width of its parent */
}
Visibility Property
The visibility property allows you to hide an element, but it will still take up the same space as before. The element is hidden, but still affects layout. The main values are visible (default) and hidden.
Example syntax:
p {
visibility: hidden | visible;
}
Example usage:
p {
/* The <p> element will be invisible, but still take up space */
visibility: hidden;
}
Opacity Property
The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Example:
p {
opacity: 0.5; /* The paragraph will be semi-transparent */
}
Overflow Property
The overflow property specifies what should happen if content overflows an element's box. Values include visible (default), hidden, scroll, and auto.
Example syntax:
div {
overflow: visible | auto | scroll | hidden;
}
Example usage:
div {
/* Provides a scrollbar if the <div> content is too big to fit */
overflow: auto;
}
Understanding these properties will allow you to better control how elements are displayed on the web page, and handle different scenarios of content overflow and element visibility. Always remember to test your design on different screen sizes to ensure it looks good on all devices.
