Shulou(Shulou.com)06/03 Report--

Front-end designers need to know what are the problems, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. The difference between block-level elements and inline elements

Even if the width of the block-level element is set, it still has a single row

Block-level elements can set the margin and padding attributes. The margin and padding attributes of inline elements have only horizontal margins, not vertical margins.

Although the vertical padding increases the area of the elements in the row, it does not pull away from the adjacent elements.

2.display:inline-block and hasLayout

In order to be compatible with IE6 and IE7 (display:inline:block is not supported), the only display types we can really use are inline,block and none.

Display:inline-block combines the characteristics of block-level elements and inline elements.

In order to enable IE6 and IE7 to achieve the display:inline-block effect, you can define display:inline-block in inline elements (such as span) to trigger hasLayout, and you can use vertical-align:-10px to achieve the same effect as other browsers.

It can only implement display:inline-block; for inline elements and 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 element it was (except display:none), as long as any one of postion:absolute, float;left and float:right is set, the element will be displayed in display:inline-block, that is, the two-sided distance generated by using float under IE6 can be removed by display:inline.

Position:relative does not implicitly change the type of display.

4. Horizontal center

Text_align:center can be used for horizontal centering of inline elements such as text, pictures, and so on.

Horizontal centering of block-level elements that determine the width can be done using margin:0 auto

The horizontal level of block-level elements with uncertain width is centered (1). Put the content into the table tag, which is the table tag margin:0 auto; (2) change the block-level element to an inline element using display:inline, which is implemented through text-align:center; (3) set float to the parent element, and then set the position:reletive and left:50%, child elements to position:reletive and left:-50%.

5. Vertical center

Vertical centering of text, picture, and block-level elements with highly uncertain parent elements is achieved by setting the top and bottom margins for the parent container.

The vertical centering of a single line of text determined by the height of the parent element is achieved by setting the parent element line-hignt equal to the parent element hight height.

Multiple lines of text, pictures, and block-level elements with highly uncertain parent elements are centered vertically (1) use tables directly (2) use display:table-cell and vertacil-align:middle implementations to center IE8 and ff that support display:table-cell. Use IE hack if it is not supported

6. Grid layout

At the same level, which piece of content is important will be written first in HTML.

For layout of personal preference subselector

Problems related to 7.Z-index and select elements under flash and IE6

In addition to the XQuery y axis, there is also a Z axis. The z axis is activated when the element sets position to reletive or absolute. The size is set by z-index. The larger the z-index, the higher the position of the element.

Z-index is only valid for non-window elements, while flash defaults to window mode. We want to set womde in flash to opaque or transpartent.

The select element is also displayed as a window by default under IE6.

8. Insert a png picture

IE6 png images do not support transparency, which can be solved by using private filters under IE.

9. Use IETest for multi-IE version debugging.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.