HTML+CSS盒模型

一、Padding

1、padding用来调整内容在容器中的位置关系；padding的属性要添加到父元素上。

padding值是额外加在元素原有的大小之上的，若想保证元素大小不变，需从元素宽或高上                 减掉后添加的padding值。

2、padding属性值的四种方式

四个值：上右下左   padding：10px 20px 30px 20px

三个值：上  左右  下

两个值：上下  左右

一个值：四个方向

二、margin

边界：margin在元素外边的空白区域，被称外边距

三、浮动

横向排版，在一个DIV里，div未定义高度，里面有具有浮动属性的盒子，则父div无法撑开。

1、清除浮动

四、background-position  按外部容器的位置

语法： 
                background-position : length || length 
                background-position : position || position 
      取值： 
      length  : 百分数 | 由浮点数字和单位标识符组成的长度值。
      position  : top | center | bottom | left | center | right

background-position:-50% -50%;

等同于x：-{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：-{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

添加空盒子，子元素添加一个空盒子  .clear{clear:both}

父级元素添加    .clear{display:block;overflow:hidden}

父级元素添加:.clear{dsiplay:block;clear:both;visibility:hidden;content:''}  .clear{zoom:"1"}