Css details review notes-basic visual formatting and css details review notes

Css details review notes-basic visual formatting and css details review notes

Css contains a model that is so open and powerful. For such a model, there are countless ways to combine various attributes of the application.

 

Basic box

Css assumes that each element generates one or more rectangular boxes, which are called element boxes. Each element center has a content area, which contains an optional internal and external margin and border (it is considered optional because it can be set to 0 ).

There are differences when formatting different types of elements. The processing of block-level elements is different from that of intra-row elements, while floating elements and positioning elements have different performances.

Contained block

Each element is equivalent to containing block placement. In this case, the contained block is the "layout context" of an element. css2.1 defines a series of rules to determine the contained block of an element.

 

Common Terms:

Normal stream,The text is displayed from left to right and from top to bottom. The only way to make an element out of a normal stream is to make it a floating or locating element.

Non-replacement elementIf the content of an element is included in the document, it is called a non-replacement element.

Replacement elementIs an element used as a placeholder for other content. An example of replacing an element is the img element. It only points to an image file, which is inserted to the position of the img element in the Document Stream.

Block-level elementsThis is an element such as a paragraph, title, or div. This element will generate a line feed before and after the box in the normal stream, so the block-level elements in the normal stream will be placed vertically. By declaring the display: block, you can let the element generate a block-level box.

Line element,This is an element such as strong or span. This element does not generate "line delimiters" before or after it is a descendant of block-level elements. By declaring display: inline, you can have the element generate the vyige row inner box.

Root elementThe element at the top of the Document Stream. In the html document, this is the element html.

 

Block-level elements-horizontal formatting

Width does not mean the width of the visible element box. If an element declares the inner scriptwriter, border, and width, the width they specify is the distance from the left outer border to the right outer border. You can set box-sizing: content-box to simulate the weird phenomenon of ie6, even if the element width is actually set width, rather than 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) the sum of the seven attributes must be equal to the width of the external container, that is, PX. If the left margin is set to auto, the left margin is PX. That is to say, auto is used to "fill" the required distance so that the total width of the element is equal to the width of its contained block.

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

The effect is as follows:

Therefore, if you set both margin-left and margin-right to auto:

Setting the two margins to an equal length is a correct way to center an element. This is different from using text-align (text-align only applies inline content to block-level elements, therefore, setting text-align of an element to center cannot center the element ).

If both width and marin-left are set to auto, margin-left is 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 width value is 400px-100px (+ margin-left) + 100px. Because the value of marin-left is negative, the actual width of content must 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 content width. The narrower the paragraph, the higher it will be, so as to accommodate all the inline content.

If the margin-top or margin-bottom of a block element in a normal stream is set to auto, it is automatically calculated as 0. unfortunately, if the value is 0, you cannot easily center the normal stream element in its contained block. That is to say, if the top and bottom margins of an element are set to auto. In fact, they are all reset to 0, so that the elements do not have any margin.

 

Merge vertical margins

Another important aspect of vertical formatting is the combination of vertical adjacent outer margins. This merging applies only to the outer margin. If the elements have padding and border, they will never be merged.

For example, a list is unordered and its items are adjacent to each other.

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

Each list item has a 10px top margin and a 15px bottom margin. However, when the list is displayed, the distance between adjacent list items is 15 PX instead of 25px:

This is because the adjacent outer margins are merged along the erected axis. In other words, the smaller of the two margins will be merged by a relatively large one.

If there are multiple margins adjacent to each other, merging will also appear, such as the end of the list. Add the preceding example and apply the following rules:

ul{margin-bottom:15px}li{margn-top:10px;margin-bottom:20px;}h1{margin-top:28px;}

The outer margin of the final list merge is 28px.

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

 

Row layout of element in the row

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

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

Basic terms and concepts

Anonymous textIs a string <p> I'm <em> so </em> happy! </P>

In the sequence, I'm and happy! All are anonymous texts.

Em boxThe em box is defined in the font and also becomes a character box. The actual font may be higher or shorter than the em box.

Content AreaIn a non-replacement element, there may be two content areas. The content area can be a box consisting of em box strings of characters in an element, or a box described by a letter in the element.

Line spacingIs the font-size value and line-height value only difference, this difference is actually divided into two halves, respectively applied to the top and bottom of the content area. The two parts added for the content area are called both versions. The intra-row spacing is only applicable to non-replacement elements.

Line boxThis box is described by adding row spacing to the content area. For non-replacement elements, the height of the box in yuanshu is equal to the value of line-height. For the replacement element, the height of the box in the element line is exactly equal to the height of the content area, because the line spacing should not use the replacement element.

Line box, Which contains the maximum and minimum boxes of the rows in the row. In other words, the upper boundary of a row box must be located at the upper boundary of the upper box of the highest row, and the bottom edge of the row box must be placed at the lower boundary of the lower box of the lowest row.

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

2) the background of the row element is applied to the content area and all the padding.

3) the border of the line element should enclose the content area and all the padding and border. The padding, border, and margin of a non-replaceable element do not have a vertical effect on the row element or the box it is generated; that is, they do not affect the height of the line box of the element.

4) replacing the outer margin and border of an element does affect the height of the inside frame of the element line. Correspondingly, it may also affect the border height of the element.

 

Non-replacement element in the row

Assume there is a flag:

<p style="font-size:12px;line-height:12px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

The effect is as follows:

The font-size of most text is 12 PX, and the size of the text in the non-replacement element of only one row is 24px. However, the line-height of all texts is 12px, because line-heght is an inherited attribute. Therefore, the line-height of the strong element is also 12px.

Because the top of the line box is inside the element content area, the content of the element falls outside the line box, which actually overlaps with other line boxes. The result is that the text lines look irregular.

<p style="font-size:12px;line-height:14px;">    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="font-size:24px;verical-align:4px">strongly emphasized</strong>and which is<br>larger than the surrounding text.</p>

Increase the number of elements by 4 pixels, fold back, and increase the content area and line box. Since the top of the row's inner box of the strong element is already the highest point in the row, this modification to the vertical will also shift the top of the entire row box up 4 pixels. Effect

Vertical alignment affects the row-frame height.

If line-height does not use units, but uses a value smaller than 1, line-height sets the row height relative to the font-size parameter of the element, rather than the parent element.