CSS document streaming, block level elements (block), inline elements (inline). I have read many books and read many articles. I have seen a lot of fragmented basic knowledge of CSS layout, which is relatively superficial. I have read O' Reilly's <CSS Authoritative Guide> found that the concept of document flow mentioned in it made me very sensitive. What's abominable is that the book does not explain what document flow is. Perhaps the author thinks this is too simple to be worth mentioning. I think this concept is really important. After understanding it, a bunch of theories of CSS layout become easy to understand, and I understand the rationality of the CSS design. So based on my guesses and experiments, I came up with something like this. Statement. If there is any error, it is purely normal. Document flow divides the form from top to bottom into rows, and discharges elements in each row in order from left to right, which is the document flow. There are a few more questions I don't understand 1. As an inline element, one of the three basic elements, what is the main difference between it and block-level elements? What does inline elements mean? What is a block level element. The Chinese text of the "CSS Authoritative Guide" shows that any visible element that is not a block-level element is an inline element. The characteristic of its expression is the form of "row layout". The meaning of "row layout" here is that its expression is always displayed in rows. For example, when we set an inline element border-bottom:1px solid #000;, it is repeated in each line, and there will be a thin black line below each line. If it is a block-level element, the displayed black lines will only appear below the block. Let me give you a simple practical example: For example <div>I love CSS - 52CSS.com</div> Inline elements are generally based on semantic basic elements. Inline elements can only accommodate text or other inline elements, and the common inline element "a". Block element inline element Variable Element Variable Element is a block element or an inline element based on the context.
Each non-floating block-level element occupies one row, and the floating element floats at one end of the row according to regulations. If the current line cannot accommodate it, a new line will be launched and then float.
Inline elements also do not occupy a single row. Almost all elements (including block-level, inline and list elements) can generate sub-rows, which are used to place sub-elements.
There are three situations that will cause the element to exist out of the document stream, namely floating, absolute positioning, and fixed positioning. However, floating elements also exist in the document stream in IE (and make me think this is reasonable><).
The floating element does not occupy any normal document flow space, and the positioning of the floating element is based on the normal document flow, and then extracts from the document flow and moves to the left or right as far as possible. The text content will surround the floating element. When an element is extracted from the normal document stream, other elements still in the document stream will ignore the element and fill its original space.
The root cause of floating concepts is the browser's interpretation of the theory. I can only say that many people use IE as the standard, but it is not.
Based on document flow, we can easily understand the following positioning patterns:
Relative positioning, that is, offset relative to the position of the element in the document stream. However, the original placeholder is retained.
Absolute positioning means completely detached from the document stream, and is offset and fixed positioning relative to the nearest parent element of the position attribute non-static value, that is, completely detached from the document stream, and is offset relative to the viewport.
2. How to understand when the Clear attribute takes the right value? It seems that the experimental situation always does not match the theory.
Elements such as p, h1, or div are often called block-level elements, and these elements are displayed as a piece of content; elements such as Strong, span are called in-line elements, and their content is displayed in the line, that is, "in-line box". (You can use display=block to convert elements in the row into block elements. Display=none means that the generated element has no box at all, and neither displays elements, nor takes up space in the document)
A: The line is an element within a line, and can only be placed in the line; a block-level element is a square, which can be placed anywhere on the page.
B: To put it bluntly, the element in the line is like a word; the block-level element is like a paragraph. If it is not defined separately, it will appear on a single line.
C: General block-level elements such as paragraph <p>, title <h1><h2>…, list, <ul><ol><li>, table <table>, form <form>, DIV<div> and BODY Elements such as <body>. Inline elements are like: form elements <input>, hyperlinks<a>, image <img>, <span>.....
D: The distinctive feature of block-level invisibility is that each block-level element is displayed from a new line, and the subsequent invisibility also needs to be displayed from another line.
E: <span> belongs to an inline element in the CSS definition, while <div> is a block-level element.
For those who have studied CSS, you can understand it at first. But it is not easy for novices to understand, so I mainly explain it to novices more familiar!
Using the word container will make it easier to understand their existence and purpose vividly. The elements in the line are equivalent to a small container, while <div> is equivalent to a large container. Of course, a large container can be placed in a small container. <span> is a small container. If you say this, you may have a preliminary impression in your mind. If we want to fill some clean water in a large container. But what should I do if I want to put some ink in it? It's very simple. Let's take out the small container and put it in ink and put it in the clean water in the large container.
I want to use CSS to define the style of letter c, so we can use <span>.
<div>I love CSS - <span>52CSS.com</span> W3C standard</div>
Block element is generally a container of other elements. Block element usually starts with a new line. It can accommodate inline elements and other block elements. The common block element is the paragraph label 'P'. The block element "form" is more special. , it can only be used to hold other block elements.
Without the effect of css, the block elements will be arranged in order in a row every time. With CSS, we can change the default layout mode of this html and place the block elements in the position you want. Instead of starting another line stupidly every time. It should be pointed out that the table tag is also a type of block element. Table based layout and css based layout are viewed from the perspective of ordinary users (excluding visually impaired people, blind people, etc.), except for the page loading speed. There is no other difference besides the difference. However, if an ordinary user accidentally clicks the view page source code button, the difference between the two will be very large. The source code of the CSS layout page designed based on the concept of good reconstruction can at least allow ordinary users without web development to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
You can imagine the block container element div as boxes, or if you have played with clip-on articles, it will be easier to understand. We first cut out the articles we need from various newspapers and magazines. Each piece cut is a block. Then we re-stick these pieces of paper onto a blank new piece of paper according to our own layout intentions. This will form your own unique digest news. As an extension of technology, web layout design follows the same pattern. .
Block elements and inline elements are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start with new lines. However, when css control is added, the attribute difference between block elements and inline elements will not become a difference. For example, we can add an inline element cite to the display:block attribute, so that it can also have attributes that start from a new line every time.
The basic concept of a variable element is that it needs to determine whether the element is a block element or an inline element based on the contextual relationship. Variable elements still belong to the above two element categories. Once the contextual relationship determines its category, it must follow the rules and restrictions of block elements or inline elements. See the full text for general element classification.
Regarding the Chinese name of inline element, there are many inline elements, embedded elements, inline elements, and direct-input elements. There is basically no unified translation, just call it whatever you like. In addition, when it comes to inline elements, we will think that there is a display attribute that is display:inline; this attribute can fix the famous IE double floating boundary problem.
* address - address * blockquote - block reference * center - aligning blocks in the lifting * dir - directory list * div - commonly used block level is easy and is also the main tag of css layout * dl - definition list * fieldset - form control group * form - interaction Form* h1 - Large Title* h2 - Subtitle* h3 - Level 3 Title* h4 - Level 4 Title* h5 - Level 5 Title* h6 - Level 6 Title* hr - Horizontal Divider* isindex - input prompt
* menu - Menu list * noframes - frames optional content, (display this block content for browsers that do not support frame * noscript - optional script content (display this content for browsers that do not support script)
* ol - sort form * p - paragraph * pre - format text * table - table * ul - non-sorted list
* a - Anchor point * abbr - Abbreviation * acronym - First word * b - Bold (not recommended)
* bdo - bidi override
* big - large font * br - line break * cite - quote * code - computer code (needed when quoting source code)
* dfn - Define fields * em - Emphasize * font - Font settings (not recommended)
* i - italic * img - picture * input - input box * kbd - define keyboard text * label - table label * q - short reference * s - medium mark (not recommended)
* samp - Define example computer code * select - Project selection * small - Small font text * span - Commonly used inline containers, define blocks within text * strike - Medium-score * strong - Bold emphasis * sub - Subscript * sup - Superscript * textarea - Multi-line text input box * tt - Teletext * u - Underscore * var - Define variables
* applet - java applet
* button - button * del - delete text * iframe - inline frame
* ins - Inserted text* map - Picture block (map)
* object - object object* script - client script