How to use CSS display mode

This time I will show you how to use the CSS display mode and what are the precautions for using the CSS display mode. The following is a practical case, let's take a look.

1. Tag supplement div and s pan

1. What is div?

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

2.What is span?

Function: Generally used to modify some local information in the webpage with css

3.What is the difference between div and span?

3.1.div will occupy a line alone, but span will not occupy a line alone

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

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

All other tags can be nested in container-level tags
Only text/pictures/hyperlinks can be nested in text-level tags

Container-level tags

div h ul ol dl li dt dd ...

Text-level tags

span p buis strong em ins del ...

Note:

Which tags are text-level and which are container-level, we There is no need to remember it deliberately. In enterprise development, generally nesting is done in divs, or nested according to group tags

2. Display mode of elements

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

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

Block-level elements will occupy one line.
Inline elements will not occupy one line.

Container-level tags

div h ul ol dl li dt dd ...

Text-level tags

span p buis stong em ins del ...

Block-level elements

p div h ul ol dl li dt dd

Inline elements (all text elements except p are inline elements)

span buis strong em ins del

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

2.1 Block-level elements
Exclusively on one line
If the width is not set, it will default to the parent element Same width
If the width and height are set, then they will be displayed according to the settings

2.2 Inline elements
will not occupy one line
If the width is not set, then the default width will be the same as the content
The width and height cannot be set for inline elements

2.3 Inline block-level elements
In order to allow the element to not occupy a single line, but also to set the width and height , then inline block-level elements (such as img tags) appear

Three CSS element display mode conversion

1. How to convert the display mode of CSS elements?

Set the display attribute of the element

2.display value

block block level
inline inline
inline-block inline block level

3. Shortcut keys

di display: inline;
db display: block;
dib display: inline-block;

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to load HTMLString in iOS webView

##A few small exercises about regular expressions

The above is the detailed content of How to use CSS display mode. For more information, please follow other related articles on the PHP Chinese website!