Have to know 10 css div tricks

Shorthand rules for 1.CSS font When we write font styles, we may write like this. Font-size:1em; Line-height:1.5em; Font-weight:bold; Font-style:italic; Font-variant:small-caps; Font-family:verdana,serif In fact, this writing is completely superfluous, I can only use font to write on OK. Like what: Font:1em/1.5em Bold Italic Small-caps Verdana,serif 2. Write a few class attributes together. Typically, the attribute has only one value in the class, but it is not accidental that you can only assign a class name to it, and we can assign more than 2. Like what <p class= "text side" >...</p> However, it is important to note that the class is separated by a space instead of "," which needs to be noted. With this, the text and side classes are applied to the P element. default value for the border of 3.CSS Border is the value of the border, when I do project development, it is customary to: border:1px solid red; The first refers to the size of the box, the second refers to the style, and the third refers to the color. However, 3 of these are not all necessary and must be in the border style. The remaining 2 have a default value. For example, you write this: Border:solid If you write like this, the default value for the first size is: Medium (relative to 3px or 4px) and color refers to the color inside the text. 4.!important will be overlooked in IE Because of the incompatibility between browsers, when we write CSS, in order to ensure that the site can maintain compatibility between the various browsers, so we need to use!important this property. If you use this in CSS, it will have a higher priority than the property with the same name. This is for browsers other than IE. Like what Margin-top:3.5em!important; Margin-top:2em The above refers to, except IE browser is 3.5em, and IE is 2em. This is very useful. ALT attribute of 5.Image When we develop our website, we are often advised to use HTML tags to display text instead of images. This allows the site to be loaded faster and more accessible. For example, you have developed a website where you want to place a "buy item" at the top of each page of your site. Now that you are a seller, you would expect your items to be found by search engines, and you might do the following: Implementation, but it is important to note that the search engine does not pay attention to the IMG tag alt keyword because many sellers are now so, so useless. So, we can use CSS instead As follows: Then define the CSS: H1 {Background:url (widget-image.gif) no-repeat;  } H1 span {position:absolute; left:-2000px} This is OK, catering to the taste of the search engine. So, the search engine really can't afford to hurt. 6. Box model hack problem This is a difficult question, but there are fewer opportunities to speak the truth. Because it involves IE5 problem, now who dare to say still with IE5? Pull out to shoot. No matter what, we also know that there is no harm. IE5 and other browsers (IE 6+ and chrome, etc.) are not the same for the calculation of borders, how to say? We are now right to understand that the value of the width of the entire box box is: The sum of the Width+padding+boder 3 values of the contents. However, this is not the case in IE5, see, its content is only 170px. So there's a problem. such as code description: #sidebar {width:200px;  padding:10px;  border:5px solid black; The width is set to 200 pixels, but the sidebar actually requires 230 pixels of space, except IE5 for Windows. IE5 for Windows has a total of 200 pixels in the sidebar, and the inner patches and borders are counted inside. Figure 2 shows that when the width property is specified as 200 pixels, the border and inner patches occupy the content space, not the content space. For Windows IE5, you need to specify a width of 230 pixels (plus the width of the patches and borders on both sides) and then cover it back with 200 pixels to get the correct width for a standard-compliant browser. #sidebar {padding:10px;  border:5px solid black; width:230px;  /* for Ie5/win */voice-family: "\"}\ "";  Voice-family:inherit; width:200px; /* Actual value */} Note that IE5 for Windows first appears, followed by a few rules that let IE5 for Windows think that the declaration has ended, where we use the voice-family attribute, simply because the browser recognizes it and does not change the visual effect The actual width, overriding the initial width rule, and the second width rule is ignored by IE5 for Windows. The results should look exactly the same on IE5 for Windows and all other compatible CSS2 browsers. Without using this hack, IE5 for Windows users will see a thinner column width than the design. 7. Center effect of block-level elements Block-level elements? You're not going to understand that. Do not understand, I would like to wordy, refers to Div, H1, table such elements. The corresponding is the inline element, such as label and so on. The popular point is that one will take a line (of course without the support of other attributes) and the other will not. Ok. In general, the Div is centered, I will write the following: #content {width:700px;  margin:0 Auto; And then, we are happy to be in the normal browser to the effect, please note that I said normal 2 sub, that this also shows that there is an abnormal situation? What about the situation? and the 6th of the above, is also the problem of IE5, under the IE5, it does not understand this, you say it can solve the problem? Therefore, we have to follow the following to achieve: body {text-align:center;  } #content {text-align:left;  width:700px;  margin:0 Auto; } OK, the kind will be very good compatibility. 8. Vertical adjustment (vertical aligning) When we are using table, what if we need to center the contents of a column? Don't ask, we take it for granted, using the following line of words: Vertical-align:middle Many times, this can work, but there are always exceptions. For example, you now have a navigation menu with a height of 2em, and if you insert this command, sorry, it will not execute, and will put the text to the top. How does that work out? very simple. You just have to assign the height of the box model to the Line-height. As follows: Line-height:2em 9. Absolute positioning and relative positioning This should be in the CSS tutorial more difficult part of it, suddenly also really hard to understand, interested can find information to see. Give an example: <style> #container {position:relative} </style> <div id= "container" ><div id= "navigation" ... </div></div> then I set the style of the navigation inside. #navigation {position:absolute;  left:30px; TOP:5PX} This shows that the inside of the Navigationo relative to the outside for the CSS positioning. 10. No need to add quotation marks to the background image path Like what: Background:url ("Images/***.gif") #333; You should remove the CSS background attribute quotes Background:url (images/***.gif) #333; If you add quotation marks, it will cause some browser errors.

Have to know 10 css div tricks