[关闭]
@Sarah 2015-12-27T23:27:23.000000Z 字数 14754 阅读 1090

CSS Positioning

css

Taking up space
Cool, right? Each HTML element gets its own box to live in.

As you saw, the outermost box of each element went all the way across the page. This is why until now, your HTML elements have been sitting on top of one another: by default, they take up the full width of the page.

We can change all this with the first positioning property we'll learn: the display property. We'll learn about four possible values.

block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.

inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.

inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).

none: This makes the element and its content disappear from the page entirely!

Instructions
Let's get cracking. Set the display of all

s to block.

  1. * {
  2.     border: 1px dashed blue;
  3. }
  5. div {
  6.     height: 50px;
  7.     width: 100px;
  8.     border: 2px solid black;
  9.     border-radius: 5px;
  10.     /*Add your CSS here!*/
  12. }
  14. #one {
  15.     background-color: #FF0000;
  16. }
  18. #two {
  19.     background-color: #0000FF;
  20. }
  22. #three {
  23.     background-color: #FFD700;
  24. }
  26. #four {
  27.     background-color: #308014;
  28. }

Inline-block 分块挨着排

Good work! If you didn't notice much of a difference, don't worry. Our

s were block elements by default; as we specify different display values, they'll start to move around.

As mentioned, any element that comes in as a block (say, a paragraph) will automatically take up the full width of the page, no matter how much or how little content you put in.

If we specify a display of inline-block, however, our blocks are still blocks, but will be able to sit next to each other on the same line.

Instructions
Change the display property of all your

s so the value is now inline-block instead of block.

  1. div {
  2.     height: 50px;
  3.     width: 100px;
  4.     border: 2px solid black;
  5.     border-radius: 5px;
  6.     /*Add your CSS here!*/
  7.     display: inline-block;
  8. }

Inline 所有元素挤在一起 变成一坨 不分开

Did you see that? Your

s all moved onto the same line! You can already start to see how this type of positioning can be useful for navigation bars like the one at the top of the main Codecademy page (where you can click "Learn," "Teach," and so on).

The inline-block value allows you to put several block elements on the same line. The inline value places all your elements next to one another, but not as blocks: they don't keep their dimensions.

Instructions
Try it and see! Set all your

s to have a display value of inline.

  1. div {
  2.     height: 50px;
  3.     width: 100px;
  4.     border: 2px solid black;
  5.     border-radius: 5px;
  6.     /*Add your CSS here!*/
  7.     display: inline;
  8. }

None! 暂时看不见啦

The good news is, inline places all your elements on a single line. The bad news is that it doesn't maintain their "box"ness: as you saw, all your

s got squished to the smallest possible width!

The inline display value is better suited for HTML elements that are blocks by default, such as headers and paragraphs.

Finally, we'll try out the display value none. As you might expect, this prevents the page from displaying the selected element. As you might not expect, this removes the selected element from the page entirely, including any children and any content. Poof! Gone! (But not gone forever—changing the display value away from none will bring everything back.)

Instructions
Give it a whirl! Set all your

s' display property to the none value.

  1. div {
  2.     height: 50px;
  3.     width: 100px;
  4.     border: 2px solid black;
  5.     border-radius: 5px;
  6.     /*Add your CSS here!*/
  7.     display: none;
  8. }

此处输入图片的描述

Sketching it out

Now that you understand more about the display property and the box model, we can delve into the details of how each individual box behaves.

Check out the diagram in the Result tab (it's the one from the first exercise in this lesson). As you can see, each box is made of layers. From the outermost to the innermost:

The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.

The border is the edge of the element. It's what we've been making visible every time we set the border property.

The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.

The content is the actual "stuff" in the box. If we're talking about a

element, the "stuff" is the text of the paragraph.

You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.

Instructions
Study the diagram in the Result tab until you're comfortable with where the padding, border, and margin go. Then hit Save & Submit Code to start adjusting these properties!

Margin

Let's start with our margins. Adjusting our margins not only moves our element relative to other elements on the page, but also relative to the "walls" of the HTML document.

For instance, if we take an HTML element with a specific width (such as our

in the editor) and set its margin to auto, this tells the document to automatically put equal left and right margins on our element, centering it on the page.

Instructions
Try it out! Set our div's margin property to auto to center our div on the page.

  1. * {
  2.     border: 1px dashed black;
  3. }
  5. div {
  6.     height: 50px;
  7.     width: 100px;
  8.     border: 2px solid black;
  9.     border-radius: 5px;
  10.     background-color: #308014;
  11.     margin:auto;
  12. }

Margin top, right, bottom, left

If you want to specify a particular margin, you can do it like this:

margin-top: /some value/
margin-right: /some value/
margin-bottom: /some value/
margin-left: /some-value/
You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). For instance,

margin: 1px 2px 3px 4px;
will set a top margin of 1 pixel, a right margin of 2, a bottom of 3, and a left of 4.

Instructions
Remove our div's margin: auto; on the CSS tab. Using whichever method you like best, give it a top margin of 20px, a right margin of 50px, a bottom margin of 10px, and a left margin of 5px.

Borders

Well done! You can see how fine-tuning your margins will help you place elements where you'd like them to be on the page.

We've worked with borders before, but it never hurts to have extra practice.

Instructions
Change your div's border to 4 pixels wide and solid, with the hex color #FF0000.

Padding

Good! Let's adjust the padding. Remember, the padding is the space between your border and your innermost layer: the actual content.

Padding can be set in two ways, just like your margins. You can either select them individually, like this:

padding-top: /some value/
padding-right: /some value/
padding-bottom: /some value/
padding-left: /some-value/
Or select them all in one declaration, like this:

padding: value value value value;
You should also know that if you want your padding to be the same for all four sides, you can declare that value only once. padding: 10px will give your HTML element 10 pixels of padding on all sides.

Instructions
Go ahead and use your preferred method to give your div padding of 40px on all sides.

Negative values

Did you see that? Your

got huge! That's because the background color is the same for the content and the padding.

When you give CSS a positive padding or margin value, it puts that space between the element and its reference: for instance, if you have a

and you give it a margin-left of 20px, it puts twenty pixels between the left margin of that
and the side of the screen. This effectively moves the
twenty pixels to the right.

If you want to move an element in the other direction, you can give CSS a negative value: margin-left: -20px will move the element twenty pixels to the left.

Instructions
Give your

a margin-top of -20px to see what happens.

Review

Cool, right? You can move HTML elements clear off the page with negative margins values.

Time for a quick review to make sure you've got a handle on all this margin and padding stuff!

Instructions
We've put a

for you to use on the HTML tab. On the CSS tab:

Give that div a border of 1px solid black.
Give it a background color of #CC0000.
Set its top margin to 10px, its right margin to 5px, its bottom margin to 5px, and its left margin to 50px.
Set its top padding to 0px, its right padding to 30px, its bottom padding to 0px, and its left padding to 10px.

  1. /*Add your CSS below!*/
  2. div{
  3.     border: 1px solid black;
  4.     background-color:#CC0000;
  5.     margin: 10px 5px 5px 50px; 
  6.     padding:0px 30px 0px 10px;
  7. }

To the right!

Okay! So we know how our individual elements are constructed. But how do we determine where they go on the page?

One way is to use floats. When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.

You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.

(Some of the positioning methods we'll learn in upcoming sections can accidentally drop elements on top of each other.)

Instructions
Let's get started. Set your div's float property to right!

Q&

  1. div {
  2.     height: 300px;
  3.     width: 100px;
  4.     border: 2px solid black;
  5.     border-radius: 5px;
  6.     background-color: #308014;
  7.     /*Add your CSS here!*/
  8.     float:right;
  9. }

To the left!

Good! As you saw, your div moved over to the right side of the page.

Instructions
Move it back by changing your div's float from right to left!

Float for two

As you may have already guessed, we can use floated elements to naturally divide our pages into different sections. Try it!

Instructions
Set your

to float to the right and your

to float to the left.

  1. div {
  2.     height: 300px;
  3.     width: 300px;
  4.     border: 2px solid black;
  5.     border-radius: 5px;
  6.     background-color: #308014;
  7.     /*Add your CSS here!*/
  8.     float:right
  9. }
  11. p {
  12.     font-family: Verdana, sans-serif;
  13.     font-size: 20px;
  14.     width: 280px;
  15.     /*Add your CSS here!*/
  16.     float:left;
  17. }

Clearing elements

Unfortunately, we sometimes mix large floating elements with non-floating ones, and elements do end up on top of each other.

See your footer (the blue bit between the two columns)? It's stuck back there because we haven't told it something very important: to clear the other elements on the page!

If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear: both, it will get out of the way of elements floating on the left and right!

The syntax is what you're used to:

element {
clear: /right, left, or both/
}
Instructions
Tell the div with the ID #footer to clear both.

  1. #footer {
  2.     height: 50px;
  3.     background-color: #69D2E7;
  4.     /*Add your CSS here!*/
  5.     clear:both;
  7. }

Static by default

Great work so far! Now that you understand positioning elements with float, let's move on to slightly more complex positioning methods.

If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.

Instructions
Check out the

s in the editor. They currently have static positioning, but we're about to change all that. Hit Save & Submit Code to begin!

Absolute positioning

The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to .

To show you how this works, we've set the #outer div to have absolute positioning. This means that when you position the #inner div, it will be relative to #outer. (If #outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.)

Instructions
Try it out: set #inner's position to absolute and give it a margin-left of 20px.

  1. div {
  2.     height: 100px;
  3.     width: 100px;
  4.     border-radius: 5px;
  5.     border: 2px solid black;
  6. }
  8. #inner {
  9.     height: 75px;
  10.     width: 75px;
  11.     background-color: #547980;
  12.     /*Add your CSS here!*/
  13.     position:absolute;
  14.     margin-left:20px;
  15. }
  17. #outer {
  18.     height: 1500px;
  19.     width: 150px;
  20.     background-color: #45ADA8;
  21.     position: absolute;
  22.     margin-left: 100px;
  23. }

Relative positioning

Good! Did you notice how the #inner div moved 20 pixels in from the edge of the #outer div? That's absolute positioning at work.

Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.

If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.

Instructions
Give it a try: change #inner's position to relative and give it a margin-left of 200px.

  1. #inner {
  2.     height: 75px;
  3.     width: 75px;
  4.     background-color: #547980;
  5.     /*Add your CSS here!*/
  6.     position:relative;
  7.     margin-left:200px;
  8. }

Fixed positioning固定在屏幕上即使下拉也不动

Perfect! See? This positioning stuff's not so hard.

Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.

Instructions
Set #inner's position to fixed, then scroll up and down a bit. It stays put even as #outer moves out of the frame!

The story so far

Great work—you've learned a lot about CSS positioning! We've covered:

The CSS box model
Display values, including block, inline-block, inline, and none
Margins, borders, and padding
Positioning elements with float
Giving elements absolute, relative, and fixed positioning

Check out the website we've started in the Result tab. Do you recognize it? It's the demo we showed you in the first CSS lesson!

It doesn't look quite the same, though. This is because much of the crucial display and positioning CSS we used has been removed. Your job? Add it back in!

Instructions
There's a navigation bar here somewhere, but it's lost due to display problems! On the CSS tab, give #navbar a position of fixed and a top margin of -10px.

Displaying it properly

Good work! The navigation bar is all stacked up, however, instead of being laid out horizontally.

Instructions
Fix this by:
1. Setting li's display value to inline;
2. Giving it 5 pixels of padding all around.

  1. li {
  2.     /*Add your CSS here!*/
  4.     border: 2px solid #000000;
  5.     font-family: Futura, Tahoma, sans-serif;
  6.     color: #ffffff;
  7.     border-radius: 5px 5px;
  8.     background-color: #cc0323;
  9.     display:inline;
  10.     padding:5px;
  11. }

Floating right along

Good work! You want to make sure everything floats nicely, however. Your footer is currently stuck behind your other elements!

Instructions
Inside the #left selector, set float: left and width: 45%
Inside the #right selector, set float: right and width: 45%
Inside the #footer selector, set clear: both

  1. body {
  2.     background-color: #b7d1c4
  3. }
  5. h2 {
  6.     font-family: Verdana;
  7.     font-weight: bold;
  8.     text-align: center;
  9.     padding-top: 25px;
  10.     padding-bottom: 25px;
  11.     color: #acd1b2;
  12. }
  14. img {
  15.     height: 170px;
  16.     width: 170px;
  17.     box-shadow: rgba(0,0,0,0.2) 10px 10px;
  19. }
  21. #navbar {
  22.     /*Add your CSS here!*/
  24.     left:50%;
  25.     margin-left:-254px;
  26.     position:fixed;
  27.     margin:-10px;
  28. }
  30. #header {
  31.     position: relative;
  32.     top: -10px;
  33.     background-color: #3c4543;
  34.     border-top-left-radius: 15px;
  35.     border-top-right-radius: 15px;
  36. }
  38. ul{
  39.     list-style-type: none;
  40.     position: fixed;
  41.     margin: -10px;
  42. }
  44. li {
  45.     /*Add your CSS here!*/
  47.     border: 2px solid #000000;
  48.     font-family: Futura, Tahoma, sans-serif;
  49.     color: #ffffff;
  50.     border-radius: 5px 5px;
  51.     background-color: #cc0323;
  52.     display:inline;
  53.     padding:5px;
  54. }
  56. #left{
  57.     /*Add your CSS here!*/
  58.     float:left;
  59.     width:45%;
  60. }
  62. p {
  63.     font-family: Tahoma;
  64.     font-size: 1em;
  65. }
  67. #right{
  68.     /*Add your CSS here!*/
  69.     float:right;
  70.     width:45%;
  71. }
  73. table {
  74.     border: #000000 1px solid;
  75.     background-color: #acd1b2;
  76.     float: right;
  77.     margin-right: 10px;
  78.     border-bottom-right-radius: 15px;
  79.     border-bottom-left-radius: 15px;
  80. }
  82. td {
  83.     height: 75px;
  84.     width: 75px;
  85. }
  87. td img {
  88.     height: 75px;
  89.     width: 75px;
  90.     box-shadow: none;
  91. }
  93. th {
  94.     font-family: Verdana;
  95.     font-size: 1em;
  96.     font-weight: normal;
  97.     color: #3c4543
  98. }
  100. #bottom_left{
  101.     border-bottom-left-radius: 15px;
  102. }
  104. #bottom_right{
  105.     border-bottom-right-radius: 15px;
  106. }
  108. #footer{
  109.     /*Add your CSS here!*/
  111.     position: relative;
  112.     bottom: -20px;
  113.     border-bottom-left-radius: 15px;
  114.     border-bottom-right-radius: 15px;
  115.     height: 75px;
  116.     background-color: #3c4543;
  117.     clear:both;
  118. }
  120. #button{
  121.     border: 2px solid #000000;
  122.     float:left;
  123.     position: relative;
  124.     left: 229px;
  125.     bottom: -20px;
  126.     border-radius: 5px;
  127.     background-color: #cc0323;
  128.     height: 30px;
  129.     width: 150px;
  131. }
  133. #button p{
  134.     position: relative;
  135.     bottom: 10px;
  136.     font-size: 0.8em;
  137.     color: #acd1b2;
  138.     text-align: center;
  139. }
  141. .bold{
  142.     font-family: tahoma;
  143.     font-weight: bold;
  144.     font-size: 1.2em;
  145.     font-variant: small-caps;
  146.     color: #ffffff;
  147. }

What you'll be building

You'll be using your CSS skills to style an eye-catching resume. You'll need to call on your knowledge of CSS selectors, classes/IDs, margins, padding, borders, and positioning to make everything look exactly the way you want it to.

That said, this project will be relatively hands-off. We've put a demo resume in the editor (check the Result tab) for you to use as a template, but you should feel free to style your resume the way you'd like.

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注