Home > Developer > Web Develop
Last lesson, we introduced a very important concept-box model
This paper mainly introduces some basic knowledge of box model: The concept of margin padding and margin:0 auto; collapse of margin
If there's something unclear about the above-mentioned knowledge, we must understand it.
Otherwise it would be harder to look down.
In this class, we're going to keep on talking about the last lesson.
Actually, the topic of margin is far more than the questions we talked about last class.
Let's look at one of the following layouts:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Xxx</title> <styletype= "Text/css">#div1{width:300px;Height:300px;Background:gray;}#div2{width:100px;Height:100px;background:Red;} </style></Head><Body> <DivID= "Div1"> <DivID= "Div2"></Div> </Div></Body></HTML>
The results are normal after previewing:
At this time we add margin:30px to div2;
Let's not look at the preview I posted, first think about what it would be like.
Should there be a red div2 in the gray div1, and then this div2 is 30px from the upper and left edges of Div1
Yes, theoretically it should be, but the browser does not follow such parsing, it resolves to a
There's nothing wrong with the left, a little bit of a glance is like 30px.
But the distance was so strange that the red Div2 went directly to the top.
Take a closer look, as if the div1 above the bounds of the browser's visible area seem to be different from the previous
It feels like Div2 's margin-top passed to Div1.
Yes, that's it, there's a problem with the browser parsing
In fact, such as Chrome, FireFox, ie8+ and other browsers to parse the CSS is quite good
In IE6 IE7 These older versions of the browser are out of the question more
Fortunately, today's companies are not required to be compatible with IE6, 7 This version of the browser is very low
Of course, the problem we just mentioned is that there is a solution.
I'll tell you two solutions.
First of all, we can actually change our thinking.
Need not want to let div2 distance div1 above and to the left have 30px?
Is there no other way than to set a margin for div2?
Surely, let's think about whether the margin of the child element is equal to the padding of the parent element .
So in our div2 margin is not can be used div1 padding instead?
So, you can basically guess what I'm going to do.
Yes, give div1 add padding: 30px;
By the way, remember to remove Div2 's margin.
Preview again:
But, you see, it's like our gray div1 are getting bigger.
Why is it getting bigger?
Before we talked about it, padding already explained it clearly.
Adding padding to an element is based on the width and height.
That is to say, the width we look on the page should actually be width plus padding-left, plus padding-right
And the page looks high actually should be the height plus padding-top, plus padding-bottom
OK, knowing what the problem is, what if you want to restore the width and height to the previous size?
Very simple, the width of the div1 minus Padding-left and padding-right can not it?
I don't need to say much about the height of div1.
Well, the first way we're introduced here
To sum up, the padding of the child element is converted to the parent element .
So the second approach we're going to introduce is one that people are constantly exploring.
Why do you say that?
Because the people who are beginners to CSS will feel this way.
In fact, the method inside contains a very deep thing, not womb can understand
Careless and said so much nonsense, OK, directly to everyone solution:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Xxx</title> <styletype= "Text/css">#div1{width:300px;Height:300px;background:Gray;Border:1px solid Gray;}#div2{width:100px;Height:100px;background:Red;margin:30px;} </style></Head><Body> <DivID= "Div1"> <DivID= "Div2"></Div> </Div></Body></HTML>
As you can see, I've added a border to Div1.
At this time everybody must have the question, why add the border to be good?
So far, I've never been too clear about this problem.
Excuse me, Caishuxueqian.
See the friends here are interested, you can search the Internet for some relevant information to find out why
Of course, we added a 1px border to Div1, and the same gray as Div1 's background.
Then the width of the div1 will increase by 2px, and it's 302px.
We must pay attention to this point
Well, so far, some of the basics of our box model and the problems we've encountered are almost
But seeing so many examples, I don't know if we found out.
Each div we display on the page seems to be a distance from the left and the top of the browser's visible area.
Actually, let me tell you this, if we don't write anything in the page.
Blank after preview
But there is actually an element of
Who is it?
Body
Body is the root element of all the elements we write, such as Div, A, UL, Li, etc.
So when we get to that point, let's think back to the example above, do we give div1 a margin?
No, huh?
Is it normal that the div1 should cling to the left and top of the browser?
But it's not the case.
Then we can guess that this should be the margin or padding of the BODY element.
OK, we must not mess up the mind, seriously think about why the body of the margin or padding can cause this spacing
After thinking about it, I'll tell you a secret: this margin or padding is the browser's own add-on.
So is this pitch a margin or a padding?
and press our long-lost F12.
Look closely at the style I marked with the orange arrows and boxes, with a line of text in the upper right corner of the box user agent stylesheet
Don't care what it means to translate it, just remember that this is the browser's own style is OK
The console has been very clear to tell us that the browser default to the body plus the style is margin
Okay, here's the problem.
The browser is going to add a margin to the body.
Does it give other elements, such as Div ul Li plus something?
The actual situation is that some labels are added, some labels are not added
This will cause us some trouble, because the browser gives us the mess of things we may not need
So we're going to have to kill those things that our browser added.
There are two ways to kill
First of all, we need to test all the elements on the plate.
See what the browser has to add to them, and then cover it yourself.
Actually, someone has already helped us with this job.
body, H1, H2, H3, H4, H5, H6, p, DL, DT, DD, UL, OL, Li, form, fieldset, Legend, button, input, textarea, TH, TD{ margin: 0; padding: 0;}I took a little piece of it from the Internet, which basically covers all the tags we use.
What do you say? This thing just looks a little verbose.
During the development of the company can be directly on the Internet a search, copied over a ready-made can
The second kind, very concise.
* { margin:0; padding:0;}* means all the elements.
Write this word, when the browser loads our page
Will pass all the elements over, regardless of whether the browser has given it margin or padding
Will reset its margin to 0,padding to 0.
It seems to be a simple and rude way of doing things.
And I've heard a lot of people say it's not good to write since I've just come into contact with CSS to work.
Causes the browser to change the card, affecting performance
But I was in a previous company can blatantly use *{margin:0; padding:0;}
And the project has been on the line for a long time.
And there's no such thing as bad performance.
So the specific use of the plan depends on the requirements of the company
I usually feel like the first way to write a long list of things is really annoying.
Say so much, let's take a look at the effect.
Add *{margin:0 to the front of our style label; padding:0;}
Get after preview
We'll find the gray blocks sticking to the edge of the browser.
In this way, our desires are basically fulfilled.
Of course, there's a lot to be said here.
The default style that the browser adds to us is not only margin, padding
For example, the A-label default color is blue, and there are hard-to-see underscores
The default turns purple after clicking
There's a little black dot for the LI element by default, and so on.
This is the default style for browsers
Of course, you can clear it out.
We met in the back.
Okay, this class, we're introducing some things about the box model.
Of course, our box model is not over yet, and the next lesson is to pull
Web front end from getting started to mastering -10 CSS Introduction
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
