2020-10-05

一,IE6盒子模型与W3C盒子模型 有什么区别

1.content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。(W3C盒子模型)
2.border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。(IE6盒子模型)

示例图片(网图)

W3C:

2020-10-05

IE6:

2020-10-05

 代码实例:

<style>

         .div1 {

            width: 100px;

            height: 80px;

            border: 10px solid #000;

            padding: 20px; background-color: red;

            margin: 50px;

}

</style>

解释:这个盒模型,如果用标准W3W盒子模型解释那么这个盒子需要占据的位置为:
宽:100+20*2+10*2+50*2=260px 高:80+20*2+10*2+50*2=240px
盒子的实际大小为:
宽:100+20*2+10*2=160px 高:80+20*2+10*2=140px

解释:这个盒模型,如果用IE盒子模型解释那么这个盒子需要占据的位置为:
宽:100+50*2=200px 高:80+50*2=180px
盒子的实际大小为:
宽:100px 高:80px

二、图片的局部放大(放大镜)

$(function(){

               $(.jqzoom).jqueryzoom({

                         xzoom:300,

                         yzomm:300,

                        offset:0,

                        position:"right",

                        preload:1

                   });

})

2020-10-05