CSS learning notes (adding)

2010-5-21

1. Line-Height: The Row Height. It is the height between a text row and a line. The baseline distance between two lines of text. So what is a baseline? That is, if the text is underlined, the underline position is the baseline of the text.

However, many textbooks translate this attribute into line spacing. In my understanding, the line spacing of Chinese characters should be (line-height)-(font-size), which is actually reflected in the spacing between rows on the page.

I personally feel that it is best to work with CSS. The translation of this attribute cannot accurately express the meaning of CSS standards, but we still need to use diagrams to deconstruct them in our minds.

Example:

P. One {font-size: 10pt; line-Height: 8pt}/* the row spacing is smaller than the font size. The effect is that some text will overlap */

P. Third {Line-Height: 1.5em/* row spacing, relative value */}

 

Code

<P class = "third"> the style long Kuan JIU Duan sent an order to allow all parties to leave the yellow bean powder with cracks in the college entrance examination. Just go home and try another express delivery method, which is very broad. The dog idsafudfghdf is more powerful than the relief sand. the local army will waste the non-Sohu accumulation of express delivery style and get it back from the flood protection in Heilongjiang. style long Kuan JIU Duan sent all parties to leave the cracks of the College Entrance Examination of the yellow bean powder just go home courier way to change a place very broad little nonsense dog idsafudfghdf, not to mention relief sand more powerful third-party local army will be more express style Non-Sohu it is a waste of resources from the flood protection in Heilongjiang province. </P>

2. Understand the positive and negative values of margin and padding through the X-Y coordinate axis. What does positive mean? What does negative mean?

For example, IMG {foat: Left; margin-Right: 50px; margin-bottom: 25px}

<p> A text section, a text section, a text section </P>

Therefore, the picture is left and the text is right, so far there is a distance between 50 and 25. What if margin-Right:-50px? So some text will be stacked on the image? How can we understand the position of these values?

I think it is better to use the coordinates of the X axis and Y axis to deconstruct these types. By default, the slice is closely related to the text (if there is no default value). When the margin-right is set to the correct value, 50px is set on the right side of the image, indicating that the slice is empty, other elements do not need to be occupied. If it is a negative value, it means that I will deduct 50px from the right to the left. You can use this 50px, negative distance, that is, you have me and I have you.

3. Float understanding. See http://www.w3school.com.cn/css/pr_class_float.asp

The float attribute defines the direction in which the element floats. In the past, this attribute was always applied to the image, so that the text is centered around the image. However, in CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.

If the floating non-replacement element is used, a specific width should be specified; otherwise, they will be as narrow as possible. Note: if there is only a small amount of space on top of a row for floating elements, this element will jump to the next row, and this process will continue until a row has enough space. Default Value: None. So how should float: Left be understood? According to the above definition, it is a narrow block-level box floating on the left. But what is the difference between this and text-aligh: left? How can this floating word be reflected? Floating floating, why is it not floating on the text but occupying the position? For more information, see the post on float at http://developer.hi.baidu.com/#/detail/3602929. A little clear. In the past, float was used to describe how an element floats to one side and stops. Specifically, it floats to the left or right edge through the defined left or right. The positioning of floating elements is based on the normal document stream, and then extracts from the document stream and moves it as far as possible to the left or right side. After an element floats, it is automatically converted to a block-level element. You should set the width attribute for all floating elements (unless it is an element because it has an implicit width ). If the width is not set, the result is unpredictable.

4. When float exists, clear: Both is generated, which means that the elements around float do not follow it. Usually clear: Both. Then the element will not follow it.

<Div style = "float: Left; Height: 80px"> ABCD </div> <Div style = "clear: both"> efgh </div>

 

5. DL, DT, and DD usage.

DL -- Define

List -- define a list
DT -- Define list title -- is used to generate the title of each list item in the definition list. You can repeatedly use the title to define multiple list items. Dd -- Define list define -- used to generate the plain text fields of each list item in the definition list. Multiple plain text fields can be defined for repeated use. You can add ol ul Li and P to DT and DD.

Example:

<DL>

<DT> title </DT>

<DD> content 1 </DD>

<DD> content 2 </DD>

</Dl>

6. Isn't the upper-right, lower-left, and four values of margin and padding? If it is margin: 6px auto, padding: 7px 8px, what does it mean to set only two values? The front face value indicates upper and lower, and the back face value indicates left and right.

Another scenario is margin: 6px; padding: 6px. What does it mean to have only one value? It indicates that the value is used for the top, bottom, and left.

 

7. * {margin: 0; padding: 0 }. Wildcard, which can be used in Windows Search or search engine search. The value "all" is like "*. JPG "," *. ASP "means that all elements on the page calling this CSS use the attributes declared in the wildcard, rather than the default. To avoid browser differences. However, there is debate on the usage of this wildcard, mainly in terms of performance, see the http://hi.baidu.com/koen_li/blog/item/092306e692600c22b83820ea.html

8. Background-position ).

The background-position attribute is used to control the position of the background image in the element. The trick is to specify the position in the upper left corner of the image relative to the upper left corner of the element.

 

In the following example, a background image is set and its position is controlled using the background-position attribute. At the same time, the background-repeat is set to no-repeat. The unit of measurement is pixel. The first digit indicates the X axis (horizontal) position, and the second digit is the Y axis (vertical) position.

/* Example 1: Default Value */

Background-position: 0 0;/* upper left corner of the element */

/* Example 2: Move the image to the right */

Background-position: 75px 0;

/* Example 3: Move the image to the left */

Background-position:-75px 0;

/* Example 4: Move the image down */

Background-position: 0 100px;

The background-position attribute can be specified by other values, keywords, and percentages, which is useful, especially when the element size is not set in pixels.

There is no need to explain the keywords. X axis:

* Left

* Center

* Right

Y axis:

* Top

* Center

* Bottom

The order is almost the same as the order when pixel values are used. The first is the X axis, and the second is the Y axis, as shown in the following figure:

Background-position: Top right;

This is also true when percentages are used. When the percentage is used, the browser sets the position of the image based on the percentage value of the element.

 

Background: color, image, position, attachment, repeat

For example, the following statement

Background-color: transparent;

Background-image: url(image.jpg );

Background-position: 50% 0;

Background-Attachment: Scroll;

Background-repeat: Repeat-y;

A single row can be merged:

Background: transparent url(image.jpg) 50% 0 scroll repeat-y;

You do not need to specify each value. If the value is omitted, the default attribute value is used. For example, the above line has the same effect as the following one:

Background: url(image.jpg) 50% 0 repeat-y;