CSS document flow and block-level elements (block), inline elements (inline), before read many books and seen many articles, to see the number of piecemeal CSS layout basics, comparing the surface. Read the "CSS The Definitive Guide" O'Reilly found the document which referred to the concept of flow so I am very sensitive. Appalling is that the book does not explain the document flow is something, perhaps the author felt this was simple enough that it is not worth mentioning. But I think the concept is too important. Understand it, a bunch of theory CSS layout becomes easy to understand, and appreciate the rationality where CSS this design.
Document flow
The form is divided into a top-down line by line, and each line from left to right by the emission elements, namely the document flow.
Each non-floating block-level elements on a separate line, one end of the float floating element row of a predetermined press. If the current line can not tolerate, then start a new line and then float.
Inline elements will not be a separate line. Almost all the elements (including the block-level, inline and list elements) can generate the sub-line for the display sub-elements.
There are three cases that the presence of the element from the document stream, are floating, absolute positioning, fixed positioning. However, in IE floating elements are also present in the flow of the document (also made me think this is very reasonable> <).
Floating elements are not account for any normal document flow space, the floating element is positioned based on the normal stream of the document, and then withdrawn and moved as far as possible from the document to the left or right side of the stream. Text will surround the float. When an element drawn from the normal flow of the document, still other elements in the document stream will ignore this element and fills his original space.
Floating confusing concept rooted in the browser to interpret the theory of cause. IE can only say that a lot of people to do the standard, in fact it is not.
Based on the document flow, we can easily understand the following positioning modes:
Relative positioning, i.e. offset relative to the elements in the document flow position. But retain the original footprint.
Absolute positioning, i.e., flow completely out of the document, relative to the parent element recent non-static position offset property values.
Fixed positioning, i.e. completely out of the stream of documents, offset with respect to the viewing zone.
a few questions
- As inline elements, one of three basic elements. Where it is the main difference with the block-level elements?
- How to understand when to take right values Clear property? Looks like experimental conditions the total does not match with the theory.
- Inline elements What does it mean? What is block-level elements?
"CSS The Definitive Guide" in the text display: visible element is not any block-level elements are inline elements. Characteristics of its performance is "Line Layout" form, "Line Layout" mean here to say its manifestations always be displayed in rows. For example, we set an inline element border-bottom: 1px solid # 000; when its performance is repeated for each row below each line will have a black thin line. If then the block elements are displayed below the black line will appear in the block.
Etc. p, h1, often referred to as a div element or block-level elements, these elements are displayed as a content; Strong. span called inline elements and other elements, their content in rows, i.e., "inline boxes." (Display = block can be converted into inline elements block elements, display = none represents no frame generated elements, and neither the element does not occupy space in the document)
- Inline is an element in a row, it can only be placed inline; block-level elements, is a four-box can be placed anywhere on the page.
- To put it plainly, inline elements like a word; a block-level elements like paragraphs, if no additional definition, it will appear on a separate line.
- The general block-level element such as a paragraph <p>, the title <h1> <h2> ..., list. <Ul> <ol> <li>, Table <table>, form <form>, DIV <div> and BODY <body> element and the like. And then, as inline elements: form element <input>, hyperlinks <a>, image <img>, <span> ........
- Block-level element without remarkable features are: each block elements are displayed from beginning a new line, and the subsequent non-prime is also subject to a new line is displayed.
- <Span> element belonging to a line in the CSS definition, and <div> are block-level elements.
For people who learned of a CSS can understand. Can be difficult to understand for the novice, I say the main point of it cooked through novice!
Understand their existence and use of the word container would be easier to image, inline elements quite a small container, and <div> is equivalent to a large container, a large container of course you can put a small container. <Span> is a small container, so you might say that there is a initial impression in the mind of it, if we think of some water in large containers are installed. But I also want to install some ink in the years how to do? Quite simply, we put out small containers loaded on ink and then placed in a large container of clean water does not become you.
Block elements (block element) generally is a container element other elements
Block elements generally starts a new row, it can accommodate inline elements and other block elements. Common block element is paragraph tag 'P "." Form "the special block element, it can only be used to accommodate other block elements.
If no action css, the block elements will be in a sequential manner each has a separate line down the row. And later with css, we can change the default layout mode this html of the block element where you want to put up. But not always stupid on a separate line. It is noted that, table label is one element block, table based layout and css based layout from a regular user (not including visual impairment, blind, etc.) point of view both layouts, in addition to the page load time for the differences, there is no other difference. But if ordinary users inadvertently point the View Page Source button, both demonstrated by the difference is very big. Css based layout page reconstructed source of good design concept, at least, allow ordinary users do not have web development experience to quickly understand the content. From this perspective, css layout code should be a better aesthetic experience it.
You can imagine the block container div elements into one box, or if you played the clip is contained, then it is easier to understand. We first need to cut down the total of articles from a variety of newspapers and magazines. Each block is cut down the content of a block. Then we put these pieces of paper in accordance with their intentions layout, re-use glue to paste a new blank sheet of paper. This form your own unique Abstracts Bulletin of. As an extension of a technology, page layout design followed the same pattern.
Inline elements (inline element) are generally based on a semantic level (Semantic) basic elements. Inline elements can only contain text or other inline elements, common inline elements "a".
Block elements (block element) and inline elements (inline element) are conceptual html specification. Difference block elements and substantially inline element is a block element generally starts a new row. When added after the css control block elements and attributes this difference inline elements not be a difference in the. For example, we can cite the inline element plus display: This property block, so he also has a new line every property began.
The basic concept of the variable element is determined according to his context the element is a block element or inline elements. The variable element or elements belonging to the two categories, once determined context his categories, he will follow the rules limit block elements or inline elements. See the full text of roughly elements classification.
About inline element of the Chinese term for a variety of inline elements, inline elements, inline elements, inline elements. Basically there is no uniform translation, love how to call how to call it. Also mentioned inline elements, we think there is a display of attributes are display: inline; this property can repair IE famous double floating border issues.
Block elements (block element)
- address - Address
- blockquote - block quote
- center - For blocks align
- dir - directory list
- div - Common block level easily, but also the main css layout tab
- dl - definition list
- fieldset - form the control group
- form - an interactive form
- h1 - Title
- h2 - subtitled
- h3 - Level 3 title
- h4 - Level 4 title
- h5 - 5 level heading
- h6 - 6 level heading
- hr - horizontal rule
- isindex - input prompt
- menu - menu list
- noframes - frames optional content (that do not support frame of the browser to display the contents of this block)
- noscript - Optional script content (display this content does not support script browsers)
- ol - sorted list
- p - paragraphs
- pre - formatted text
- table - table
- ul - Non-sort list
Inline elements (inline element)
- a - Anchor
- abbr - Abbreviations
- acronym - the first word
- b - bold (not recommended)
- bdo - bidi override
- big - large font
- br - Wrap
- cite - references
- code - computer code (required when referring source)
- dfn - defined fields
- em - stressed
- font - font set (not recommended)
- i - italic
- img - Pictures
- input - the input box
- kbd - defined text keyboard
- label - the label table
- q - Short reference
- s - underlined (not recommended)
- samp - defined examples of computer code
- select - project selection
- small - small font text
- span - used within an associated container, the text block is defined
- strike - underlined
- strong - highlighted in bold
- sub - index
- sup - superscript
- textarea - multiline text entry box
- tt - teletext
- u - Underline
- var - defined variables
The variable element
Determining the elements of the variable element is a block element or elements based inline Context.
- applet - java applet
- button - Button
- del - delete text
- iframe - inline frame
- ins - inserted text
- map - Picture block (map)
- object - object Object
- script - Client Script
