css复习

定位主要有相对定位position：relative（相对于原来的位置移动后，继续占有原来的位置）；绝对定位 absolute（ 绝对定位，相对于父级元素，如果父级元素没有定位以浏览器为准 如果祖先元素有定位，以最近的有定位的祖先定位为准绝对定位不占有位置）；固定定位fixed（固定定位，以页面的可视化窗口为定位，不占有位置）；
只有定位的盒子才有z-index属性（定位叠放次序）
解决定位盒子的居中对齐：left：50%； top：50%；transform：translate（-50%，-50%）；
translate是以自身的宽度为基础移动的
行内元素添加绝对定位或者固定定位，可以直接设置宽高   

元素的显示与隐藏主要有：display: none;（隐藏元素，丢失位置）  display: block;（显示元素或者转换为块级元素）visibility: hidden;（隐藏元素但是保留位置 ）visibility: visible;（显示元素）
 overflow: hidden;（隐藏溢出的部分） overflow: scroll;（添加滚动条 ） overflow: auto;（判断是否溢出，溢出则添加滚动条 ）

精灵图的使用主要是通过改变background-position：x y;

css小三角的制作，给一个盒子设置宽高为0 在给他添加边框并设置边框为透明色，然后需要那个方向的三角就给那个地方的的边框设置颜色，边框的大小决定三角的大小比如（ width: 0;height: 0; border: 10px solid transparent; border-bottom-color: pink;）

解决图片底部默认空白缝隙问题，产生原因是行内块元素会和文字的基线对齐。
解决方法：给图片添加vertical-align：；（除了baseline）或者将img转换为块级元素
text-align对行内元素和行内块元素起作用

css3盒子模型的出现就不需要考虑padding将盒子撑大（box-sizing：border-box）