css定位 浮动 伪类 margin

一，margin
1.标准文档流，margin在竖直方向的不叠加，以较大的为准
    2.使用margin：0 auto;的盒子必须有明确的width,并且只有标准文档流的盒子
        才能使用margin:0 auto;
    3.善于使用父亲的padding而不是儿子的margin;    

二，css精灵
    1.css精灵优点，减少http请求
    2.通过background-position来控制显示位置
    3.background-attachment:fixed; 背景图片固定，不随滚动条滚动
    4 精灵的使用  background url(inages/1.jpg) no-repeat 0 -133px;
    

三，定位
    1.相对定位 position:relation;
              right: -100px;
              bottom:-100px;
    元素微调和做绝对定位的参考
    2.一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点
    3.子类绝对定位父类相对定位用的比较多
    4.绝对定位后的盒子居中
        width:600px;
        height:60px;
        position:absulate;
        left:50%;
        top:0;
        margin-left:-300px;(为实际宽度的一半)
    5.固定定位相对浏览器窗口定位：position:fiexd;    
四，浮动
    1.浮动的元素脱标
    2.浮动的元素互相贴靠
    3.浮动的元素有“字围”效果
五，清除浮动
    1.父类div设置height
    2.clear:both
    3.隔墙div
    4.overflow:hidden;
六，块级元素和行内元素

    1.块级元素 

        霸占一行，不能与其他任何元素并列
        能接受宽，高
        如果不设置设置宽度，宽高默认为父亲的100%
        
    2.行内元素 
        与其他元素并排
        不能设置宽高，默认宽高就是文字的宽高。
    
    
    display:inline;   让块级元素变为标签。
    display:block; 让标签元素变为块级元素。
七，伪类
    display: block;    将元素弄成块级元素
    伪类标签 ：link 没有点击过的样式
               ：visited点击过的样式
               ：hover 鼠标悬停的样式
               ：active 鼠标点击不松的样式

八，z-index

　　　　1.只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

　　　　2.z-index值就是一个正整数。默认的z-index值是0。

　　　　3.如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

转载于:https://www.cnblogs.com/hlkawa/p/6106003.html