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

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

The difference between Block elements and inline elements in CSS

CSS block element (blockelement)

CSS block elements are generally container elements for other elements, and block elements generally start with new lines. It can accommodate CSS inline elements and other CSS block elements, and the common block element is the paragraph tag'P'. The "form" block element is extraordinary and can only be used to accommodate other block elements.

Without the effect of CSS, the CSS block elements will be arranged one line at a time. 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 a 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.

CSS inline element (inlineelement)

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

It should be noted that: the Chinese name for inlineelement, there are a variety of inline elements, embedded elements, inline elements, straight 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; that fixes the famous IE double floating boundary problem.

CSS block elements (blockelement) and CSS inline elements (inlineelement) are both 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.

The variable element is based on the above two changes with the environment, its basic concept is that it needs to determine whether the element is a CSS block element or an CSS 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's the difference between block elements 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.