你是否意识到用户与Web应用程序直接交互的唯一渠道是通过Web页面？对于用户来说，Web页面实现得不好，服务端将变得与用户毫不相干！如今用户对Web页面之外有更多的期待：必须加载够快、传递需要的服务、舒适的在各个设备上浏览：从台式电脑到移动手机。 在本门课程中，我们将学习每个Web页面程序员需要知道的基本工具。我们将从最基本的如何用HTML、CSS实现现代的Web页面学习开始。然后我们将进一步学习如何编写页面代码，例如根据用户屏幕的大小来自动调整组件位置和它们的大小。你将能够自己编写一个台式电脑和移动手机都能用的网页。不需要“捏和缩放”！最后，我们将对网络上最普遍、最受欢迎的、令人难以置信的强大语言：Javascript，进行深入的介绍。用Javascript，你将能够建立一个全功能的Web应用程序，通过利用Ajax传递服务端的功能和数据给最终用户。
Lecture 19, Part 1: The Box Model
Loading...
來自 Johns Hopkins University 的課程
面向 Web 开发者的 HTML、CSS 与 Javascript 课程
4153 個評分
從本節課中
Introduction to CSS3
A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.
與講師見面
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
Whiting School of Engineering
In HTML every element is considered a box.
However, there's more to that box than just the content that the element wraps
around.
Let's take a quick look at a simple diagram.
Besides their [INAUDIBLE] content, each box consists of padding,
border as well as margins.
The box model refers to the components that make up an HTML box
as well as the rules that govern how these box components affect the layout
as well as how width and height of the box are calculated.
Let's jump into the code and take a look at some examples.
Okay, so here I am in subline text and
I'm looking at the file called box-model-before.html.
And it's located in the examples Lecture19 folder.
Let's quickly examine the HTML structure of this document.
It's actually pretty simple.
It just has one h1 here.
Has a div that has an ID box and inside of that div there is another
div with an ID content and has some Loren ipsum, basically some dummy text in it.
In addition to that I colored the box itself with a background color blue and
the content which is the div right here.
This content.
I colored it with this color which is basically light green.
And just so we have some more interesting colors in the background
I colored the body to be gray.
Okay, so here is the representation of our page in the browser.
And since div is a block level element,
it tries to fill in the entire parent in terms of width.
So it's trying to fill up the entire width here in the browser.
But there's something strange going on if you take a look.
There's some space that's gone in here right before Lorem and
here at the end of our content beginning and there's spacing going on.
So let's take a look at the chrome developer tools real quick and
figure out what that space is about.
Okay so we'll go ahead and choose the box, that's our box.
And we'll take a look as to what's going on.
There doesn't seem to be any spacing that's set on the box itself.
Well how about the body itself in the body tag?
Go and here we go.
See we'd realized that the body tag here has a margin all around of eight pixels.
Now where is that eight pixel coming from?
Or if we take a look here, it's telling you where it's coming from.
It's coming from the user agent style.
Style sheet.
Which means it's the browser itself.
It's the default browser styles.
So that's actually pretty common that the browsers do stuff like that.
And what we're going to do is in order for
it not to affect what we're doing we're going to reset it.
And it actually resets on the web out there,
plenty of resets on the web how to reset default browser setting.
So we'll go ahead and do margin 0 and
we'll also do padding 0 so we won't be affected by any of that.
And when we do that and we save and refresh, you see that now our content is
flush with the actual borders of the browser window.
Okay, so moving on.
So we have our content.
And you can see the context is green.
Now we're not seeing the background of the box the content is actually sitting in
because we would have seen something blue in the background and always see green.
And that is because the inner box, the inner content div
is covering up the outer one completely because they are the same size.
They both try to fill up their parent which is in this case the body tag.
Both try to fill it up all the way.
And since this one basically sit it on top or inside of this one,
it's covering up the blue background.
Let's go ahead and set some padding on our box.
Let's do padding, and we'll do 10px top.
10px right, 10px bottom, and 10px left.
Now we set that and by the way, there's obviously a shortcut for this.
You could actually remove all this 10px right here and
that would mean exactly the same thing and I let you actually look up as to
all the different shortcuts that you could take, but I'll leave this here for now.
So point is, it's always goes top, right,
bottom, left and let's go ahead and save that and refresh the browser.
And voila, now we've seen the padding.
And what the padding is doing is basically giving some padding around our content and
our content being this div tag right here with the content text, is the one that's
being kind of squeezed all around and the padding is showing up all around and
now you can see the blue because that's the background color of our box.
Okay so next, let's give our box some border.
Let's go ahead and say border, and
we'll give that border that's going to be 3px thick.
And it's going to be solid as opposed to dashed or something like that.
And there's other options here you're welcome to look up.
And we want to give it the color black.
Okay. When we save that, and
when we refresh the browser, you could see that the border showed up.
And in fact, let's make it a little bit thicker.
Let's make it a five pixels border.
And let's make it like that.
Okay and then last but not least, let's give it some margins as well.
Let's go to margin and let's go ahead and use the shortcut notation which is
giving you 40 pixels which means I'm saying I want 40 pixels all around.
So top, right, bottom, and left.
So if I go ahead and refresh that.
You could see now there's 40 pixels on every side.
And, well, you could see it on the bottom, per say, and
you can't really necessarily see it here.
But there's 40 pixels on every side.
Okay. Well, up until now,
we've sort of let the content and some of our margins, and so on dictate
how big the actual box is or what about if we actually set this width our self.
Let's set the width to be let's say 300 pixels and we save and
refresh the box became smaller but let's go ahead and examine that box.
Let's click on the inside Chrome Developer tools, now let's take a look.
So it's showing us that our box is in fact 300 pixels wide and
since we didn't restrain our height, it went ahead and wrapped around the text.
And basically the height will adjust unless we restrain it.
A manually by specifying the height,
it will adjust to however much it needs to fit.
So if we make it a little bit small, let's make it let's say 100 pixels,
we'll refresh you'll see the height will become a little bit bigger, the height
will become 72, because now we squeezed it enough that extra lines got added.
So now the content width is 100 but the height is larger.
Let's go ahead and put it back to 300 and refresh.
And now if you look at this breakdown
we come to our first pretty interesting point.
But first of all let's go through all the components.
Here this one is the pure content right here that I'm mousing over right here.
And then if I go up a little bit, it'll highlight for
me in the browser the padding that's going on there.
And if I highlight, if I go out a little bit more, I'll go straight up to
the border, right, and if you can't really see the margins if you roll over to
the margin side voila now you see what the margins are gone and even though to
the right side showing you a little bit more than really margin is going on.
But the 40 pixels all around still stands.
Now what's interesting to find is well how big is this
box exactly as we going to start putting more and more boxes right.
We going to start making layouts of different HTML components and
to get our UI just right, we need to find out how big is each box.
Well, we sort of specified that we want the box to be 300 pixels wide.
The problem is that it's not really 300 pixels wide.
Let's take a look.
If we take a look here it says 300 pixels wide, but we're forgetting there's
a border around it or the padding around it, and the padding is 10 pixels on one
side And ten pixels on the other side but that's not all, there's also a border
around it as well that is 5 pixels wide and 5 pixels wide on this side.
So really, it's 300 plus 10 plus 10 that's 20, 320, plus 5 plus 5 that's 330.
So if you look at the actual visible border of this box, this box,
this distance is not actually 300.
This distance is 330.
And the interesting part is, or kind of annoying part,
is that, depending on what border and padding you set, this width will change.
So let's take a look.
Let's say if I make the border something really crazy like 20 pixels.
So go ahead and refresh.
Now the border is 20 pixels so now my box end all the way there.
And if I make the padding even bigger,
let's say I make the padding this one is the right so I make the padding 30 and
on the left I make the padding 30 as well, and I take a look at the box.
Take a look at how it's going to whoa, it became bigger again.
So even though we said I want the width of the box to be 300,
it turns out that we aren't really setting the width of the box,
we're actually setting the width of the content.
And that's this piece right here in the green.
Well it turns out for layouts, and just in general sanity this is kind of annoying.
You really want to change that and CSS3 actually did change that,
it turns out that by default, the box sizing is actually a property of
every HTML element and by default it's actually set to content box,
which means when you specify it's height and width,
you're specifying the height and width of the content box, not the entire thing.
Well CSS 3 came out with a new value for that property,
and that's called border-box.
Let's go ahead and set that right here.
We'll say box-sizing, and we'll say border-box.
And when we refresh let's take a look, look at that, it became smaller.
So now, if you take a look at the breakdown,
you could see that even though it was specified the width would be 300.
That width is guaranteed to be the width of this box right here
from the edge of this border.
To the edge of this border.
So if you take a look here, 200 plus 30 plus 30,
that's 260, plus 20 plus 20, that's another 40, that's 300.
And if we change it back to content-box,
which is the default, it will jump back to its original size.
But the truth of the matter is, all the modern frameworks like Bootstrap and
others use box, border box as its sizing mode,
and as you plan and work with your layouts this is the same choice to make.
So, make sure you always stay with a box sizing of border box.
