Learn style sheet CSS Reference-common CSS knowledge-Experience Exchange

CSS reference for learning style sheets-common CSS knowledge 1. Comparison of Block and inline Elements

All HTML elements belong to one of block and inline.
The block element has the following features:
Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.

,

,,

,

And
• Is an example of block elements.
  
  On the contrary, the inline element features:
  And other elements are on one line;
  High, the Row Height and top and bottom margins cannot be changed;
  The width of a text or image cannot be changed.
  ,,,,,AndIs an example of the inline element.
  
  The display: inline or display: block command can be used to change this feature of an element. When do I need to change this attribute?
  Start an inline element from a new line;
  Keep block elements and other elements on one row;
  Controls the width of inline elements (especially useful for navigation bars );
  Controls the height of the inline element;
  You can set a background color that is the same as the text width for a block element without setting the width.
  
  2. Another box hacker Method
  
  The reason why there are so many box hacking methods is that IE's understanding of box before 6 is different from that of others. Its width should contain the edge width and white space. To make IE5 consistent with other browsers, you can use the CSS method:
  
  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 line 2nd, because there is a blank comment on that line (what a stupid syntax analysis !), Therefore, IE5.x uses 20 to remove some white space, while other browsers use 14 because it is 2nd rows and will overwrite 1st rows.
  
  3. Minimum page width
  
  Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can

  Put inLabel, and then specify a class for p:
  
  
  

  }
  
  The first min-width is normal, but the width of line 2nd uses Javascript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment.
  
  In the same way, you can achieve the maximum width for IE:
  
  # Container
  {
  Min-width: 600px;
  Max-width: pixel PX;
  Width: expression (document. body. clientWidth <600? & Quot; 600px & quot;: document. body. clientWidth & gt; 1200? "Pixel PX": "auto ";
  }
  
  4. Questions about IE and width and height
  
  IE does not recognize the min-definition, but in fact it treats normal width and height as min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only min-width and min-height are used, the width and height under IE are not set at all.
  
  For example, to set a background image, the width is important. To solve this problem, you can:
  
  . Box
  {
  Width: 80px;
  Height: 35px;
  }
  
  Html> body. box
  {
  Width: auto;
  Height: auto;
  Min-width: 80px;
  Min-height: 35px;
  }
  
  All browsers can use the first box setting, but IE does not recognize the 2nd segment setting because the sub-Selector command is used. The 2nd settings are more special, so they will overwrite the 1st settings.
  
  5. Font deformation command
  
  The text-transform command is very useful. It has three values: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first half converts all texts into uppercase letters, the second half into lowercase letters, and the second half into uppercase letters. This is very useful for pinyin text. Even if the input is case-insensitive, it cannot be seen on the webpage.
  
  6. Image text disappears in IE
  
  Sometimes the text or background image disappears suddenly, and it appears again after refreshing, which is more likely to happen when it is near the floating element (Note: I have never seen it before ). In this case, you can set position: relative for the elements that disappear. If not, specify a width for these elements.
  
  7. Invisible text
  
  For whatever reason, you can use display: none to prevent text from being displayed in the browser. For example, you can use display: none to print or make some text not displayed for a small screen. This is very simple, but sometimes it is useless for some people. If they can remove this control, they need to use: position: absolute; left:-9000px.
  
  This actually specifies that the text is displayed outside the page.
  
  8. Design specialized CSS for handheld devices
  
  That is, small screen users such as mobile phones and PDAs can design a CSS to make the webpage display more comfortable. To this end, you can adjust the browser window to 150 to see the effect. The syntax for specifying CSS for a dedicated handheld device is:
  
  
  
  You can also read the availability of dedicated handheld devices.
  
  9. 3D effect buttons
  
  In the past, to create a button with a 3D effect that will change after you click it, you must use the image replacement method. Now CSS is ready:
  
  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 #000;
  }
  
  You can adjust the effect on your own.
  
  10. Use the same navigation code on different pages
  
  Many Web pages have navigation menus. when you enter a page, the corresponding menu items should be dimmed while other pages will be highlighted. To achieve this effect, you need to write a program or design each page specifically. Now you can achieve this effect by using CSS.
  
  First, use the CSS class in the navigation code:
  
  

  
  
  • Home
  
  
  • About us
  
  
  • Contact us
  
  
  
  
  Then, specify an id for the Body of each page, with the same name as the class above. For example.
  
  Then design 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 of the class set to home will display a special effect. This is also true for other pages.