Be careful to replace the image height with the height of the real image. Here, the image will be displayed as the background, and because the indentation of -2000 pixels is set, the real text will appear 2000 points on the left side of the screen and will be invisible. But for people who turn off the picture, they may not be able to see it at all, so be careful.
6. Another adjustment technique for CSS box model
The adjustment of this Box model is mainly for IE browsers before IE6. They count the border width and whitespace into the element width. For example:
#box { width: 100px; border: 5px; padding: 20px }
Call it like this:
...
The full width of the box should now be 150 points, which is correct on all browsers except IE before IE6. But on browsers like IE5, its full width is still 100 points. This difference can be handled using the Box adjustment method invented by previous people.
But the same purpose can be achieved using CSS to make them display consistent.
#box { width: 150px } #box div { border: 5px; padding: 20px }
Call like this:
...
In this way, no matter what browser, the width is 150 points.
7. Align block elements in the center
If you want to make a fixed-width web page and want the web page to be horizontally centered, it usually looks like this:
#content { width: 700px; margin: 0 auto }
You would use
to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display this effect. Change the CSS as follows:
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
This will center the content of the web page, so I added
to Content.
text-align: left .
8. Use CSS to handle vertical alignment
Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.
What is the CSS method? By the way, set the line-height of these words to 2em: line-height: 2em and that's it.
9. CSS positioning within the container
One benefit of CSS is that you can position an element arbitrarily, even within a container. For example, for this container:
#container { position: relative }
In this way, all elements in the container will be relatively positioned. You can use it like this:
...
If you want to locate 30 points from the left and 5 points from the top, you can do this:
Note that the order of the 4 numbers is: up, right, down, left. Of course, sometimes positioning rather than margins is better.
10. Background color straight to the bottom of the screen
Control in the vertical direction is beyond the capabilities of CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, using a table is very convenient, but if you only use CSS like this:
#navigation { background: blue; width: 150px }
A shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. What to do?
Unfortunately, the only way to cheat is to add a background image to the shorter column, with the same width as the column width, and make it the same color as the set background color.
body { background: url(blue-image.gif) 0 0 repeat-y }
You cannot use em as the unit at this time, because then the trick will be revealed once the reader changes the font size, and you can only use px.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
