写HTML时测量字体和盒子具体把握方法

• 在盒子外划分盒子距离时用margin(外边距)
• 在盒子内划分盒子距离时用padding(内边距)

image.png

Snipaste_2018-08-09_01-55-06.png

image.png

• 部分代码:
• xxx.css

/*精品产品*/
.products{
    margin-top: 30px;

}
.pro-hd{
    height: 40px;
    position: relative;
}
.pro-hd h4{
    font-weight: normal;
    font-size: 18px;
}
.pro-hd a{
    position: absolute;
    top: 0;
    right: 20px;
}

.pro-bd li{
    width: 228px;
    height: 270px;
    background-color: pink;
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}

/*因为第五个li不需要 margin-right: 15px;  所以第五个 margin-right: 0;*/
.pro-bd li:nth-child(5n){
    margin-right: 0;
}

• xxx.html

    

        
        

            
精品推荐
            查看全部
        
        

            

                

                

                

                

                

                

                

                

                

                

            
        
    

image.png

image.png

图片动盒子也动

• 效果图:

  
  
  GIF4.gif

• 部分代码

• xxx.css

/*精品产品*/
.products{
    margin-top: 30px;

}
.pro-hd{
    height: 40px;
    position: relative;
}
.pro-hd h4{
    font-weight: normal;
    font-size: 18px;
}
.pro-hd a{
    position: absolute;
    top: 0;
    right: 20px;
}

.pro-bd li{
    width: 228px;
    height: 270px;
    overflow: hidden;  /*把图片超出部分隐藏*/
    background-color: #fff;
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all 0.5s;
}
.pro-bd li:hover{
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    /*margin-top: -10px;*/  /*不推荐*/
    transform: translateY(-10px);  /*transform变换后，原来的位置还占据空间 推荐用*/
}

/*因为第五个li不需要 margin-right: 15px;  所以第五个 margin-right: 0;*/
.pro-bd li:nth-child(5n){
    margin-right: 0;
}

/*给图片做动画*/
.pic img{
    transition: all 0.5s;
}
.pic img:hover{
    margin-left: -5px;
}
.pro-title{
    width: 185px;
    margin: 20px auto;
    font-size: 14px;
    color: #050505;
}
.pro-bd p{
    width: 185px;
    margin: 20px auto;
    color: #999999;
    font-size: 12px;
}
.pro-bd p span{
    color: #ff9159;
}

• xxx.html

    
    

        
        

            
精品推荐
            查看全部
        
        

            

                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习
                    
                
                

                    

                        
                    
                    

                        Think PHP 5.0 博客系统实战项目演练 
                    
                    

                        高级  •  1125人在学习