Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what are the differences between block and inline elements in CSS". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "what are the differences between block and inline elements in CSS" can help you solve the problem.

The difference between block and inline elements in CSS

First of all, we need to understand that all html elements are either block (block elements) or inline (inline elements). Let's take a look at the characteristics of block and inline:

Characteristics of the block element:

Always start on a new line.

Height, row height and top and bottom margins can be controlled.

The width defaults to 100% of its container unless a width is set.

Characteristics of the inline element:

And other elements are on one line.

Height, row height and top and bottom margins are unchangeable

Width is the width of its text or picture, which cannot be changed.

Let's learn more about them.

◆ block elements (blockelement) are generally container elements for other elements. Block elements usually start with new lines and can accommodate inline elements and other block elements. The common block element is the paragraph tag'P ". The" form "block element is special and can only be used to accommodate other block elements.

Without the role of css, the block elements will be arranged one line at a time all the way down. With css, we can change the default layout mode of this html and put the block elements in the location you want. Instead of foolishly starting another line every time. It should be pointed out that the table tag is also a kind of block element, tablebasedlayout and cssbasedlayout from the general user's point of view (excluding the visually impaired, blind, etc.), there is no other difference between the two layouts except for the difference in page loading speed. But if the average user inadvertently clicks the view page source code button, the difference between the two is very big. The css layout page source code designed based on a good concept of refactoring can at least allow ordinary users who have no experience in web development to read the content quickly. From this point of view, csslayoutcode should have a better aesthetic experience.

You can think of the block container element div as box, or if you've played with clippings, it's easier to understand. Let's first cut out the articles we need from all kinds of newspapers and magazines. Each piece of cut content is a block. Then we re-paste these pieces of paper onto a new blank piece of paper with glue according to our own typesetting intention. In this way, you have formed your own unique abstract KuaiBao. As an extension of technology, web layout design also follows the same pattern.

◆ inline elements (inlineelement) are generally based on the semantic level (semantic) of the basic elements. Inline elements can only hold text or other inline elements, which are common inline elements "a".

What needs to be explained is:

The Chinese name for inlineelement has a variety of inline elements, embedded elements, inline elements, and straight-forward elements. Basically, there is no unified translation, so call it what you like. In addition, when it comes to inline elements, we will think of a display attribute that is display:inline;, which can fix the famous IE double floating boundary problem.

Both ◆ block elements (blockelement) and inline elements (inlineelement) are concepts in the html specification. The basic difference between block elements and inline elements is that block elements generally start with a new line. When css control is added, this attribute difference between block elements and inline elements does not become a difference. For example, we can add an attribute such as display:block to the inline element cite so that it also has an attribute that starts with a new line every time.

A variable element is based on the above two changes with the environment, and its basic concept is that it needs to determine whether the element is a block element or an inline element according to the context. The variable element still belongs to the above two element categories, and once the context determines its category, it has to follow the rules of block elements or inline elements.

This is the end of the content about "what are the differences between block and inline elements in CSS". Thank you for 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.