Several properties of CSS display, float, clear, overflow, visibility-CSS Tutorial-php.cn

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

巴扎黑

Release： 2017-06-28 11:32:23

Original

1753 people have browsed it

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

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!