Basic tutorial on Div + CSS: Box Model, block and inline elements, CSS Selector

Key words: Box Model, block and inline elements, CSS Selector

Reference:

[Example]

Requirements:

1) the width and height are both 200 pixels;

2) The color is red #900;

Do it by yourself to see if it can be done? Don't look at my code first. If you can't do it, download it and follow the steps below to modify it.
The following is my code: sy_example 1.rar (498
Bytes)

In IE6 and FF, the following results are displayed:

How about it? It's easier ~, But have you found that the red area is different from the IE 6 and FF margins on the top and left of the browser? In this case, the page browser we made is incompatible and the effect is different? Why?

This is because each browser has a built-in CSS file. When you do not set the attributes of a tag, the browser will apply the built-in CSS file. How can we achieve browser compatibility? Don't worry, you just need to apply the TAG body and Div to the CSS file. It's okay to set the value to zero. Write the code like this.

Copy content to clipboard

Code:

body,div{padding:0; margin:0;}

After this sentence is added, will the two browsers have the same display effect ~ For example

Okay, let's continue. Now we have another condition.

Reference:

3) set the distance between the red area and the top and left of the browser to 20 pixels;

How are you doing? Is there any idea? It doesn't matter if you don't have any ideas. Continue to look down;
We only need to set the margin of the Red Square. Add the following CSS code:

Copy content to clipboard

Code:

margin-top:20px;

margin-left:20px;

Results:

In this way, the red area is located at the page coordinate (20, 20), and the top margin and left margin of the browser are both 20 pixels.

However, we can simplify the above writing

Copy content to clipboard

Code:

margin:20px 0 0 20px;

The numerical order is: Top right bottom left.
While margin: 20px 0 is equivalent to margin: 20px 0 20px 0 ~ It is more streamlined, so that the write CSS loading speed will be faster.

Then we will extend the question, how can we make the red area horizontally positioned in the middle of the browser, regardless of the size of the browser window, the size of the display resolution.
It is also very simple. Just added two sentences: "margin-top: 20px; margin-left: 20px;" changed

Copy content to clipboard

Code:

margin:0 auto;

How are you doing? Is the red area in the middle of the browser ~

Good ~! At the end of the first lesson, is it very simple or too simple !!! Kwoojan can ensure that the subsequent courses are still very simple. After you finish the tutorial, you will certainly say that XHTML + CSS is so simple! Easy!

If you cannot understand it, click the course keywords at the top of the Article. As long as you read these keywords, I believe you will understand it!

I wrote this tutorial for the first time. I don't know if you can understand it or accept it. If you think it is good, let me know. If you have suggestions or ideas, leave a message and I will change the course in the next section!

Author: kwoojan from: CSS Learning Forum