CSS DIV concepts and details (copy)_html/css_WEB-ITnose

http://www.cnblogs.com/xiaofu/articles/1614386.html

1. Box model

1. Internal structure of the box

(1) The actual width of a box is composed of "content, inner margin, border, and outer margin". In CSS, the box size is controlled by setting width and height.

2. Border

(1) When multiple rules act on a border, conflicts will occur. The later settings override the previous settings. This is the same for any attribute.

3. Padding

(1) When a box sets a background image, by default the range covered by the background is the range composed of "padding content", and the image is tiled with the upper left corner of the padding as the reference point.

4. Margin

(1) The body is a special point, its background color will extend to the margin part, while the background color of other boxes only covers the "padding content" (IE browser) or "padding content border" (FF Browser).

2. Floating and positioning of boxes

1. Relationship between boxes

(1) Standard flow

That is, do not use other and arrangement There are special CSS rules related to positioning, rules for various elements.

(2) Block-level elements

They are always expressed in the form of a block, and are arranged vertically with their brothers at the same level, with full left and right.

(3) Inline elements

themselves do not occupy an independent area, but only point out a certain range based on other elements.

2. Positioning of the box in the standard flow

(1) The distance between inline elements: the sum of the margin-right of the first element and the margin-left of the second element .

(2) The distance between block-level elements: It is the largest of margin-top or margin-bottom.

3. Floating and positioning

(1) The scope of a block-level element is determined by the standard stream content inside it and has nothing to do with the floating content inside, that is, the child After an element is floated, it no longer belongs to the parent block and the standard stream. Note: Among two block-level elements, when the first block-level element is floated, the content of the subsequent block-level elements will surround it, but if the second block-level element is floated, the first element will not change at all. , that is, it will not surround the second floating block-level element! ! The situation is similar for multiple blocks.

(2) Relative positioning conclusion

A box that uses relative positioning will be relative to its original position, specified by the offset distance to reach a new location.

                                                                                                                                                                                                                                          fill.

(3) Conclusion of absolute positioning

A box using absolute positioning will be "already positioned" based on its "nearest" one The "ancestor element" is used as the basis for offset. If there is no ancestor element that has been positioned, it will be positioned based on the browser window.

& lt;!-[if supportfields]-& gt; absolutely positioned boxes away from the standard flow, which means that their positioning of subsequent brothers has no effect. But its sibling box will fill its original location as if it didn't exist.

4. When the height value of the block is less than the height of the sub-block plus the margin value, IE will automatically expand to maintain the margin-bottom space of the child element and the padding-bottom of the parent element itself. FF will not, it will ensure that the height of the parent element is completely consistent, and at this time the child element will exceed the range of the parent element.

5. The z-index attribute is used to adjust the upper and lower positions of overlapping blocks during positioning. Pages with a large z-index are located above the smaller ones. The default value is 0. When the z-index values ​​of two blocks are the same, the original high and low coverage relationship will be maintained.

6. The display attribute changes whether an element is a block or inline element, or does not display the element (none);

3. Text and images

1. Text size (font-size)

(1) Length unit

The length represented by 1em is the standard width of the letter m in its parent element, and 1ex represents the standard height of the letter x in the parent element . When the parent element changes, the size of the child elements using these two units will change proportionally.

2. Line-height (line-height)

(1) Indicates the distance between the baselines between two lines of text, that is, the height of each line of text. If an underline is added, the underline is the baseline.

(2) The value of the line height can either use pixels as the line height unit, or you can not add any unit and just write numbers. In this case, the line height represents the ratio of the line height to the font size. For example, the font size is 12px,

                      Line-height: 1.5.

The actual size is line-height:1.5*12px=18px;

3. Letter case conversion: text-transform

4. Text decoration effect: text-decoration , its values ​​include underline, overline, line-height, blink, etc.

5. Text alignment and first paragraph indent

(1) Paragraph horizontal alignment: text-align

(2) First paragraph indent text-indent: for Chinese For web pages, set it to "2em".

6. Vertical alignment of paragraphs: vertical-align

(1) In the current browser, you can only use the vertical alignment setting of objects in table cells, and for general Block-level elements, such as divs, don't work.

7. Image style.

(1) background-position: The attribute determines the position of the background image. If two values ​​are set, they are used to determine the horizontal position and vertical position respectively. If only one value is set, the default value is center.

And it is related to tiling and actually specifies the starting point of tiling. In addition to using top, left, bottom, right, center, relative values ​​and absolute values ​​are also used as its attribute values, such as 5%, 18px, etc.

The numerical values ​​represent the distance from the left and the distance from the top edge.

(2) background-attachment: fixed can fix the background image. When the scroll bar is pulled, only the text moves, but the image does not move.

(3) Horizontal alignment of the image (horizontal alignment): The text-align attribute of the image cannot be set directly, but is implemented by the attribute of its parent pixel, but the vertical alignment can be achieved through the vertical alignment of the image. -align attribute is set. This is exactly the opposite of text alignment.

4. Links and navigation

1. Pseudo-classes

(1) Declaration order of pseudo-classes

a:link,a:visited{text -decoration:none;}

a:hover{text-decoration:underline;}

The order of the above declarations cannot be changed. If it is changed, it will have no effect.

(2) a:link and a are set the same. There is usually no difference between the two. However, in actual work, a, a:visited｛｝;

2. Button hyperlinks

(1) The settings for ordinary hyperlinks and clicked links are the same, and the style of the border is used to simulate the button effect, and when the mouse pointer passes through the hyperlink, the text changes accordingly ? color, background color, position and border, thereby simulating the "press down" effect.

3.FF browser does not support the height (width) and width (height) attributes of the a element! !

4. Bullets

(1) list-style-type: attribute sets the ull or ol mark symbol style.

(2) list-style-image: Attribute setting bullets are displayed as images, but due to differences between browsers, this attribute is generally not used. Instead, set the list-style-type attribute value to none, and then set Background implementation of li tag.

5. Simple menu navigation

(1) Although the link is set as a block-level element, the mouse passing effect can only be triggered when the mouse passes over the text (IE6), not when the mouse enters Rectangular area can be triggered. IE7 has modified this error. The solution is:

Add a CSS rule in "#navigation li a":

height:1em;

5. CSS DIV layout

1. Fixed width layout

(1) body{text-align:center;}

;text-align:left;}

(2) body{margin:0px;}

-330px;}

2. Left, middle and right layout

(1) The left and right blocks are absolutely positioned and the width of the block is fixed, while the width of the middle block is not set and the width is automatically adjusted, but the width must be adjusted Its padding-left and padding-right are set to the left and right block widths respectively.

(2) Block background color problem: Since the background color of the left and right blocks does not extend to the bottom of the page

Solution: When there is a footer, change the entire content block (left and center) , the three blocks on the right) into a block (it doesn’t matter whether you put it here or not, it’s mainly for easier management), then set the body background color to the same color as the right block, and then make a picture with the same width as left. ?For a block with the same color as the left background color, make the background image of #container, then set it and repeat downwards.

6. Experience

1. In the item list, when the

tag is set to float: left attribute, and then specify the width for

, then when < The ;li> tag will automatically wrap when it exceeds the width of the parent tag.

2. Floating: If there are two blocks, and the first one is set to float, regardless of the direction, then the content of the second block will surround the first block; but if the two blocks are set to float, It has no effect on the first block, that is, the content of the first block will not wrap around the second block. Remain in the original position.

3. In order to reduce the difference, generally try to set the values ​​of margin and padding in the layout blocks, such as

,
• ,
  ,

  , etc., or as needed Set to the corresponding value, or set to 0;

  4. Often use pictures to replace the title text in the block. First hide the title text, and then set the replacement picture as the background image of the block. If you want a vertical picture, you usually set it like this; if you want a horizontal picture,

  can generally hide the text containing the title, and then set the width and height of the corresponding parent element, as well as the outer and inner margins, and then Sets the background image of the parent element to the replacement image.

  Example:

  This is a test

  H3 {width:170px;height:60px;margin:0px;padding:0px;}

  H3{bacground:url(1.jpg) no-repeat;}

  Statement：

  The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn