Complete Intro to Web Development, v2 CSS Box Model

Transcript from the "CSS Box Model" Lesson

[00:00:00]
>> Brian Holt: So so far we've more or less been using CSS to change colors, change fonts, change text alignment. You can also use CSS to kind of layout your page, right? You can think about like, how do I get like this nav bar to stick at the top, right?

[00:00:19] That's just CSS, how do I get like this gray background with the white thing in front of it? Again, this is all just CSS.
>> Brian Holt: So I'm kinda calling this layout CSS, that's just a term that I'm using in this particular case. So without CSS, you couldn't have two boxes like this directly next to each other, so you use CSS to do things like that.

[00:00:42] So let's talk about how that works.
>> Brian Holt: Well, do I get into that? So I just wanted to briefly touch on this thing called float. The reason why I wanna touch on it is because it was around for so long, it's how we did layouts for so long, that there's a lot of code samples still around.

[00:01:10] If you go work at any company, they probably still have some stuff left that's been done in float. Any more, I think the answer is that you don't need float hardly ever. Let's go with very rarely. I say that because I actually did use it on this page, so.

[00:01:27] [LAUGH] But really, only for specific use cases. So here, I've done this thing called float: left, which basically means take up as much room, go as far to the left as you possibly can. And then once you can't go any further, stop there, right? So for this particular one, it floated left, and then in this one, it floated left on top of that as well, right?

[00:01:51] So it just kept pushing to the left, and you can do the exact same thing by going right. This would have to clear left, same thing. See, now this it's pushing right. I noticed that box one is the furthest to the right, because it started floating first. So that's what floats do.

[00:02:11] There's a better way to do it, it's called flex, and that's what we're going to be talking about for the rest of this particular class.
>> Brian Holt: In fact, I use it right there, display: flex. But we'll get there, we're not there yet.
>> Brian Holt: So again, these are just two divs.

[00:02:30] And if you remember, divs typically clear the entire line that they're on, right? They take up the whole line, unless you do something like float. So that's something to keep in mind. Or how do you center text? This is probably the classic junior developer question is how do I vertically center something?

[00:02:54] Google how do I vertically center something, and you'll see literally 1 million results. Cuz there are so many, so, so many problems with people trying to do vertically centering text. Now it's much, much easier than it used to be. It used to be extremely difficult, it's not anymore, lucky you.

[00:03:17]
>> Brian Holt: Okay, so let's talk about something called the Box Model. This is actually kind of important for you to know, and if you can learn this earlier rather than later, it's going to be a real boon for you. It actually took me far longer than I care to admit to learn this.

[00:03:39] I did not learn this probably till my second job. In fact, I probably didn't even know the word Box Model I think untill then so, you're already like one step ahead of where I was. It is a little confusing, but hopefully we can kind of clear it up a little bit.

[00:03:54] It's worth understanding for sure.
>> Brian Holt: So the first thing we wanna talk about is display mode. There's a CSS property called display. And this is kind of like setting what mode, measurements are made by. So by itself, a div by default is display block, that's the name of it will take up 100% of the width that it possibly can.

[00:04:26] It respects height and width and padding and margins, which we'll talk about those in a second. But all those things just work for block. Spans, on the other hand, are, by default, display inline. So if you remember, when we were looking at that CodePen example, and you had that yellow text that was just inline, the reason why that worked is cuz it was display inline.

[00:04:52] But the thing about display inline, if you tell it something that's displayed in line to be like width 200, it will not respect that. Because it's like, no, I'm inline. I don't care about widths or heights, all I'm trying to do is fit in lines of texts. So that's what display inline does.

[00:05:12] So you can actually make spans act like divs, and you can make divs act like spans by just changing their displays. I mean don't, [LAUGH] but you can. That power is given to you.
>> Brian Holt: So like it sounds, display inline makes a tag behave as much as possible like it is text, right?

[00:05:33] It tries to make it go behave as much like it's text. So if you wanna style some text in line, this is way to do it. If you try and change anything with padding, margins and those kind of things, it just doesn't respect them. So if you ever find yourself trying to change the width of something, and it's not doing anything, might be display inline, that's something you might want to investigate.

[00:05:55] It's a common problem.
>> Brian Holt: Blockening the hand will do all of those things. If you change width and height and padding and margins, it will respect those.
>> Brian Holt: So by default, block takes the whole line to itself. There is a median called inline-block that will try and act inside of text as much as possible.

[00:06:20] It will try and put itself inside of text. But it will still respect width and height, and stuff like that. So that's kind of like the hybrid between the two.
>> Brian Holt: So like this green box right here, this, I just put that in there, that is display inline-block.

[00:06:36] You can see that it's just a green box that I gave a width and a height to. That's done using inline-block.
>> Brian Holt: So but we get into a thing called display flex. Now, when I learned how to code, flex was just like this far off future promise.
>> Brian Holt: It's like, this is the future, but you can't use it.

[00:07:03] [LAUGH]
>> Brian Holt: And so I didn't learn using flex, and so I'm actually quite jealous that you learning today get to start with flex. We've advanced far enough that most browsers support flex. And I guess that's something that kind of just bears mentioning right now. When we add new things to the web platform, it takes a long time for them to catch on.

[00:07:29] So we have a new thing called display grid that we aren't going to talk about today, that I wish I could talk about today. But if you use display grid, you're cutting out 15 or 20% of your users, which is way too much, right? You wanna cover 99% of your users.

[00:07:44] So flex has really good coverage now, so we are gonna talk about flex. And you should talk about grid, and I think Jen has a course on grid, right, on Frontend Masters, which is quite good.
>> Student: [INAUDIBLE]
>> Brian Holt: Cool. So both of those, so we'll go into flex today.

[00:08:00] And I'm sure she goes even further into depth than I do, and she's quite good at it as well. So that's what happens when the admin syncs to the browser, and to JavaScript, and to CSS. You can play around with them, right? You can use grid today, but not many companies are using grid in production today, or grid on their normal websites, because it's too new.

[00:08:25] So not many browser is supportive. Anyway, flex. Flex is awesome, and it allows you to do some layout techniques that bases say like hey, I need this to be laid out in the center, and vertically centered, and horizontally centered, and spaced out in this particular way. And flex will handle all of that for you in a really nice version.

[00:08:47]
>> Brian Holt: There's also display table. You can make things that are not tables act like tables. Not sure why you would do that, but it is possible. Again, don't. There's also display table of row, and the display table cell. We can actually make real tables out of divs. And then, I guess I didn't say, but there is display none which is really literally doesn't display it, right?

[00:09:11] If you wanted to, in fact, I use this all the time on websites that are trying to show you ads and pop-overs. I was like, you know what? I don't like you, I'm just gonna say, here, display none, and it just goes away.
>> Brian Holt: Life hack.
>> Brian Holt: Now you don't have to pay for any of your newspapers.

[00:09:30] I'm just kidding, you should definitely pay for your own newspaper. [LAUGH] Anyway, so those are the kind of displays that we're going to be talking about. There probably are more that I'm not thinking of, I think I covered almost all of them. Any questions so far? Cool, so now we're gonna talk about the box model, and what that actually means.

[00:10:01] So height, width, padding, border, margin. Those are the five properties that will make up the complete element.
>> Brian Holt: So I kinda made this here. It's kind of ugly colors, but I wanted it to work for colorblind people, so that's why we made it the weird colors.
>> Brian Holt: Imagine this red box with the white interior is actually the element that we're talking about.

[00:10:35] It would be like this. This would be display block, padding of 5 pixels, margin of 25 with a 3 pixels solid red border with a background-color: white;. So the box itself would be white, right? That's why you'd the background-color: white. The margin is 25 pixels, so that's the blue part here.

[00:11:03] That's the margin. And then padding is 5 pixels, so that's what this little thing between the green dotted line, or dash line, rather. And the red solid outer line, that's the padding. And then this here is the interior content, where the text is, and inside of the border right there, or the green right there.

[00:11:23] And then you have the border as well. So Interior content, padding, border, margin, so that's the order that everything kinda goes in. So things that are, the two that people struggle with are padding versus margins. That seems to be the part where people struggle. Padding is inside the border, right?

[00:11:49] So if I have background color white, the padding will be white colored, and the margin will not, the margin is outside the border, right? So it will not receive the background color. So margins outside, padding inside, cool?
>> Brian Holt: Now here's the million dollar question. If I say width 200, what is 200?

[00:12:15] What is included in 200? And the answer is, it depends. [LAUGH] It depends on what kind of box sizing we're using. Now if you are using the default one that they used forever, it's called Content Box, which is a name you can forget right now, and never think about again.

[00:12:35] But it does not include the border, which sucks, or padding. It doesn't include padding or border, which makes measuring things precisely really really difficult. Because you have to do math of okay, this content's gonna be this wide, plus this much padding, plus this much border. It's math that you don't wanna do.

[00:12:55] It'd be really nice if I said width 200, it included the border, it included the padding, and it included the content. That's the holy grail. That's actually what we really want. What you have to do is you have to set everything into something that's called box sizing border box.

[00:13:11] You remember when I told you there is one instance where I will allow you to us the wildcard selector? That's to set everything into box size and border box. So that when you say width 200, it includes the border, it includes the padding, and it includes the content.

[00:13:27] Otherwise, it's just content. So do I have, yeah, up here. The first thing I put on every website is wildcard selector, box-sizing: order-box.
>> Brian Holt: And that's so, for this reason, that I don't have to think about adding padding and borders together. This makes everything on the website being measured in border box instead of content box.

[00:14:06] They've done a ton of research into this. There's a really good article out of Google from our friend Paul Irish that goes over why this is okay to do. I've done it for years now, so it's okay to do, I would invite you to do it. It just makes life a lot easier.

[00:14:26]
>> Student2: What do opponents of this fear?
>> Brian Holt: Opponents of it say you should never ever use the wildcard selector. Everyone's in favor of using border box, that's a universal win. But some people say never use the wildcard selector ever, and they're wrong. What they're worried about is that wildcard, selecting literally everything on the document.

[00:14:53] You're selecting a lot of elements. And they're worried that would come at the cost of performance. But they're actually quite efficient about it, so performance concerns, I guess. Other questions?
>> Student3: So if you really did have some performance concerns, would you skip using the wildcard and actually go in and just use all of your selectors instead?

[00:15:24]
>> Brian Holt: If they were real performance concerns, I guess you would go in. And if you were using margins or padding or things like that, you would just individually set the box as a border box on it. But they've done extensive testing, even on old browsers, and it does not slow down the browser.

[00:15:48] So that's not a concern.
>> Student3: Okay.
>> Brian Holt: Good question.
>> Brian Holt: So I did this on purpose that width padding, border, margin, it goes in that order. So width, padding, border, margins. Or rather, the ones that you minus, you have padding, then you have border, then you have margin, and it goes in that order.

[00:16:24]
>> Brian Holt: So yep, we talked about box sizing. That's when you can use this box-sizing border-box. Don't put anything else in there. This is the only thing that you're allowed to do with the wildcard. You're not allowed to do anything else. I can't imagine what you would want to do.

[00:16:43]
>> Brian Holt: Cuz most of the time, when you wanna set defaults for your page, if you wanna set a default font or default color, or default background, you'll do that on body. You'll select body, and then you'll put it on there, not here. This is the only thing that you'll use this for is for border-box.

[00:17:04]
>> Brian Holt: Here's the article that I referenced from Paul Irish.
>> Brian Holt: I think he's head of Chrome Developer Relations is his title.