CSS Detail Review notes-Basic visual formatting

CSS contains such an open, so powerful model, for such a model, there are countless ways to combine the application of various properties, you can get a lot of effects.

Basic box

CSS assumes that each element produces one or more rectangular boxes, which are called element boxes. The center of each element has a content area that is surrounded by an optional inner and outer margin and border (which is considered optional because it can be set to 0).

There is a difference in formatting different types of elements. The processing of block-level elements is different from the inline elements, and the floating and positioned elements have their own different manifestations.

Include Block

Each element is equivalent to the containing block placement; So to speak, the containing block is the "layout context" of an element, and css2.1 defines a series of rules to determine the containing block of the element.

Common nouns:

normal Flow, The text is displayed from left to right and from top to bottom. The only way to make an element out of the normal flow is to make it a floating or anchored element.

non-replacement element , if the content of an element is contained in a document, it is called a non-replacement element.

Replace element , refers to an element that is used as a placeholder for other content. A classic example of a replacement element is the IMG element. It simply points to an image file that will be inserted into the document stream where the IMG element itself is located.

block-level elements , this refers to elements such as paragraphs, headings, or Div. This element generates a "newline" in the normal flow before and after its box, so block-level elements that are in normal flow are placed vertically. By declaring Display:block, you can have elements generate block-level boxes.

in-line elements, this refers to elements such as strong or span. This element does not generate "row separators" before or after, which are descendants of block-level elements. By declaring Display:inline, you can have elements generate vyige inline boxes.

root element , The element at the top of the document flow, in the HTML document, which is the element HTML.

Block-level elements-horizontal formatting

Width does not mean that the visible element box is wide, and if the inner script, border, and width are declared for an element, the width they specify is the distance from the left outer boundary to the right outer boundary. You can set Box-sizing:content-box to simulate IE6 's quirks, even if the width of the element is the width of the actual setting, not the Width+padding+border.

Use Auto

 <  div  class  = "Container1"  ><  p  >  A Paragraph</ p  ></ div  >   

. Container1 {width: 400px; border: 1px solid #000;} . Container1 P {margin-left:auto; margin-right: 100px; width: 100px;}

Suppose Padding-left (padding-right), Margin-left (MARGIN-RIGNT), Width,border-left-right (Border-right) Seven attributes and must be equal to the width of the outer container, That is 400px, set the left margin to auto, then the width of the left margin will be 200px. That is, auto is used to "fill" the required distance, so that the total width of the element is equal to the width of its containing block.

. Container1 P {background: #ccc; margin-right: auto;
margin-left: auto; width: 100px; }

The effect is as follows:

Therefore, if both Margin-left and Margin-right are set to Auto:

Setting the two margins to equal length is the correct way to center the element, unlike using Text-align (Text-align only applies inline content with block-level elements, so the element's text-align is set to center and cannot be centered).

If both width and marin-left are set to auto, then Margin-left will be set to 0:

. Container1 P {        background: #ccc; margin-right: 100px;         margin-left: auto; width: auto;    }

Set the negative margin,

. Container1 P {        background: #ccc; margin-right: 100px;         margin-left: -100px; width: auto;    }

The value of width is 400px-100px (+margin-left) +100px. Because the marin-left is negative, the actual width of the content should be added (negative margin-left value)

Block-level elements-vertical formatting

The default height of an element is determined by its content. The height is also affected by the width of the content, and the narrower the paragraph, the higher it will be in order to accommodate all of the inline content.

If the margin-top or margin-bottom of a block element in the normal flow is set to auto, it is automatically calculated as 0. Unfortunately, if the value is 0, you cannot easily center the normal flow element in its containing block. That is, if you set the top and bottom margins of an element to auto. In fact, they are reset to 0, leaving the element with no margin.

Merge vertical margins

Another important aspect of vertical formatting is the merging of vertically adjacent margins. This consolidation is applied only to margins. If elements have padding and borders, they are never merged.

For example, an unordered table whose list items are adjacent to each other.

Li {margin-top: 10px; margin-bottom: 15px;}

Each list item has an upper margin of 10px and a lower margin of 15px. However, when this list is displayed, the distance between adjacent list items is 15px instead of 25px:

This happens because the adjacent margins are merged along the erect axis. In other words, the smaller of the two margins will be merged by a larger one.

If there are multiple margins adjacent, the merge also appears, such as the last of the list. To supplement the previous example, let's assume that the rule is applied:

ul {margin-bottom:15px} Li {margn-top:10px; margin-bottom:20px;} H1 {margin-top:28px;}

The last list merges the margins to 28px.

If one of the margins is negative, the actual margin is the absolute value of the largest margin minus the negative margin.

Row layout for inline elements

For inline elements, this is not as simple and straightforward as a block-level element, and the block-level element knowledge generation box usually does not allow other content to coexist with these boxes.

When text is used text-align for both ends, the value of word-spacing may be overwritten (if letter-spacing is a length value, this value cannot be overwritten).

Basic Terminology and concepts

Anonymous text refers to all strings that are not contained in the inline element <p>i ' m<em>so</em>happy!</p>

Both I ' M and happy! in the sequence are anonymous text.

The em box, the EM box, is defined in the font and also becomes a character box. The actual glyph may be higher or shorter than its EM box.

content Area , in non-replacement elements, there may be two kinds of content areas. A content area can be a box that consists of an em box string of characters in an element, or a box that is described by a character glyph in an element.

The line spacing , is the font-size value and the Line-height value only difference, this difference actually divides into two halves, applies to the content area the top and the bottom respectively. The two parts added to the content area are called editions. The line padding applies only to non-replacement elements.

inline Box , which is described by adding line spacing to the content area. For non-replacement elements, the height of the inner box of the yuan operation is exactly equal to the value of line-height. For a replacement element, the height of the element's inline box is exactly equal to the height of the content area, because the line spacing is not applied to the replacement element.

A row box that contains the minimum box for the highest and lowest points of the inline box that appears in the row. In other words, the top edge of the row box is at the top boundary of the highest inline box, and the bottom edge of the row box is placed in the bottom boundary of the lowest inline box.

1) The content area is similar to the content box for a block-level element.

2) The background of the inline element is applied to the content area and all the inner margins.

3) The bounding rectangle of the element within the line encloses the content area and all padding and borders. The padding, borders, and margins of non-replacement elements have no vertical effect on the inline elements or their resulting boxes, which means that they do not affect the height of the element's inline box.

4) The margin and border of the replacement element does affect the height of the element's inline box, and it may also affect the height of the bounding rectangle that contains the element.

Inline non-replacement elements

Suppose there is a mark:

<Pstyle= "FONT-SIZE:12PX;LINE-HEIGHT:12PX;">This is text<em>Some of which emphasized</em>, plus other text<BR>Which ID<Strongstyle= "FONT-SIZE:24PX;">Strongly emphasized</Strong>And which is<BR>larger than the surrounding text.</P>

The effect is as follows:

Most text font-size are 12px, and only one inline non-replacement element has a text size of 24px. However, the line-height of all text is 12px, because Line-heght is an inherited property. Therefore the line-height of the strong element is also 12px.

Because the top of the inline box is inside the element content area, the content of the element falls outside the line box and actually overlaps with the other row boxes. As a result, the lines of text look very irregular.

<Pstyle= "FONT-SIZE:12PX;LINE-HEIGHT:14PX;">This is text<em>Some of which emphasized</em>, plus other text<BR>Which ID<Strongstyle= "font-size:24px;verical-align:4px">Strongly emphasized</Strong>And which is<BR>larger than the surrounding text.</P>

Increase the element by 4 pixels, and retrace the contents and inline boxes. Since the top of the inline box of the strong element is already the highest point in the row, this modification to the vertical will also move the top of the entire line box up by 4 pixels. Effect

Vertical alignment affects the height of the row box.

If the line-height does not use a unit, but instead uses a value less than 1, then Line-height will set the row height relative to the font-size of the element, rather than the parent element.

CSS Detail Review notes-Basic visual formatting