CSS篇-CSS小技巧与注意手记(三)

loading.....一般情况下给了 line-heigt 可以不用给 高 ,行高会撑开盒子

一 : 点击边框变色

效果:

test.gif

步骤分析 : 1.基本版搭建

可以看下面基本版的效果图,两个div之间存在很大的空隙.我们要进行进一步的修复.

基本版效果

基本版效果

步骤分析 : 2.加强版搭建

div {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        float: left;
        margin-left: -1px;
        
    }
    div:hover {
        border: 1px solid #f40;
    }

为了解决步骤1的问题,试着左移一像素的距离,因为float 的特性,使得div们之间紧紧粘连,第一个盒子左移动一像素,第二个盒子紧紧粘连,第二个盒子左移一像素就压上了第一个盒子,以此类推.加强版效果中,还是有些问题,div的右边被其右边盒子压住了,在hovers时候 效果有bug.继续尝试用position解决

加强版效果

加强版效果

步骤分析 : 3.完全版搭建

为了解决步骤2 的问题,采用了相对定位的方式,占位置,但是相对于原来浮动在上面.利用 z-index属性决定谁在最上面

    div {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        float: left;
        margin-left: -1px;
        position: relative;
        z-index: 0;
    }
    div:hover {
        border: 1px solid #f40;
        position: relative; /*相对定位比标准流高一级 浮在上面的*/
        z-index: 1;
    }

二 : 图片底边三像素距离

图片会默认与文字基线对其,加入没有文字图片默认会与父盒子基线对齐,会导致撑开的盒子与图片底部有几像素的距离,为了解决这个问题我们利用了vertical-align 这个属性
或者把图片变成block

把 vertical-align 设置成top/middle/bottom 只要不是base就可以

三 : 滑动门

滑动门

要实现上述自动拉伸滑动门效果,其只要原理就是利用了,精灵图原理,取头和尾,其余的自适应文字.

    
    
    


    

        

            

                
                    雪芙
                
            
            

                
                    不知火舞
                
            
            

                
                    春丽美少女
                
            
            

                
                    梦瑶
                
            
            

                
                    嘻嘻嘻嘻嘻
                
            
        
    

四 : 所有的float默认与上边缘对齐

盒子默认是左上角一次排开

效果

效果

五 : 图片设置宽度,等比例拉伸

高度跟宽度自动缩放,在图片的适配中,一般把宽或者高度设置为100%,另一项则设置为auto.

 img{
    width: 100%;
    height: auto;
}

六 : a 行内或者行内块无法被img撑起来

    
    
    



    




美丽的紫琪 没有把 a 元素撑起来

效果

要想 a 元素被撑起来则 a 设置成block即可

七 : 图片嵌套裁剪问题

实现效果 :

预期效果

如何实现让四周留白,而且很简单,不用一个一个设置border呢,有一个简单的方法,祖父盒子嵌套->父亲盒子->子盒子.
很简单在子盒子中正常设置border,在父盒子给其足够大的排列空间,让布局达到预期的排列效果,祖父盒子相当于一把手术刀,裁减掉多余的比分即可.