1. Differences between block-level elements and intra-row Elements
- Even if the block-level element is set to the width, it still excludes one row,
- You can set the margin and padding attributes for block-level elements. The margin and padding attributes of the element in the row only have horizontal margins and no vertical margins.
- Although the vertical padding increases the area of the element in the row, it does not have a distance from the adjacent element.
2. display: inline-block and hasLayout
- To be compatible with IE6 and IE7 (display: inline: block is not supported), we can only use the inline, block, and none display types.
- Display: inline-block combines block-level elements with intra-row elements.
- To enable IE6 and IE7 to implement the display: inline-block effect, you can define the display: inline-block in the element (such as span) in the row to trigger hasLayout. You can use vertical-align: -The effect of 10px is the same as that of other browsers.
- It can only implement display: inline-block for line elements, and also use hack, * vertical-align for IE.
3. relative, absolute, and float
- Position: absolute and float will implicitly change the display type, no matter what type of elements (except display: none), as long as postion: absolute, float; left and float are set: any element in right will be displayed with the display: inline-block. This means that the display: inline can be used to remove the bilateral distance generated by float in IE6.
- Position: relative does not implicitly change the display type.
4. horizontal center
- Text_align: center can be used to horizontally center text, images, and other row elements.
- You can use margin: 0 auto to horizontally center block-level elements that determine the width;
- Horizontal center of block-level elements with uncertain width (1 ). add the lecture content to the table label, which is the table label margin: 0 auto; (2) convert block-level elements into intra-row elements using display: inline, which is implemented through text-align: center; (3) set float for the parent element, set position: reletive and left: 50% for the parent element, and set the child element to position: reletive and left:-50%.
5. Vertical center
- The vertical center of text, images, and block-level elements with uncertain parent elements is achieved by setting the upper and lower margins for the parent container.
- A single line of text with the parent element height determined is vertically centered by setting line-hignt to the parent element to be equal to the height of the parent element hight.
- Multi-row text, images, and block-level elements with highly uncertain parent elements are vertically centered (1) directly using tables (2) using display for IE8 and ff that support display: table-cell: table-cell and vertacil-align: the middle is centered. If not, use IE hack.
6. grid layout
- At the same level, the content that is important is first written in HTML.
- Used to layout the personal preference Selector
7. Z-index problems and select elements in flash and IE6
- In addition to the x and Y axes, there is also a z axis. The z axis is set to reletive or absolute in the element, and the START size is set to z-index. The larger the z-index, the closer the element is to the top.
- Z-index is only valid for non-window elements, whereas flash uses window mode by default. We need to set womde in flash to opaque or transpartent.
- The select element is displayed in a window by default in IE6.
8. Insert a png Image
- Png images in IE6 do not support transparency. You can use private filters in IE.
9. Use IETest to debug multiple IE versions.
From Weizhi note (Wiz)
