Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
學位
證書

瀏覽 Coursera 的全部課程

瀏覽
搜索
企業版
登錄
免費加入

Lecture 19, Part 2: The Box Model

Loading...

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

约翰霍普金斯大学

4.8（5,027 個評分） | 180K 名學生已註冊

課程 4（共 6 門，Ruby on Rails Web 开发專項課程）

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

查看授課大綱

您將學習的技能

Html, JavaScript, Css Frameworks, Cascading Style Sheets (CCS)

審閱

4.8（5,027 個評分）

5 stars
4,424 ratings
4 stars
509 ratings
3 stars
48 ratings
2 stars
23 ratings
1 star
23 ratings

JH

Jun 01, 2019

Very interesting and well presented. It's difficult to address all the different experience levels so some points were (to me) a bit laboured, but overall a useful, informative and enjoyable course.

DQ

Feb 20, 2017

I learned very much in this course. I enjoyed each moment studied the content. The teaching methodology is wonderful and teacher is so nice. In general, this course is excellent and I recommend it.

從本節課中

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.

Lecture 19, Part 1: The Box Model10:43

Lecture 19, Part 2: The Box Model7:04

Lecture 19, Part 3: The Box Model5:04

Lecture 20: The background Property6:32

Lecture 21: Positioning Elements by Floating10:47

Lecture 22, Part 1: Relative and Absolute Element Positioning7:57

Lecture 22, Part 2: Relative and Absolute Element Positioning3:47

教學方

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science

腳本

[SOUND] Okay, so in the previous segment we spoke

about the fact that you should always try to use

box sizing border box as your box sizing model.

Now, of course, you don't want to specify box sizing border box on every

element in your entire HTML, so you definitely want to specify it once and

then have it be inherited everywhere.

So let's go ahead and try to do that.

Let's remove this border box from here.

And body seems to be like a natural place to put it since

body is the top level element and it should inherit everywhere else.

So if I place the box size and border box here and

then I refresh, this should stay the same.

It didn't work.

Now, why it didn't that work?

It jumped back to the content box.

Well, the reason that didn't work is because

box sizing is one of those CSS properties that is not inherited.

You can't set it on the parent element and

then expect that the child elements will inherit that property.

So how do we get around that?

Well, the way we get around it is by learning about one more selector.

And that selector is the star selector.

Let's go back up here and we'll go ahead and say star.

And then we'll cut and paste that border box property right here.

Now what is the star?

First let's refresh to see if it worked.

And sure enough, now it's working.

What star does, star selector says is, go ahead and

select every element there is and apply these particular CSS properties to them.

The difference between star and placing some property in a parent element for

example is that star says I am not asking you to inherit anything,

I am saying select every element.

Which means it's as if it took this property and this value and

then it went to the HTML and it applied it to every element it saw, it applied

that particular property and value, which in this case is box-sizing: border-box.

So that's how properties like box-sizing are applied across your entire page.

Now I told you that border-box is a property that's new in CSS3.

Whenever you hear something like that an alarm bell should go off.

Does every browser that I deal with support border-box?

Well, we know just the resource to check that out.

And we'll go to the website called www.caniuse.com and

we'll type in border box.

Border Box is a CSS3 box sizing property, and if we take a look, excellent!

Every single browser is green.

So, every single browser fully supports this property value.

Okay, so next, let's close this up and

let's try to advance our margin understanding a little bit better.

Okay, so let's take a look at this diagram.

We have two boxes next to each other, in other words two elements, and

the gray part is the margins.

Well, margins that are left to right are cumulative.

So if I have a margin, right margin of 40 pixels on the left box and

a left margin of 50 pixels on the right box.

The cumulative margin will be 90 pixels.

40 plus 50.

And that's pretty simple and this is exactly what you would expect.

But what happens if you have one element on top of the other element.

Which let's say these are two divs and each one is specifying a margin.

So one is specifying margin of 30, margin top for the bottom.

For the bottom element margin top is 30, and for

the top element margin bottom is 20.

Would you expect this to be 50 pixels, the cumulative?

Well, the answer is it won't be, the answer is the margins collapse, and

the larger margin wins.

So the actual distance between the border of one element and

the border of another element will be, in this case,

30 pixels, meaning the larger margin will win and the other one will just collapse.

Let's take a look at an example inside our code editor.

Okay so going back to the same file Box Model before that HTML,

we can take a look and see that we have a h1 here and

we defined a margin-bottom of 30 pixels on h1.

Let's go ahead and go to our box and recture we'll move the margin altogether.

And refresh, will take a look what it is without the margin.

So, you could see there's some margin going on here and

that margin is coming from this h1 here margin bottom.

Let's go ahead and define a margin top so,

when you need a margin bottom is on h1 here, when you need margin top on our box.

Let's define a margin top of 20 pixels and

when we do that when we refresh absolutely nothing will happen.

And the reason that is is because the box is defining a 20 pixel margin.

Yet, the h1 ia already defining a 30 pixels margin.

So when they come together and touch,

they collapse into whatever the larger margin is.

So in this case, that's 30.

However if I made the margin to be 40 and

let's say even 50 pixels now you'll see that the box will move down because now

the box has a larger margin than the one specified on h1.

So there is now a bigger distance between the box model h1 and

the actual box and it's actually 50 pixels.

We can also notice, by the way, that the box model,

the words box model are not flush at the top with the corner of the browser.

Now why is that?

Let's go and investigate.

Let's go and inspect the element.

Let's take a look, it's got a margin of 21.4 something.

And where is this margin coming from?

Well, it's coming from, again, the user agent style sheet.

And the reason it's coming here is because of some browser specific prefixes that we

actually haven't talked about that are defining the margin before and

margin after.

We're not going to delve too much into this, but the bottom line it means that

before the element and after the element they'll define some margin.

Now the reason our margin on the body that was specified margin:

0 is not working here is very simple.

Body says anything that is below me and

inside of me is going to have the margin inherited.

But that's only if you don't override it specifically for that element.

As you see here, the user agent stylesheet has a selector h1

that is specifically overriding the margin, which therefore, wins.

This is a bit of a side point but how do we override this?

Well, now that we know about the star selector, it's easy.

You could just say and move the padding in the margin to the star selector.

And now, what this is basically saying is that I am selecting

every element specifically, and then I'm overriding its margin.

So, if I refresh the page now, you could see now it's flushed together to the top.

We won't necessarily be doing this in our pages left and

right, but at least now you know that if you wanted to reset in,

it's called CSS resetting, if you wanted to reset the CSS browser defaults

you would do this most of the time using the star selector.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取

Coursera
關於
管理團隊
工作機會
目錄
證書
MasterTrack™ 證書
學位
企業版
政府版

社區
Learners
Partners
Developers
Beta Testers
Translators

連接
博客
Facebook
領英
Twitter
Instagram
YouTube
技術博客

更多
條款
隱私
幫助
內容訪問
媒體
聯繫我們
目錄
附屬公司