How CSS display mode is used

This time to bring you the CSS display mode how to use, the use of CSS display mode of attention to what, the following is the actual case, together to see.

I. Label Supplement DIV and S Pan

1. What is a div?

Function: Generally used in conjunction with CSS to complete the basic layout of the page

2. What is span?

Function: Generally used in conjunction with CSS to modify some local information in the page

What is the difference between 3.div and span?

3.1.div will occupy a single row, and span will not occupy a single row

3.2.div is a container-level label, and span is a text-level label

4. What is the difference between a container-level label and a text-level label?

All other labels can be nested in a container-level label
Text-level tags can only be nested in text/Pictures/hyperlinks

Label at the container level

DIV h ul ol dl Li DT dd ...

Text-level labels

Span p Buis strong EM ins del ...

Note the point:

Which tags are text-level which tags are container-level, we do not deliberately to remember, in the enterprise development in general, nesting is nested in the Div, or according to the group tag nested

Two. Display mode of the element

HTML in HTML divides all tags into two categories, namely container-level and text-level
CSS in CSS also divides all tags into two categories, block-level elements and inline elements, respectively.

1. What is a block-level element and what is an inline element?

Block-level elements are exclusively one row
Inline elements do not monopolize a row

Label at the container level

DIV h ul ol dl Li DT dd ...

Text-level labels

span p Buis stong em ins del ...

Block-level elements

P DIV h ul ol dl Li DT DD

inline element (all text elements except p, are inline elements)

span Buis strong EM ins del

2. What are the differences between block-level elements and inline elements?

2.1 Block level elements
Exclusive row
If the width is not set, the default is as wide as the parent element
If you set the width height, then the settings are displayed as

2.2 In-line elements
Does not monopolize a row
If the width is not set, the default is as wide as the content
<a> inline elements are not available to set width and height </a>

2.3 Inline block-level elements
In order for an element to be able to have both a single row and a width and height, the inline block-level element (e.g., IMG tag) appears.

Three CSS element display mode transformation

1. How do I convert the display mode of CSS elements?

Set the display property of an element

2.display Fetch Value

Block-level blocks
Inline in line
Inline-block in-line block level

3. Shortcut keys

Di Display:inline;
DB Display:block;
Dib Display:inline-block;

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

IOS WebView How to load htmlstring

Some small exercises about regular expressions