CSS box model: Everything is box-start with the line box

A row of boxes to see the picture speak

CSS Line Box sections detailed

Represents a row box in a box model. The Line-height property sets the distance (row height) between rows. This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance , not the maximum distance, between the baselines in the element.

The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) is divided into two halves, which are added to the top and bottom of a text line content. The smallest box that can contain the content is the row box. Source

Two box model continue to look at the picture

Represents the box in the CSS, each box (that is, all the elements are boxes, it is important to remember this, the following also discusses that the inline non-replacement elements will ignore some of the values you set and use the values calculated by the browser) have height (height), width, padding ( padding), border (border), margin (margin), and other properties.

The classification of elements in three CSS

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). However, different elements are displayed differently, such as <div> and <span>, and <strong> and <p> are not the same. Different types are prescribed for different elements in a document type definition (DTD), which is one of the reasons why a DTD is important to a document. Source

1. Replacement and non-replaceable elements

   In terms of the characteristics of the elements themselves, they can be divided into substitution and non-replacement elements.

   The
   • replace element

     Replace element is the browser based on the element's label and attributes, to determine the element's specific display content.

     For example, the browser will read the picture information and display it based on the value of the SRC attribute of the tag, and if the (X) HTML code is viewed, the actual contents of the picture are not visible; The Type property of the label determines whether to display an input box, a radio button, and so on. The

     (X) HTML , <input>, <textarea>, <select>, <object> are all replacement elements. These elements tend to have no actual content, which is an empty element, for example:

     page	<input type= "Submit" name= "Submit" Value= "Submit"/>

     The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display. Most elements of the

   • non-replacement element

     (X) HTML are non-replaceable elements whose content is directly represented to the client (for example, a browser). For example:

     1	<span> non-replacement element </span>

     Paragraph <p> is a Replaceable elements, the contents of the text "paragraph" are all displayed.

3. displaying element block-level elements and inline elements

   In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

   • Block-level elements

     The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.

     Typical block-level elements are:<div>, <p>,

     The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.

     However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

   • In-line elements
     Inline elements do not form new chunks of content, that is, they can have other elements around them, such as <a>, <span>, <strong>, and so on, are typical inline-level elements.

     Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.

     However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

Four Back to Line box

At ordinary times the block elements used more, but also more familiar with the elements in the line is really a place to contain text data, but also focus on the need to modify the place.

Again, all the inline elements (span,img,input) have all the attributes specified in the box model (width margin border padding), but some properties that are customized by CSS are not effective for some elements. This means that the browser ignores certain properties that you set.

• When you set the width, height, margin-top, Margin-bottom, Padding-top, non-replaced elements to the inline non-replacement element (inline, CSS properties such as Padding-bottom will be ignored by the browser
• Block-level element default width is the entire width of the parent element
• The default width of a floating element is the smallest width that can contain its contents

You can change the display property value by modifying the block element and inline element.

from:http://grow.sinaapp.com/?p=683

CSS box model: Everything is box-start with the line box