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

Source: Internet
Author: User
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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.