定位

绝对定位：absolute

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。

相对定位：relative

相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此移动元素会导致它覆盖其它框。

overflow:hidden:

overflow属性：

visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。
hidden：声明内容将被剪裁，并且也别想使用滚动条来查看剪裁掉的内容。
scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inner border adge和outer padding adge之间。

auto：声明决策将依赖于客户端，优先使用scroll。

通常盒子内容不会溢出，若出现溢出则可能：

1. 一个不换行的行元素宽度超出了容器盒子宽度。
2. 一个宽度固定的块元素放在了比它窄的容器盒子内。
3. 一个元素的高度超出了容器盒子的高度。
4. 一个子孙元素，由负边距值引起的部分内容在盒子外部。
5. text-indent属性引起的行内元素在盒子的左右边界外。

6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

overflow属性决定盒子是否裁剪超出边界的部分，也决定是否出现滚动条来访问被裁减部分

特例：元素的子孙元素的包含块（Containing blocks）是整个视窗（viewport）或是该元素的祖先元素，内容将不会被剪裁。

包含块（通常一个元素的包含块由离它最近的块级祖先元素的内容边界决定。但当元素被设置成绝对定位时，包含块由最近的position不是static的祖先元素决定。）

 

display:block

 

1. 常用于<span><a>标签，因为不是块级元素。定义display:block属性后，定义width,height等和长宽相关的css属性才会生效
2. 块级元素本身默认的display属性就是block,

     3.之前对div设置过display:hidden,则需要重新定义

图片下出现空白像素的问题解决

 

1. 改变父对象的属性 设置父对象为overflow:hidden;
2. 设置图片的浮动属性 设置图片为float:left;
3. 将图片转换为块级对象则可去掉下边空白 设置img为:display:block;
4. 设置图片的垂直对齐方式 设置img为vertical-align:top;