Css small problem solutions and css Solutions

Css small problem solutions and css Solutions

1. Vertical center of the image:

Set div: height = 20px; line-height = 20px. Set the image vertical-align: middle.

2. The block element in the row has a 3px bug, which can be solved by setting it as a block element. Typical element: img input

In-row elements: the content is wide and high, and the width and height change with the content. The width and height cannot be controlled and are used to control the font and color. Line-height can be set.

Block-level elements: by default, full rows are supported and can be set.

Block-level elements can contain intra-row and block-level elements. The row element cannot contain block-level elements.

3. Integration of margin-bottom and margin-top without merging:

<1. Horizontal margin is not merged.

<2. When two adjacent (not necessarily sibling nodes) block elements are rendered up and down, margin merge occurs when the page streams are normal.

<3. Floating elements are not merged with any elements (including child nodes.

<4. overflow! = The visible element does not merge with any element in margin.

<5. The absolute positioning element does not merge with any element in margin.

<6. The element of inline-block does not merge with any element in margin.

<7. elements that set the clear attribute do not merge with any elements in margin.

<8. The root element does not merge with any element in margin.

<9. The parent node and the first child node are merged with margin-top.

<10. If the last sub-node does not have border or padding, It is merged with its parent node by margin-bottom.

Note IE! In particular, hasLayout also has an impact on the margin merge, resulting in the location difference of the contained absolute positioning element.

How to solve the minimum height problem in CSS web page layout

Add a height to ie6, so that the height of ie6 is determined. If it is smaller than this height, the height will be recognized. If it is beyond this height, it will automatically stretch.

Min-height: 200px; _ height: 200px;

Height: auto is added to the Internet! Important; and overflow: visible; are used to avoid problems when the height is exceeded. I haven't met it yet. You can refer to the appropriate one.
Min-height: 200px;/* set the minimum height to 100px */
Height: auto! Important;/* compatible with FF and IE7! Important label */
Height: 200px;/* compatible with ie6 */
Overflow: visible;

I hope to answer a small question about CSS webpage layout.

Right. When your body is in the div, <div style = "text-decoration: none"> body content </div>

Just add the style = "text-decoration: underline" attribute to the text container.