CSS复习一

一、盒模型（块级元素）

1.margin（边距）+border（边框）+padding（补白）+width（宽）+height（高）

2.元素背景定义：可以用background-image定义元素被背景，背景占据padding+width+height，默认情况下背景图片重复显示，直至填充完毕元素空间的padding+width+height；可以使用background-repeat控制重复；background-attachment控制背景滚动情况；background-position控制背景的位置，位置设计水平（left/center/right）+垂直(top/center/bottom)，中间以空格隔开；background-color控制背景颜色。

3.元素边框定义：可以使用border-style控制边框线型，border-color控制边框颜色，border-width控制边框的宽度，但是注意以上无法分别定义每个边的情况，为四个边整体情况。

                            也可以使用border以及border-top、border-right、border-bottom、bottom-left分别定义每个边的边框线型、边框颜色、边框宽度。

4.元素补白定义：只涉及补白大小，可以使用padding以及padding-top，padding-right，padding-bottom，padding-left分别定义。

5.元素边距定义：只涉及边距大小，可以使用margin以及margin-top，margin-right，margin-bottom，margin-left分别定义。

二、元素定位

1.定位属性：static（默认）、absolute、relative

2.absolute：相对于父元素，脱离了文档流（此元素不占用位置），显示级别比普通元素高，可能覆盖相邻元素；

  relative：相对于元素本身位置，未脱离文档流（此元素占用位置，并且相对于其他元素而言，占用的是原来的位置，其他元素再次基础上排列自己的位置），

                   显示级别比普通元素高，可能覆盖相邻元素。

3.定义了absolute和relative的元素可以使用top、left、right（慎用）、bottom（慎用）来进一步确定位置。

4.z-index用来定义重叠元素的显示位置顺序，值越大说明显示级别越高。

三、元素布局

1.浮动元素：float：none | left | right

2.清除浮动：clear：none | left | right | both

3.内容剪切：clip

4.溢出控制：overflow/overflow-x/overflow-y：visible | auto | hidden |scroll

5.显示方式：display：block | none | inline | inline-block

6.可视属性：visibility：visible | collapse | hidden

注意：display：none元素不占用空间；

            visibility：none元素占用空间，只是不可以看到。