Tự học HTML và CSS trong 1 giờ - part 22 ppt

FIGURE 8.6 Both the inner and outer have margin and padding.. You can also see that the padding of the outer and the margin of the inner are combined to provide 30 pixels of whitespace b

Trang 1

As you can see, the text in the inner <div>is jammed right up against the border, and the

inner border and outer border are flush against each other That’s because I’ve set both

the padding and margin of the inner <div>to0 (When you’re setting a property to 0

there’s no need to specify a unit.) The results in Figure 8.5 show what happens if I

change the style sheet to this:

.outer { border: 2px solid black; }

.inner { border: 2px dotted black;

padding: 15px;

margin: 15px; }

FIGURE 8.5

The inner <div>

has 15 pixels

of padding and

margin here.

As you can see, I’ve created some space between the border of the inner <div>and the

text inside the inner <div>usingpadding, and some space between the border of the

inner<div>and the border of the outer <div>usingmargin Now let’s look at what

hap-pens when I add some margin and padding to the outer <div>, too I’m also going to give

both the inner and outer <div>s background colors so that you can see how colors are

assigned to whitespace (I discuss backgrounds and background colors in the next

les-son.) The results are in Figure 8.6 Here’s the new style sheet:

.outer { border: 2px solid black;

background-color: gray;

padding: 15px;

margin: 40px; }

background-color: white;

padding: 15px;

margin: 15px; }

Download from www.wowebook.com

Trang 2

FIGURE 8.6

Both the inner

<div>and outer

<div>have margin

and padding.

8

I gave the outer <div>a large 40-pixel margin so that you could see how it moves the

borders away from the edges of the browser window Note also that there’s now space

between the text in the outer <div>and the border You can also see that the padding of

the outer <div>and the margin of the inner <div>are combined to provide 30 pixels of

whitespace between the border of the outer <div>and the border of the inner <div>

Finally, it’s important to understand the behavior of the background color The

back-ground color is applied to the padding but not to the margin So, the 15-pixel margin

out-side the inner <div>takes on the background color of the outer <div>, and the margin of

the outer <div>takes on the background color of the page

Collapsing Margins

In the CSS box model, horizontal margins are never collapsed (If you put two items

with horizontal margins next to each other, both margins will appear on the page.)

Vertical margins, on the other hand, are collapsed Only the larger of the two vertical

margins is used when two elements with margins are next to each other For

exam-ple, if a <div> with a 40-pixel bottom margin is above a <div> with a 20-pixel top

margin, the margin between the two will be 40 pixels, not 60 pixels.

You already know that to center text within a box, the text-alignproperty is used The

question now is this: How do you center a box on the page? In addition to passing units

of measure or a percentage to the margin property, you can also set the margin to auto

In theory, this means set this margin to the same value as the opposite margin However,

if you set both the left and right margins to auto, your element will be centered To do

so, you can use the margin-leftandmargin-rightproperties or provide multiple

val-ues for the marginproperty So, to center a <div>horizontally, the following style sheet

is used (The newly centered <div>is in Figure 8.7.)

Trang 3

padding: 15px;

width: 50%;

margin-left: auto;

margin-right: auto;

}

FIGURE 8.7

A centered <div>

Browsers care about your Document Type Definition (DTD) set-tings For example, if you don’t indicate in your document that you’re using HTML 4.01, XHTML 1.0, or HTML5, Internet Explorer will not honor things such as margin: auto If the DTD is left out,

IE assumes that you’re using an old version of HTML that doesn’t support features like that You should always use a DTD that cor-rectly indicates which version of HTML is used on the page.

CAUTION

If you want elements to overlap each other, you can apply negative margins to them rather than positive margins.

I used the widthproperty in that style sheet to shrink the <div>so that it could be

cen-tered I explain how to resize elements using CSS later in the lesson

Another thing to remember is that the <body>of the page is a box, too Here’s a style

sheet that includes new values for the border,margin, and paddingproperties of the

<body>tag It also includes some changes to the outer <div>to illustrate how the

changes to the <body>tag work You can see the updated page in Figure 8.8

TIP

Trang 4

.outer { border: 2px solid black;

background-color: gray;

padding: 15px; }

padding: 15px;

margin: 15px; }

body { margin: 20px;

border: 3px solid blue;

padding: 20px;

background-color: yellow;

8

FIGURE 8.8

Treating the body

of a document as

a box.

In this example, you can see that you can adjust the margin, padding, and border of a

document’s body However, unlike other boxes, the background color is applied to the

margin as well as the padding

Controlling Size and Element Display

The one box in the box model I haven’t discussed is the content box For starters, there

are two types of content boxes: block and inline In previous lessons, I’ve discussed

block-level elements versus inline elements—this distinction is important in CSS Block

elements are, by default, as wide as the container you place them within, and you can

modify their height and width using CSS Block elements are also preceded and followed

by line breaks Inline elements are only as wide as they need to be to display their

con-tents, as well as the margins, borders, and padding that you apply to them

Each element is, by default, either a block element or an inline element, but CSS

pro-vides the displayproperty to allow you to change this behavior The block property

sup-ports three values: block,inline, and none For example, if you want the elements in a

list to appear inline rather than each appearing on its own line, as shown in Figure 8.9,

Trang 5

FIGURE 8.9

Inline list items.

Setting the displayproperty to noneremoves the selected elements from the page

entirely Hiding elements with this property is useful if you want to use JavaScript to

dynamically hide and show items on the page Using JavaScript to modify page styles is

discussed starting in Lesson 14, “Introducing JavaScript.”

There are two properties for controlling the size of a block: widthandheight They

enable you to set the size of the box using any of the units of measurement mentioned

previously If you use a percentage for the height or width, that percentage is applied to

the size of the containing element

To make the header of your page 100 pixels high and half the width of the browser, you

could use the following rule:

#header { width: 50%; height: 100px; }

The following paragraph will appear to be very narrow, but the box in which it resides

will be as wide as the browser window unless you specify a width

<p>one.<br />two.<br />three.<br /></p>

It’s possible to set maximum and minimum heights and widths for elements to

account for differences in the size of users’ browser windows The properties

that enable you to do so are max-width, min-width, max-height, and min-height.

Let’s say you’ve created a page design that only looks right if it’s at least

600 pixels wide You could use the following style:#container { min-width: 600px

}

The element with the ID containerwill expand to fit the size of the browser window as

long as it’s at least 600 pixels wide If the browser is smaller than 600 pixels wide, the

contents of the element will scroll off the screen Likewise, you may want to constrain

the maximum size of an element so that lines of text do not become so long that they’re

difficult to read To do so, use the following style:

#container { max-width: 800px }

Trang 6

You can also use both styles together to keep the size of your page within a certain

range, regardless of the size of the user’s browser window:

#container { min-width: 600px; max-width: 800px; }

Normally elements in HTML are sized to fit the content that is placed within them

However, if you constrain the size of an element with a size or a maximum size and then

place content inside the element that won’t fit, the browser has to decide what to do with

it By default, when content won’t fit inside its box, the browser just displays the

over-flow as best it can As you can see from Figure 8.10, the results are not always pretty

8

FIGURE 8.10

Content that is

too large for its

container.

The border shows the dimensions of the box specified in the style sheet Because there’s

too much text to fit inside the box, it runs over the border and down the page Using the

CSSoverflowproperty, you can tell the browser what to do when these situations arise

The values are visible(this is the default), hidden,scroll,auto, and inherit You can

see how the different overflow settings look in Figure 8.11

FIGURE 8.11

Different ways

of dealing with

overflow.

Trang 7

When overflow is hidden, the content that does not fit in the box is not displayed at all

Bothscrollandautoadd scrollbars to enable users to view the entire contents of the

box When the setting is scroll, the scrollbars are always displayed, whereas when the

setting is auto, the scrollbars display only if needed When overflow is visible, content

that overflows the box is not taken into account when laying out other items on the page

and the overflow content bleeds onto other content on the page When you are sizing

ele-ments on the page manually, you should always account for potential overflow so that it

doesn’t break the layout of your page

Float

Normally, block-level elements flow down the page from top to bottom If you want to

alter the normal flow of the page, you can use absolute positioning, which I discuss in a

bit, or you can use the floatproperty The floatproperty is used to indicate that an

ele-ment should be placed as far as possible to the left or right on the page, and that any

other content should wrap around it This is best illustrated with an example First, take a

look at the page in Figure 8.12

FIGURE 8.12

A page with no

floating elements.

As you can see, the three boxes run straight down the page I’ve added a border to the

first box, but that’s it Here’s the source code to the page, with the addition of a few

addi-tional properties that demonstrate how floatworks:

<!DOCTYPE html>

<html>

<head>

<title>Floated Elements</title>

Trang 8

<style type=”text/css” media=”screen”>

.right {

border: 3px solid black;

padding: 10px;

margin: 10px;

float: right;

width: 33%; }

.bottom { clear: both; }

</style>

</head>

<body>

<p class=”right”>

The absence of romance in my history will, I fear, detract somewhat

from its interest; but if it be judged useful by those inquirers who

desire an exact knowledge of the past as an aid to the interpretation

of the future, which in the course of human things must resemble if

it does not reflect it, I shall be content.

</p>

<p class=”main”>

it does not reflect it, I shall be content In fine, I have written

my work, not as an essay which is to win the applause of the moment,

but as a possession for all time.

</p>

<p class=”bottom”>

it does not reflect it, I shall be content In fine, I have written

my work, not as an essay which is to win the applause of the moment,

but as a possession for all time.

</p>

</body>

</html>

As you can see from the style sheet, I’ve set the floatproperty for elements with the

class “right” to right I’ve also added some padding, a margin, and a border to that class

for aesthetic purposes and set the width for that class to 33% so that it isn’t as wide as

the browser window I’ve also put the second paragraph on the page in the class bottom,

and I’ve added the clear: bothproperty to it Figure 8.13 shows the results

8

Trang 9

FIGURE 8.13

A page with a

<div> floated to

the right.

The<div>is moved over to the right side of the page, and the first paragraph appears

next to it The float: rightproperty indicates that the rest of the page’s content should

flow around it The bottom paragraph does not flow around the <div>because I’ve

applied theclear: bothproperty to it, which cancels any float that has been set The

options for floatare easy to remember: left,right, and none The options for clear are

none,left,right, and both

Using the clearproperty, you have the option of clearing either the left or right float

without canceling both at the same time This proves useful if you have a long column

on the right and a short one on the left and you want to maintain the float on the right

even though you’re canceling it on the left (or vice versa)

Now let’s look at how floated elements work together Figure 8.14 shows what happens

when you have two right-floating elements together, and Figure 8.15 shows the effect

with a left-floating element and a right-floating element

FIGURE 8.14

Two right-floating

elements together.

Trang 10

As you can see, when you put two floating elements together, they appear next to each

other If you want the second one to appear below the first, you need to use the clear

property as well as the floatproperty in the rule, as shown in this style sheet:

.right {

border: 3px solid black;

padding: 10px;

margin: 10px;

float: right;

width: 33%; }

#second { clear: right; }

.bottom { clear: both; }

The additional <div>I’ve added has been given the ID second, so that it inherits all the

styles of the class rightand also the style rule associated with the ID second The result

is in Figure 8.16

8

FIGURE 8.15

A left-floating and

a right-floating

ele-ment together.

Định dạng
Số trang	10
Dung lượng	1,28 MB