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

This article mainly introduces what CSS writing skills have, have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

CSS Writing skills-1.

! the role of important is to increase the priority of the application of specified style rules.

IE7 and all standard browsers can recognize! important

Distinguish IE6 from IE7 from other browsers

.browserTest {borderbank 20pxsolidural 60A179important; border:20pxsolid#00F;}

When browsing in Mozilla or IE7, you can understand the priority of! important, so the color of # 60A179 is displayed:

When browsing in IE6, I can't understand the priority of important, so the color of # 00F is displayed:

CSS Writing skills-2Rom *

IE can recognize *; standard browsers (such as Firefox) can not *

Distinguish IE6 from Firefox

.browserTest {border:20pxsolid#60A179; * border:20pxsolid#00F;}

Distinguish IE7 from Firefox

.browserTest {border:20pxsolid#60A179; * border:20pxsolid#00F;}

Distinguish IE7,IE6 from Firefox

.browserTest {border:20pxsolid#60A179; * bordervirtual 20pxsolidride 00Fountain important; * border:20pxsolid###;}

CSS Writing skills-3Rank

IE6 supports underlining, while IE7 and firefox do not support underlining

Distinguish IE7,IE6 from Firefox

.browserTest {border:20pxsolid#60A179; * border:20pxsolid#00F; _ border:20pxsolid###;} / * regardless of the method, the writing order is firefox in the front, IE7 in the middle, and IE6 in the * * face * /

CSS Writing skills-4:*+html and * html

* + html and * html are IE-specific tags, which are not supported by firefox. And * + html is the unique tag of IE7.

.browserTest {width:120px;} / * FireFoxfixed*/ * html.browserTest {width:80px;} / * ie6fixed*/ * + html.browserTest {width:60px;} / * ie7fixed*/

Note:

* + html must ensure that the HACK of IE7 has the following declaration at the top of HTML:

/ * /

/ * /

Here are some common CSS compatibility tips

1) setting padding to div under Firefox will lead to the increase of width and height, but IE will not. (available! important solution)

2) Center vertically, set line-height to the same height as the current div, and then pass vertical-align: middle; (note that the content does not wrap)

3) horizontal center, margin:0 auto; (certainly not * *)

4) if you want to style the content in a tag, you need to set display: block; (common in navigation tags)

5) double distance generated by floating IE

Under IE, when a div sets float, and then sets margin for him, double margin will appear. The solution is to set div.

Display:inline . The corresponding css is # float {under float:left; margin:5px;/*IE, it is understood as 10pxhammer 5px*/, and then as 5px*/ under IE.

The characteristic of Block element is that it always starts on the new line, and the height, width, line height and margin can be controlled (block element). The characteristic of Inline element is that it is on the same line as other elements. Uncontrollable (embedded element)

6) the difference in the interpretation of box model between IE and FF.

# browserTest {widthbank 650pximportantposition widthplace648pxpositionpaddinglyleftbank 2pxvicebackgroundmistf;}

The width displayed by browserTest is 650px

The total width of IE Box is the sum of width+padding+border+margin widths.

The total width of FF Box is the width of width, and the width of padding+border+margin is contained in width.

If there is BOX {WIDTH: "300,300"; PADDING: "5PX";}

Then the width of BOX in IE should be: 310

And the width of the FF is 300.

So when BOX is populated, it should be used like this.

BOX {WIDTH: "300"! IMPORTANT; WIDTH: "290";}

7) ul tags have list-style and padding by default under FF. * declare in advance to avoid unnecessary trouble; (common in navigation tags and content lists)

8) do not fix the height of the div as an external wrapper, * add overflow: hidden; to achieve a high degree of adaptability

9) minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE doesn't recognize this, and it actually uses width as the minimum width. To make this command work on IE, you can put one under the tag and specify a class for div:

Then CSS designed it like this:

# container {min-width:600px;width:_expression (document.body.clientWidth

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.