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 margin can be controlled;
The width defaults to 100% of its container unless a width is set
,
,
,
,
And
- is an example of a block element.
Conversely, the inline element is characterized by:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.
, ,,, ,Andis an example of an inline element.
This feature of an element can be changed with the Display:inline or Display:block command. When do I need to change this attribute?
Let an inline element start from the new line;
Keep The block elements and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Controls the height of the inline element;
You can set the background color of a block element to the same width as the text without having to set a width.
2. One more box hack method
There are so many box hacker methods, because IE before 6 to the box understanding of the same as others, its width to include edge width and white space. To make IE5 the same as 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 line 2nd, just because there is a blank comment symbol on that line (What a stupid parsing!). ), so ie5.x minus a few blanks with 20, and the other browser will use the width of 14, because it is line 2nd and will overwrite the 1th line.
3. Minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order to make this command available on IE, you can put atab, and then specify a class for the DIV:
Then the 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 by JavaScript's judgment.
The same approach can also be used to achieve the maximum width of IE:
#container
{
min-width:600px;
max-width:1200px;
Width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";
}
4. IE with width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.
For example, to set the background image, this width is more 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 paragraph because it uses the child selector command. The 2nd setting is more special, so it overrides the 1th setting.
5. Font Warp command
The Text-transform command is useful, and it has 3 values: Text-transform:uppercase, Text-transform:lowercase, and Text-transform:capitalize. The 1th one will turn the text into all capitals, the 2nd to all lowercase, and the 3rd to the first capitalization. This is useful for phonetic text, even when the input is case-insensitive, and is not visible on the Web page.
6. The problem of missing picture text in IE
Sometimes there is a sudden disappearance of text or a background image, and a refresh appears again, which is more likely to occur near the floating element (note: not seen). At this point, you can set the missing element: Position:relative, if not, then consider specifying a width for the elements to try.
7. Invisible text
For whatever reason you want some Web text not to appear in the browser, for example, to print or to make certain text appear 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. Designing specialized 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 points wide to see the effect. The syntax for specifying a dedicated handheld device's CSS is:
You can also read the availability of specialized handheld devices.
9. Buttons for 3D effects
Before you want to create a 3D effect, and click Down will change the button, you have to use the image replacement method, 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 adjust it yourself.
10. Use the same navigation code on different pages
Many pages have navigation menus, and when you enter a page, the corresponding item on the menu should be dimmed while the other pages are lit up. Generally to achieve this effect, you need to write programs or specifically for each page design, now rely on CSS to achieve this effect.
First, use CSS classes in your navigation code:
The body of each page is then assigned an ID, with the same name as the class above. Such as。
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 will work, that is, the row navigation bar set to home will show a special effect. The same is true for other pages.
-
