Home > Article > Web Front-end > Let me teach you what are the display methods in css?

Let me teach you what are the display methods in css?

零下一度Original: 2017-05-03 15:49:061867browse

Today, learn the display method in css

1. Display method：

The default display type of the box can be modified through the properties of display

Properties: display

Display 's 取:

1 , ## None ##: Let the generated elements have no box, so that the generated elements are not Show, hide. Once the value is set to none, all content within the element is no longer displayed and no longer takes up document space. 2

block: block, let any element be displayed like a block level 1 The characteristics of the block are:

1. 行行行

2. You can set it separately and high

# 2..

block use.

1, Inline elements should be displayed like block-level elements.

2, Let the block-level elements change from hidden

(display:none;) to displayed(display: Block;) 3 ,

## b

: Line, let any element display # inline Features: Multiple elements are displayed in one line

, the elements in the line are hidden from

# (Display: None;) ## to display

(Display: Inline)

## 4

, inline-block: Inline block, the element itself is an inline element, but it has the characteristics of a block(can Modify the width and height)

, 6ed09268cbdd0015bce8dcbbdfa9bfe4

is the inline block element

Use Display effect

, Visibility Attribute

作: Implementing element visibility

( display /

Hide) Values: 1, visible

: Default value, the element is visible.

2, hidden: The element is invisible and hidden, but the space is still occupied.

3, collapse: Used on tables, you can delete a row or column without affecting the layout of the table.

# 2 , OPACITY Attribute ##:

## Set the opaque level of the element# OPACITY: 0-1 (including # 0 # and

） ## The larger the value, the more opaque 3 , Vertical-Align attribute #:

# Set vertical alignment

Values: top / middle /bottom

(top, middle, bottom)

Baseline:

Baseline alignment (default alignment) Special usage:

For the inline block (img) element to be defined, we can define the alignment of the text on the side and the current element.

For example: Select I want the following text, link 2 to become an inline block, let link 3Becomes a block, link4disappears


       
  文本格式
  
   


  

  链接1
  链接2
  链接3
  >链接4

4, cursorattributecursor ：

By default, the cursor display on the web page will show different appearances according to different elements.

Hyperlink: Hand Shape

Text: I

Button: Arrow

In css, you can change the cursor display effect through the cursor attribute to provide customers with A visual hint.

Style

completely: Waiting for

# Help:?

The above is the detailed content of Let me teach you what are the display methods in css?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to deal with css overflow and line breaksNext article：How to deal with css overflow and line breaks

See more

Let me teach you what are the display methods in css?

Related articles