CSS Box Model

上一篇 / 下一篇  2015-07-31 10:18:13 / 个人分类：HTML/CSS

查看( 736 ) / 评论( 4 ) / 评分( 0 / 0 )
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; /* top margin > right margin > bottom margin > left margin */

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

instance of CSS as below.

div {

height: 50px;

width: 100px;

border: 2px solid black;

border-radius: 5px;

background-color: #308014;

/*margin-top:20px;*/

/*margin-right:50px;*/

/*margin-bottom:10px;*/

/*margin-left:5px;*/

margin: 20px 50px 10px 5px

}


收藏 举报

TAG:

wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-07-31 11:01:18
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!
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-07-31 10:58:07
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.
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-07-31 10:56:55
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.
wilber.shinobi的个人空间 引用 删除 wilber.shinobi   /   2015-07-31 10:56:24
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 <html>.

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.)
 

评分：0

我来说两句

Open Toolbar