1. Block and inline element comparison
All HTML elements are part of block and inline.
The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set
<div>, <p>,
Conversely, the inline element is characterized by:
and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.
<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements.
You can change this feature of an element by using the Display:inline or Display:block command. When do I need to change this attribute?
Let a inline element start on a new line;
Keep The block element and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Control the height of the inline element;
You can set a background color with the same width for a block element without setting the width.
2. Another box hacker method
There are so many box hacker methods, because IE in 6 before the understanding of box and other people are not the same, its width to include the edge width and blank. To make IE5 equal to 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 are blank annotation symbols on that line (What a stupid parsing!). , so ie5.x uses 20 to subtract some whitespace, while the other browsers use the width of 14 because it's line 2nd, and it overrides line 1th.
3. The minimum width of the page
Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the DIV:
<body>
<div class= "Container" >
Then CSS is designed like this:
#container
{
min-width:600px;
Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
}
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.
The same approach can also achieve maximum width for IE:
#container
{
min-width:600px;
max-width:1200px;
Width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";
}
4. IE and width and height of the problem
IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height.
For example, to set the background picture, this width is more important. To solve this problem, you can do this:
. box
{
width:80px;
height:35px;
}
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 paragraph because it uses the subcommand command. The 2nd setting is more specific, so it overrides the 1th setting.
5. Font Variant command
The Text-transform command is useful because it has 3 values: Text-transform:uppercase, Text-transform:lowercase, and Text-transform:capitalize. The 1th one will turn the text into all uppercase, the 2nd becomes all lowercase, and the 3rd becomes the first letter. This is useful for alphabetic text, even if there is a case error when typing, and is not visible on the Web page.
6. The problem of the disappearance of picture text in IE
Sometimes the problem of a sudden disappearance of text or background images is encountered, and the refresh appears again, which is more likely to occur near the floating element (note: not seen). At this point, you can set the vanishing element: position:relative, and if not, consider specifying a width for these elements.
7. Invisible text
For whatever reason you want some of the page text to not be displayed in the browser, for example, to print or to have some text not displayed for a small screen, you can use Display:none. This is very simple, but sometimes for some people this is a bit useless, they can remove this control, then need to use: Position:absolute; Left: -9000px.
This actually specifies that the text is displayed outside the page.
8. Design a dedicated CSS for handheld devices
That is, mobile phone/pda and other small screen users, you can specifically design a CSS to make the page display more comfortable. To do this, you can adjust the browser window to 150-point width to see the effect. The syntax for specifying the CSS for a dedicated handheld device is:
<link type= "Text/css" rel= "stylesheet" href= "Handheldstyle.css" media= "handheld"/>
You can also read specialized handheld device availability.
9.3D Effect of the button
Before you want to make a 3D effect, and click Down will change the button, you have to use the method of replacing the picture, now CSS can be:
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 their own.
10. Use the same navigation code on different pages
Many web pages have navigation menus, and when you go to a page, the corresponding item on the menu should be dimmed, and the other pages will light up. Generally to achieve this effect, need to write programs or specifically for each page to do the design, now rely on CSS can achieve this effect.
First, use the CSS class in the navigation code:
<ul>
<li><a href= "#" class= "Home" >Home</a></li>
<li><a href= "#" class= "about" >about us</a></li>
<li><a href= "#" class= "Contact" >contact us</a></li>
</ul>
Then specify an ID for the body of each page, with the same name as the class above. such as <body id= "Contact" >.
Then design the CSS as follows:
#home. Home, #about. About, #about. About
{
Commands for highlighted navigation go
}
Here, when the ID is set to home,. Home works, that is, the navigation bar with class set to home will show special effects. The same is true for other pages.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
