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:
IE6:
代码实例:
<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
});
})