CSS3 Base -9 Css Display (display mode, display effect, cursor)

First, display mode

Display mode

-"Everything is a box": all elements on the page can be displayed as boxes

-Block-level elements

-<div>,

-These elements are displayed as a piece of content, the "block box"

-inline element/inline element

-<span>, <a> elements, etc.

-The content is displayed in the row, which is the "inline box"

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/D9/wKioL1bxEXeQfuwBAAA_FP_kPgM993.png "title=" Web.png "alt=" Wkiol1bxexeqfuwbaaa_fp_kpgm993.png "/>

Display Properties

-Take value

-Display:none/block/inline/inline-block;

-None

-Let the generated element have no box at all

-The box and all its contents are no longer displayed and do not occupy space in the document

-Block

-Make inline elements (such as <a> elements) behave like block-level elements

-Inline

-Make block-level elements (such as <p> elements) behave like inline elements

-Inline-block

-Fast Intra-line element

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7D/DD/wKiom1bxEaGjch9uAAGmHeM3DuE176.png "title=" Web.png "alt=" Wkiom1bxeagjch9uaagmhem3due176.png "/>

Second, the display effect

Visibility property

-The Visibility property specifies whether the element is visible

-Desirable values

-Visible: Default value, Element visible

-Hidden: element not visible, but still occupy space

-Collapse: When you use a TABLE element, you can delete one row or column without affecting the layout of the table

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7D/DD/wKiom1bxEn6gl7T6AACZGI_8DBo098.png "title=" Web.png "alt=" Wkiom1bxen6gl7t6aaczgi_8dbo098.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/D9/wKioL1bxE0_S6boiAAFCnkqZ4yA599.png "title=" Web.png "alt=" Wkiol1bxe0_s6boiaafcnkqz4ya599.png "/>

Opacity Property

-Opacity property sets the opacity level of the element

-Value Opacity:value;

-value specifies opacity, from 0.0 (fully transparent) to 1.0 (completely opaque)

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/D9/wKioL1bxE82j4ixCAAEZx8zlunk007.png "title=" Web.png "alt=" Wkiol1bxe82j4ixcaaezx8zlunk007.png "/>

Vertical-align Property

-Set the vertical alignment of the contents of cells in a cell box

-for inline block-level elements, such as , you can set vertical alignment

-Defines the vertical alignment of the baseline of the element within the row relative to the line of the element

-Common values

-Baseline: By default, elements are placed on the baseline of the parent element

-Top: Aligns the top of the element to the top of the highest element in the row

-bottom: Aligns the top of the element to the top of the lowest element in the row

-Middle: Place this element in the middle of the parent element

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/DD/wKiom1bxFVrRQ5tIAAHo9Q1v2to056.png "title=" Web.png "alt=" Wkiom1bxfvrrq5tiaaho9q1v2to056.png "/>

Third, the cursor

Cursor

-By default, the cursor will change depending on the user's action

-When the mouse hovers over a link, the cursor changes from the pointer shape to a hand shape

-I shape is displayed when the mouse hovers over the text area

-When the mouse hovers over a button, the cursor is displayed as an arrow

-You can use the Cursor property to specify the type of mouse cursor (shape) to display to the user

-Provides users with a visual hint of what they can do

Cursor Property

-The cursor property defines how the mouse pointer is positioned within the bounds of an element

-Desirable values

-Default

-pointer

-Crosshair

-Text

-Wait

-Help, etc.

Summary: This chapter mainly introduces the CSS display (including display, display effect, cursor).

This article from the "Technical Exchange" blog, declined reprint!

CSS3 Base -9 Css Display (display mode, display effect, cursor)