Let me teach you what are the display methods in css?-CSS Tutorial-php.cn

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

零下一度

Release： 2017-05-03 15:49:06

Original

1982 people have browsed it

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)

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

<!DOCTYPE html >
       <head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
    a{
       border:1px solid black;
   width:70px;
   height:30px;
   background-color:silver;
}
   </style>
</head>
  
<body>
  <a href="#">链接1</a>
  <a href="#" style="display:inline-block;">链接2</a>
  <a href="#" style="display:block;">链接3</a>
  <a href="#"style="display:none;">>链接4</a>
</body>
</html>

Copy after login

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!