Learning Style Sheet CSS Reference-Commonly Used CSS Knowledge_Experience Exchange

1. Comparison between Block and inline elements

All HTML elements belong to either block or inline.
The characteristics of the block element are:
Always start on a new line;
Height, line height, and top and bottom margins can all be controlled;
The default width is 100% of its container , unless a width is set.

,

,

,

,

and
• are examples of block elements.
  
  On the contrary, the characteristics of the inline element are:
  and other elements are on the same line;
  height, line height and top and bottom margins cannot be changed;
  the width is its text Or the width of the image, which cannot be changed.
  , , , , , and are examples of inline elements.
  
  Use the display: inline or display: block command to change this feature of an element. When do you need to change this attribute?
  Let an inline element start on a new line;
  Keep the block element and other elements on the same line;
  Control the width of the inline element (especially useful for navigation bars);
  Control the height of the inline element;
  You can set the background color of a block element to be the same width as the text without setting the width.
  
  2. Another box hacking method
  
  The reason why there are so many box hacking methods is because IE’s understanding of box before 6 was different from others. , its width should include the edge width and white space. To make IE5 consistent with other browsers, you can use CSS:
  
  padding: 2em;
  border: 1em solid green;
  width: 20em;
  width/** /:/**/ 14em;
  
  The first width is recognized by all browsers, but IE5.x does not recognize the width setting of the second line, just because there is a blank comment symbol on that line (how stupid syntax analysis!), so IE5.
  
  3. Minimum width of the page
  
  min-width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so that Make sure the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. To make this command work on IE, place a
  under the tag, and then assign a class to the div:
  
  
  

  
  
  Then the CSS is designed like this:
  
  #container
  {
  min-width: 600px;
  width:expression(document.body.clientWidth }
  
  The first min-width is normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make you The HTML document is not very formal. It actually implements the minimum width through Javascript judgment.
  
  The same method can also be used to achieve the maximum width for IE:
  
  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth 1200? ”1200px“ : ”auto”;
  }
  
  4. IE and width and height issues
  
  IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min.This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.
  
  For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
  
  .box
  {
  width: 80px;
  height: 35px;
  }
  
  html>body .box {
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
  }
  
  All browsers The first box setting can be used, but IE does not recognize the second paragraph setting because it uses a sub-selector command. The second setting is more specific, so it will override the first setting.
  
  5. Font transformation command
  
  The text-transform command is very useful. It has 3 values: text-transform: uppercase, text-transform: lowercase and text -transform: capitalize. The first will change the text to all uppercase, the second to all lowercase, and the third to capitalize the first letter. This is very useful for Pinyin text. Even if there are capitalization errors when typing, they will not be visible on the web page.
  
  6. The problem of picture text disappearing in IE
  
  Sometimes you encounter the problem of text or background image suddenly disappearing, and it reappears after refreshing. It is more likely to happen when floating elements (note: never seen it). At this point, you can set: position: relative for the disappearing elements. If that doesn't work, consider specifying a width for these elements.
  
  7. Invisible text
  
  For whatever reason, you want some web text not to be displayed in the browser, such as for printing or for small screens. If some text is not displayed, you can use display: none. This is very simple, but sometimes it's a bit useless for some people, and they can remove this control, and then use: position: absolute; left: -9000px .
  
  This actually specifies the text to be displayed outside the page.
  
  8. Design special CSS for handheld devices
  
  That is, users with small screens such as mobile phones/PDAs can design a special CSS to make the web page display more comfortable. . To do this, you can adjust the browser window to 150 points wide to see the effect. The syntax for specifying handheld-specific CSS is:
  
  
  
  Special handheld device availability can also be read.
  
  9. Buttons with 3D effects
  
  In the past, if you wanted to create buttons with 3D effects that would change as you clicked, you had to use image replacement. , now the CSS will do:
  
  a
  {
  display: block;
  border: 1px solid;
  border-color: #aaa #000 #000 #aaa; width: 8em;
  background: #fc0;
  }
  
  a:hover
  {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #000 #aaa #aaa #000;
  }
  
  As for the effect, you can also adjust it yourself.
  
  10. Use the same navigation code on different pages
  
  Many web pages have navigation menus. When entering a certain page, this item will appear on the menu. It should turn gray and the other pages should light up.Generally, to achieve this effect, you need to write a program or design specifically for each page. Now you can achieve this effect with CSS.
  
  First, use CSS classes in the navigation code:
  
  

  
  
  • Home
    
  • About us
  
  
  • Contact us
  
  

  
  
  Then specify an id for the Body of each page, which has the same name as the above class. Such as .
  
  Then design the CSS as follows:
  
  #home .home, #about .about, #about .about
  {
  commands for highlighted navigation go here
  }
  
  Here, when the id is set to home, .home will take effect, that is, the navigation bar with the class set to home will display special effects. The same goes for other pages.