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

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

display property:block/inline/none

display :block (the function is to display the row attribute label as a block attribute label, and the width and height can be set);
display: inline (the function is to display the block attribute label as a row attribute label, and the width and height cannot be set for the block attribute label at this time) ; The difference between display:none and display:none is that the latter will not occupy that position, and the next element will directly cover it, while the former will occupy that layout, but does not display the content and is blank; and when downloading, display:none will Elements that are not displayed will not be downloaded, but visibility: hidden will download elements that are not displayed;

float (floating, still subject to document flow restrictions) can be set after the row label float Its width and height

float: none/left/right

none: Object does not float

left: Left float

right: Right float

clear（
Clear floats

)

clear: both/none/left/rightnone: Allow floating objects on both sides

both: No floating objects allowed

left: Not allowed There are floating objects on the left
right: Floating objects on the right are not allowed

overflow (overflow)

overflow: visible/auto/hidden/scroll

visible: Content is not cut Do not add scroll bars

auto: Default properties

hidden: Hide beyond content
scroll: Always display scroll bars

visibility(visible)

visibility: inherit/ visible/hidden

inherit: Inherit the visibility of the previous parent object

visible: Object visible

hidden: Object hidden

Differences in several image formats:

gif: Translucent is not supported

jpg: Transparent is supported

png: Transparent is partially supported and requires additional processing

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

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

1. Block-level elements: block element

Every By default, block-level elements occupy one row of height. Once a block-level element is added to a row, other elements cannot be added (except after float). When two block-level elements are edited continuously, they will automatically wrap and display on the page. Block-level elements can generally nest block-level elements or inline elements;

Block-level elements generally appear as containers to organize structures, but this is not always the case. Some block-level elements, such as

, can only contain block-level elements. Other block-level elements can contain line-level elements such as

. Others can contain both block-level and line-level elements.

p is the most commonly used block-level element, and the display:block element style is all block-level elements. They are always expressed in the form of a block, and are arranged vertically in sequence with the sibling blocks of the same level, filling up the left and right sides.

2. Inline element: inline element

is also called

inline Element

, inline elements, etc.; inline elements are generally based on basic elements at the semantic level and can only accommodate text or other inline elements. The common inline element "a" is common. For example, SPAN elements, IFRAME elements and element style display: inline are all inline elements. For example, elements such as text are arranged horizontally between letters and automatically wrap to the right end.

3. Characteristics of block elements

① Always on a new line Start;


②, height, line height, margins and padding can all be controlled;


③, the width defaults to 100% of its container, Unless you set a width.


④. It can accommodate inline elements and other block elements

4. Characteristics of inline elements

①, and other elements are on the same line;


②, height, line height, outer margins and inner margins cannot be changed;


③. The width is the width of its text or picture and cannot be changed.

④. Inline elements can only accommodate text or other inline elements

For inline elements, please note the following

Setting the width width is invalid.
Setting the height height is invalid and can be set through line-height.
#Setting margin Only left and right margins are valid, upper and lower margins are invalid.
# Setting padding is only valid for left and right padding, but not for top and bottom. Note that the scope of the element is increased, but the content around the element is not affected.

5. Common block elements

address – address

• blockquote – Block quote

• center – Center alignment block

• dir – Directory listing

• p – Commonly used block level, also the main tag of CSS layout

• dl – Definition list

• fieldset – form control group

• form – interactive form

• h1 – title

• h2 – Subtitle

• h3 – Level 3 heading

• h4 – Level 4 heading

• ##h5 – Level 5 heading

• h6 – Level 6 heading

• hr – Horizontal separator line

• isindex – input prompt

• menu – menu list

• noframes – frames optional content, (this block is displayed for browsers that do not support frames Content

• noscript – optional script content (displayed for browsers that do not support script)

• ol – ordered form

• p – paragraph

• pre – formatted text

• table – table

• ul – Unordered list

6. Common inline elements

• a – anchor

• abbr – abbreviation

• acronym – first letter

• b – bold (not recommended)

• bdo – bidi override

• big – big font

• br – line break

• cite – quote

• code – computer code (when citing source code Required)

• dfn – Define fields

• em – Emphasis

• font – Font setting (Not recommended)

• i – italic

• #img – image

• input – input box

• kbd – Define keyboard text

• label – Table label

• q – Short quote

• s – dash (not recommended)

• samp – definition sample computer code

• select – item selection

• small – small font text

• span – commonly used inline container, defining blocks within text

• strike – strikethrough

• strong – bold emphasis

• sub – subscript

• sup – superscript

• textarea – multi-line text input box

• tt – telex text

• u – Underline

7. What is the difference between inline elements and block-level elements?

Difference 1:

Block level: Block level elements will occupy one line by default. Automatically fill the width of its parent element

Inline:Inline elements will not occupy a row, and adjacent inline elements will be arranged on the same line. Its width changes with the content.

Difference 2:

Block level: Block level elements can set width and height

Inline: The width and height of inline elements cannot be set

Difference three:

Block level: Block-level elements can be set with margin and padding

Inline: Margin-left; margin-right; padding-left; padding- right;can take effect. But the vertical margin-bottom; margin-top; padding-top; padding-bottom; does not take effect.

Difference four:

Block level: display:block;

Inline ：display:inline;

You can switch between block-level elements and inline elements by modifying the display attribute



The above is the detailed content of Several properties of CSS display, float, clear, overflow, visibility. For more information, please follow other related articles on the PHP Chinese website!