Several properties of CSS Display,float,clear,overflow,visibility

http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/

Display Properties: Block/inline/none

Display:block (function is to display the row property label as a block attribute tag, you can set the width height);
Display:inline (the function is to put the block attribute tag to display the Row property label, then the Block property label can not set the width high);
Display:none (function is to make the controlled label not display)
Visibility:hidden (the box that sets the element is not visible, but the position in the layout is constant)
The difference between it and Display:none is that the latter will not occupy that position, the next element will directly overwrite it, while the former will occupy that layout, but not display the content, is a blank, and download the time for Display:none will not show the elements not to download, And Visibility:hidden will not display the elements to download it;

Float (floating, still limited by document Flow) row label float to set its width and height

Float:none/left/right
None: Object does not float
Left: Floating
Right: Floating

Clear (clears floating)

Clear:both/none/left/right
None: Allow floating objects on both sides
Both: Floating objects are not allowed
Left: does not allow floating objects
Right: Do not allow floating objects

Overflow (exceeded)

Overflow:visible/auto/hidden/scroll
Visible: Do not cut content or add scroll bars
Auto: Default Property
Hidden: Hide Beyond Content
Scroll: Always show scroll bars

Visibility (visible)

Visibility:inherit/visible/hidden
Inherit: Inherit the visibility of a parent object
Visible: Object Visible
Hidden: Object hiding

Differences in several image formats:

GIF: Semitransparent is not supported
JPG: Support transparency
PNG: Partially supports transparency, requires additional processing

==============

Http://www.studyofnet.com/news/398.html

One, block-level elements: block element

Each block-level element is a row high by default, and after adding a block-level element in a row, it is not generally possible to add other elements (except float floats). When two block-level elements are continuously edited, they are displayed in a page wrap. Block-level elements can generally be nested in block-level elements or inline elements;

Block-level elements typically appear as containers, and are used to organize structures, but not all. Some block-level elements, such as <form> can only contain block-level elements. Other block-level elements can contain row-level elements such as <p> some can contain either block-level or row-level elements.

P is the most commonly used block-level element, and the display:block of the element style are block-level elements. They are always in the form of a block, and with siblings of sibling blocks in sequence, left and right full.

Elements in line: inline element

Also known as inline elements, inline elements, and so on, the inline elements are generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements, common inline element "a". For example, the SPAN element, the display:inline of the IFRAME element and the element style are all inline elements. such as text such elements, each letter is arranged horizontally, to the right end of the automatic folding line.

Iii. Characteristics of block elements


①, always start on a new line;


②, height, row height, and margin and inner margin can be controlled;


③, width default is 100% of its container, unless a width is set.


④, which can accommodate inline elements and other block elements

Iv. Characteristics of inline elements


①, and other elements are on one line;


②, high, high and outer margin and inner margin can not be changed;


③, Width is the width of its text or picture, can not be changed

④, inline elements can only hold text or other inline elements

For inline elements, be aware of the following

• Setting width is not valid.

• Setting height is invalid and can be set by Line-height.

• Setting margin is only valid for margin, upper and lower invalid.

• Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.

V. Common block elements

• address– Address

• blockquote– Block Reference

• center– the Alignment block

• dir– directory List

• P – commonly used block-level easy, but also the main label of CSS layout

• dl– definition List

• Fieldset–form control Group

• form– Interactive Forms

• h1– Big Title

• h2– Subtitle

• H3–3 level headings

• H4–4 level headings

• H5–5 level headings

• H6–6 level headings

• hr– Horizontal Divider Line

• Isindex–input prompt

• menu– Menu List

• Noframes–frames Optional content (this chunk content is displayed for browsers that do not support frame

• noscript– Optional Script content (this content is displayed for browsers that do not support script)

• ol– ordered Forms

• P – Paragraph

• pre– formatting text

• table– form

• ul– unordered List

Vi. Common inline elements

• A – Anchor Point

• abbr– abbreviation

• acronym– First word

• b – Bold (not recommended)

• Bdo–bidi Override

• big– Large Font

• br– line break

• cite– references

• code– Computer code (required when referencing source)

• dfn– Defining fields

• Em– stressed

• font– font settings (not recommended)

• I – Italic body

• img– Pictures

• input– input Box

• kbd– Defining keyboard text

• label– Table Labels

• Q – Short Quotes

• S-underlined (not recommended)

• samp– Defining sample computer code

• select– Project Selection

• small– Small Font text

• span– commonly used inline containers that define chunks within text

• strike– in Underline

• strong– Bold Emphasis

• sub– subscript

• sup– superscript

• textarea– Multi-line text input box

• tt– Telex Text

• U underline

What is the difference between an inline element and a block-level element?

Difference One:

block-level: block-level elements will have a single row, and width automatically fills the width of its parent element by default

Inline : inline elements do not monopolize a row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.

Difference Two:

block-level: block-level elements can be set to a wide height

Inline : in-line elements cannot be set to width height

Difference Three:

Block Level: block-level elements can be set margin,padding

in-line: The horizontal direction of the elements in the margin-left; Margin-right; Padding-left; Padding-right; can take effect. But the vertical direction of the margin-bottom; Margin-top; Padding-top; Padding-bottom, but not effective.

Difference Four:

block level:Display:block;

in line:display:inline;

You can toggle block-level elements and inline elements by modifying the display property