Reprint: http://hi.baidu.com/dingo826/blog/item/f69884f44f5394def3d38578.html The default width of the Block object is 100% (inherited from the parent element), if no "float:left/right;" is used. Style, the adjacent two block objects are divided into two different rows.
The width of an inline object depends on the width of its inner element and the sum of the padding style values, and cannot be directly specified with its width and height ("Display:block;", "Float:left/right;" Can be defined after a forced conversion, two adjacent inline objects are placed on the same line. What is an inline object and what is a block object?
All visual document objects are block objects (blocks element) or inline objects (inline element). For example, a div is a block object, and span is an inline object.
The feature of a block object is that it starts from a new line and can contain other block objects and inline objects. Start with a new line: for example, a DIV is a front and back break;
When an inline object is presented, it does not start from the new row and can contain other inline objects and data. Inline can understand this: do not start from the new line, directly from the content, and then go backward ... means that it can be inline with another object ....
==========================
Related Information reference: CSS display parameters
The default value of the Block:css1 block object. Force an object to be presented as a block object, adding a new row after the object
None:css1 hidden objects. Unlike the hidden value of the visibility property, it does not retain its physical space for hidden Objects (page physical size space)
Inline:css1 the default value of the inline object. Force an object to be presented as an inline object, removing rows from the object
The effect of changing this property value (that is, display) on the layout of content around it may be:
Adds a new row after the object with the property value set to block.
Deletes a row from an object with the property value set to inline.
Hides an object whose property value is set to none and frees its physical space in the document (page physical size space).
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////// Let's first understand that all HTML elements are either blocks (block elements), or inline (inline elements). Here's a look at the features of block and inline:
Features of the block element: Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set.
Features of the inline element:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.Let's take a detailed look at their situation.
Block element is generally the container element of other elements, the block element generally starts from the new row, it can accommodate inline elements and other block elements, the common block element is the paragraph label ' P '. The block element of "form" is special, and it can only be used to accommodate other block elements.
If there is no CSS, the block elements are ordered to go down in a row each time. With CSS, we can change the default layout of this HTML and put the block elements where you want them. Instead of every stupid other line. It should be noted that table tags are also one of the block elements, table based layout and CSS based layout from the perspective of the general user (not including visually impaired, blind, etc.) of the two layouts, in addition to the page loading speed differences, there is no other difference. But if ordinary users inadvertently point to the page Source code button, the difference between the two is very large. Based on the concept of good reconstruction of CSS layout page source code, at the very least, can let no web development experience of ordinary users to quickly read the content. From this point of view, CSS layout code should have a better aesthetic experience.
You can think of the block element div as a box, or if you've played a clip, it's easier to understand. We first cut down the articles we need from various newspapers and magazines. Each cut is a block. Then we put the pieces of paper on a blank new piece of paper according to our own layout intent. This will create your own unique digest letters. As an extension of technology, Web page layout design also follows the same pattern.
Inline elements (inline element) are generally based on semantic level (semantic) basic elements. Inline elements can only hold text or other inline elements, common inline element "a".
It should be stated that the Chinese term of the inline element has multiple inline elements, inline elements, in-line elements, and straight-forward elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we think that the property of a display is display:inline, which fixes the famous IE double floating boundary problem.
Both the block element and the inline element are concepts in the HTML specification. The basic difference between a block element and an inline element is that the block element generally starts from the new row. When CSS control is added, this attribute difference between the block element and the inline element does not become a difference. For example, we can completely add an inline element cite to a property such as Display:block, so that he also has properties that start from the new line each time.
The variable element is based on the above two changes with the environment, and its basic concept is that he needs to determine whether the element is a block element or an inline element based on the context relationship. Mutable elements are also part of the above two categories of elements, and once the context determines his category, he follows the rules of block elements or inline elements.
Block and inline classification details for HTML tags:
Block element Address-Addresses
BLOCKQUOTE-Block Reference
Center-lifting Alignment block
DIR-List of directories
Div-Common block-level easy, is also the main tag of CSS layout
DL-Definition List
Fieldset-form control Group
Form-Interactive Form
H1-Big title
H2-Subtitle
H3-3 level headings
H4-4 level headings
H5-5 level headings
H6-6 level headings
HR-Horizontal Divider Line
Isindex-input prompt
menu-List of menus
Noframes-frames Optional content (this chunk content is displayed for browsers that do not support frame
NoScript-Optional script content (this content is displayed for browsers that do not support script)
OL-Sort the form
P-Paragraph
Pre-formatted text
Table-Tables
UL-Non-sorted list
Inline elements (inline element)]
A-anchor point abbr-abbreviation
Acronym-the first word
B-Bold (not recommended)
Bdo-bidi Override
Big-Large font
BR-line break
Cite-citation
Code-Computer codes (required when referencing source)
DFN-Defining fields
EM-emphasize
Font-typeface settings (not recommended)
I-Italic
IMG-Images
Input-Enter box
KBD-Define keyboard text
Label-Table Label
Q-Short Reference
S-Medium dash (not recommended)
Samp-Define sample computer code
Select-Project Selection
Small-Small font text
Span-a common inline container that defines chunks within a text
Strike-Medium Dash
Strong-Bold Emphasis
Sub-subscript
SUP-Superscript
TEXTAREA-Multi-line text input box
TT-Telex text
U-Underline
var-Defining variablesVariable element A mutable element is a block element or an inline element that determines whether the element is in context.
Applet-java Applet
Button-Buttons
Del-delete text
Iframe-inline Frame
INS-Inserted text
Map-image block (map)
Object-object Object
Script-client-side scripting |
