CSS display

There are many types of CSS display properties, including:

display: This attribute determines how the element is displayed. Common values include block(block-level element), inline(row-level element), inline-block(inline-block element), noneetc.
visibility: This attribute is used to set the visibility of the element. Can be set to visible(default value, the element is visible), hidden(the element is invisible), collapse(in the table, the element only occupies space but is not displayed), etc.
opacity: This attribute is used to set the transparency of the element. A value of 0 makes the element completely transparent, a value of 1 makes the element completely opaque.
overflow: This property is used to set what happens when content overflows the element box. It can be set to visible(default value, content will be displayed outside the element frame when it overflows), hidden(content will not overflow outside the element frame), scroll(scroll bars will always be displayed), auto(scroll bars will be automatically displayed if necessary), etc.
position: This attribute is used to set the positioning type of the element. Can be set to static(default, the element is positioned according to normal document flow), relative(relative positioning, the element is positioned relative to its normal position), absolute(absolute positioning, the element is positioned relative to the nearest positioned ancestor element), fixed(fixed positioning, Elements are positioned relative to the browser window), etc.
z-index: This attribute is used to set the stacking order of elements. An element can be above or below another element. Elements with higher z-index overwrite elements with lower z-index.

These properties can all be used in CSS to control how HTML elements are displayed.

hidden element

In CSS, there are multiple ways to hide elements. Here are some commonly used methods:

display: none;This method is a commonly used element hiding method. Hidden elements will not occupy a position on the page, nor will they respond to bound listening events.
visibility: hidden;display: none;The difference with this approach is that using visibility: hidden;hidden elements still takes up space on the page, but the elements are not visible.
opacity: 0;You can make an element transparent by opacitysetting its property to 0. Note that while the element itself still occupies its own position and contributes to the layout of the web page, it will also respond to user interaction.
z-index: -1;By z-indexsetting an element's property to a negative value, you can place the element below other elements and hide it.
position: absolute; left: -999px;Absolute positioning moves elements off the screen to hide them.
width: 0; height: 0;If you don't want the hidden element to take up space, you can set the width and height of the element to 0.
font-size: 0;For text elements, you can set the font size to 0 to hide them.
color: transparent;For text elements, you can set the text color to transparent to hide it.
visibality: hidden;Elements can also be made invisible via the visibility attribute.

Block and inline elements

Block elements and inline elements are the two main element types in CSS, and they have some differences in layout and style application.

Block elements are often used to build the basic structure of a page. They can occupy a line by themselves and always start on a new line by default. Block elements can also contain other block elements or inline elements. Common block elements include div, h1-h6 titles, form (can only be used to accommodate other block elements), hr, p, table, ul, etc.

Inline elements are mainly used to select text and set styles. They only occupy their own size, cannot set width and height, and can only be displayed on the same line. Inline elements can only accommodate text or other inline elements. Common inline elements include a and span.

The main difference between block elements and inline elements is how they are laid out on the page and the styles that can be applied. Block elements are typically used to build the "block-level" structure of a page, while inline elements are used to style text or other inline elements.

Example

1. How to change the display of an element

You can change the way an element appears with the following CSS styles:

#elementId {
    
    
  display: none; /* 或者其他CSS显示属性，例如：block, inline, inline-block, visible, hidden, opacity, z-index, position, width, height, font-size, color等 */
}

In the above code, elementIdit is the ID of the element whose display mode you want to change. You can choose the appropriate CSS display properties according to your needs. For example, if you want to hide an element, you can displayset the property to noneso that the element disappears completely from the page and takes up no space.

Note: If an element is hidden and you still want it to take up space, you can use it instead visibility: hidden;.

2. How to display inline elements of an element

Elements can be displayed as inline elements via the following CSS styles:

#elementId {
    
    
  display: inline;
}

In the above code, elementIdis the ID of the element you want to display as an inline element. By setting displaythe property to inline, the element will be displayed as an inline element, taking up only the required width and not occupying its own line.

If you want to display as an inline block element, you can set displaythe attribute to inline-block, so that the element can only occupy the necessary width like an inline element, or you can set the width and height like a block-level element.

3. How to display block elements of elements

Elements can be displayed as block-level elements via the following CSS styles:

#elementId {
    
    
  display: block;
}

In the above code, elementIdis the ID of the element you want to display as a block-level element. By setting displaythe attribute to block, the element will be displayed as a block-level element, occupying its own line, and the width and height can be set.

4. How to use the collapse attribute of a table

In CSS, border-collapseproperties are used to style table borders. Use border-collapse: collapse;to merge adjacent table cell borders into a single border.

Here is an border-collapseexample using the attribute:

table {
    
    
  border-collapse: collapse;
}

td, th {
    
    
  border: 1px solid black;
  padding: 8px;
}

In the above example, this way, the borders of all cells ( <td>and <th>) in the table are merged into a single border. Then, we set the border style for <td>the and elements so that they appear as a solid black 1-pixel line.<th>

By applying border-collapse: collapse;, the borders of adjacent cells are merged, creating a simpler, cleaner table appearance.

CSS display: Display

Article directory