"Ten Days to Learn Web Standards (div css)" study notes_html/css_WEB-ITnose

The first day of XHTML CSS basics http://www.aa25.cn/div_css/902.shtml

1. The width of the entire box model in the page is determined by the left border It consists of left border, left padding, right padding, right border and right border, and the width defined by width in the css style is only the width of the content part.

The next day a column layout http://www.aa25.cn/div_css/903.shtml

1. The css manual says: block level The vertically adjacent margins of elements merge, while inline elements don't actually occupy top or bottom margins. The left and right margins of inline elements are not merged. Likewise, the margins of floated elements are not merged. It is allowed to specify negative margin values, but be careful when using them (the concepts of block-level elements and inline elements are discussed in the next section).

So if the upper and lower divs both specify margin:5px, the two divs will be 5px apart instead of 10px, because the vertically adjacent margins of block-level elements will be merged.

2. The width and height cannot be set for inline (display:inline;) elements because inline belongs to line layout and its characteristic is to be laid out in one line, so the width and height cannot be set. Solution reference: http://www.jb51.net/article/21829.htm

Third day two-column and three-column layout http://www.aa25.cn/div_css/904. shtml

1. In CSS, any element can be floated. The floating element will generate a block-level box, regardless of what kind of element it is; and a width must be specified, otherwise it will be as narrow as possible; in addition, when the space available for floating is less than the floating element, it will run to the next line , until you have 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 a floating element is adjacent to a non-floating element, this A 3-pixel bug will appear. That is, there will be a 3-pixel gap between the two.

2.2 Solution: Add _margin-right:-3px on #side; remember to add an underscore in front so that this style will take effect specifically for IE6. It will still display normally under IE7 and FF.

2.3 Suggestion: When the two columns have a fixed width, it is best to fix #main to a fixed width and float it to the right, so as to avoid the 3-pixel bug of IE6.

Day 4 vertical navigation menu and secondary pop-up menu

1.position:relative; If an element is relatively positioned, it will appear first. in its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when positioned relatively, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)

2.position:absolute; means absolute positioning, and the position will be based on Starting from the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled by z-index. The higher the z-index, the further up it appears.)

3. After the parent container uses relative positioning and the child element uses absolute positioning, the position of the child 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 need to be used with top, right, bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time