Study Notes on "ten days to learn web standards (div + CSS )"

Basic xhtml css knowledge on the first dayHttp://www.aa25.cn/div_css/902.shtml

1. the width of the entire box model in the page is composed of the Left Border + Left fill + content + right fill + Right Border + right border, the width defined in the CSS style is only the width of the content.

 

Layout of one column on the second dayHttp://www.aa25.cn/div_css/903.shtml

1. the CSS manual says:The vertical adjacent outer margins of block-level elements are merged.In the row, the elements in the row do not actually occupy the upper and lower margins. The left and right margins of the element in the row are not merged. Similarly, the margins of floating elements are not merged. Allow negative margin values, but be careful when using them (Concepts about block-level elements and intra-row elements are described in the next section ).

Therefore, if the upper and lower divs both specify the margin: 5px, the two divs are 5 PX apart rather than 10 PX, because the vertical adjacent outer margin of the block-level element is merged.

2. inline (display: inline;) elements cannot set width and height, because inline is a row layout, its feature is to layout in a row, so it cannot be set width and height, solution reference: http://www.jb51.net/article/21829.htm

Day 3, layout of two and three columnsHttp://www.aa25.cn/div_css/904.shtml

1. Any element in CSS can be floating. A floating element will generate a block-level box, regardless of its own elements. It must specify a width, otherwise it will be as narrow as possible; in addition, when the available floating space is smaller than the floating element, it will run to the next row until it has enough space to put it down.

 

2. ie 3 pixel bug

2.1 phenomenon: the 3 pixel bug is a famous bug in IE6. When floating elements are adjacent to non-floating elements, this 3 pixel bug will appear. That is, there will be a 3-pixel interval between the two.

2.2 solution: Add _ margin-Right:-3px to # side. Remember to add an underline to the front side. This style takes effect for IE6. IE7 and FF are displayed normally.

2.3 suggestion: when the two columns are fixed in width, it is best to set # Main to fixed in width and float to the right, so as to avoid IE6's 3 pixel bug.

 

Navigation menu and level 2 pop-up menu on the fourth day

1. Position: relative; if a relative element is located, it first appears at its location. Then, move the element "relative to" its original start point by setting the vertical or horizontal position. (Another point is that elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element will overwrite other boxes)

2. Position: absolute; indicates absolute positioning. The position is calculated based on the browser's upper left corner. Absolute positioning disconnects elements from the document stream, so it does not occupy space. The layout of elements in a normal Document Stream is the same as that when an absolutely positioned element does not exist. (Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page and control their hierarchical order through Z-index. The higher the value of Z-index, the more it is displayed on the upper layer .)

3. parent container uses relative positioning. After the child element uses absolute positioning, the position of the element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent container.

4. Relative positioning and absolute positioning must be used with top, right, bottom, and left positioning to locate specific locations. These four attributes take effect only after the element is positioned. Otherwise, they are invalid. In addition, these four attributes can only use two adjacent attributes at the same time. They cannot be used even if they are used or left or right.