Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the characteristics of css elements and how to use them". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "what are the characteristics of css elements and how to use them" can help you solve the problem.

Css inline elements (inlineelement)

Css inline elements are also called inline elements. Inline elements are generally based on semantic level (semantic) basic elements and can only accommodate text or other inline elements, commonly seen as "a". For example, the SPAN element, the IFRAME element and the element-style display:inline are all inline elements. For example, elements such as text are arranged horizontally between letters and automatically wrap at the rightmost end.

Characteristics of css inline elements:

1. You can be on one line with other elements, and you don't have to start another line.

2. The height, width and top and bottom margins of the element cannot be set.

3. The width of the element is the width of the text and pictures it contains, which cannot be changed.

After introducing css inline elements, let's take a look at what css inline elements are.

What are the elements in the css line?

Common css inline elements:

A: anchor point

Abbr: acronym

Acronym: initials

B: bold (not recommended)

Bdo:bidioverride

Big: big font

Br: line break

Cite: referenc

Code: computer code (required when referencing source code)

Dfn: defining field

Em: emphasize

Font: font setting (not recommended)

I: italic

Img: picture

Input: input box kbd: define keyboard text

Label: table label

Q: short reference

S: middle line (not recommended)

Samp: define sample computer code

Select: project selection

Small: small font text

Span: commonly used inline containers to define blocks within text

Strike: dash

Strong: bold emphasis

Sub: subscript

Sup: superscript

Textarea: multiline text input box

Tt: telex text

U: underline

Next, let's take a look at the differences between css block-level elements and css inline elements.

Differences between css block-level elements and css inline elements

One of the differences between css block-level elements and inline elements:

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

Inline elements: inline elements do not occupy a single line, and adjacent inline elements are arranged on the same line. Its width varies with the content.

The difference

.div1 {background-color:#090;}

.span1 {background-color:yellow;}

Block level element 1

Block level element 2

Row-level element 1

Row-level element 2

The effect is as follows:

2345 Screenshot 20180904155622.png

The second difference between css block-level elements and inline elements:

Block-level elements: block-level elements can set width and height.

Inline elements: inline elements cannot set width and height.

Example:

The difference

P {background-color:#098;height:50px;width:50%;}

Div {background-color:green;height:50px;width:40%;}

Span {background-color:yellow;height:70px;}

Strong {background-color:pink;height:70px;}

Block level element one

Block level element two

In-line element one

In-line element two

This is the end of the content about "what are the characteristics and how to use the elements in the css line". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.