CSS - Positions

CSS 盒子模型

 

display 属性:

  • block
  • inline-block
  • inline
  • none

 

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.

margin: auto;  /* put equal left and right margins on our element, centering it on the page */
margin-top: /*some value*/
margin-right: /*some value*/
margin-bottom: /*some value*/
margin-left: /*some-value*/
margin: 1px 2px 3px 4px; /* 使用一行命令 */

 

 

 

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 <p> element, the "stuff" is the text of the paragraph.

 

Floating

float: right

clear: right or left or both;

 

position

position: absolute

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

 

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.

 

fixed position anchors an element to browser window, If you scroll up and down, the fixed element stays put even as other elements scroll past.

 

posted @ 2016-08-03 13:03  elewei  阅读(75)  评论(0)    收藏  举报