div设置width为200%,为什么实际宽度会少一点 35
div的宽度设置为200%,padding,margin,border全部设置为0,为什么div实际宽度会比200%少;...
div的宽度设置为200%,padding,margin,border全部设置为0,为什么div实际宽度会比200%少;
展开
1个回答
展开全部
div的宽度百分比是相当于父级而定的,假如父级div宽度是100px,那么子级设定200%就会是200px;
例:
<div style="width:200px; height:80px; padding-top:20px; background:black;">
<div style="width:200%; height:60px; background:red;"></div>
</div>
如果父级设置了左右方向的padding内边距的话,父级宽度设置100px的,那么子级设置百分比的宽度也还是200px,但是从视觉上去看子级会短一些,其实只是父级显示的宽度大了而已,
例:
<div style="width:200px; height:80px; padding:20px 50px 0px 50px; background:black;">
<div style="width:200%; height:60px; background:red;"></div>
</div>
这里你就需要了解padding属性的特性,加了padding的div的显示宽度是div所设置宽度+padding左右值的和;假如div设置了宽度为100px,然后又设置了padding:0 30px;那么div显示的宽度将为160px;
例:
<div style="width:200px; height:80px; padding-top:20px; background:black;">
<div style="width:200%; height:60px; background:red;"></div>
</div>
如果父级设置了左右方向的padding内边距的话,父级宽度设置100px的,那么子级设置百分比的宽度也还是200px,但是从视觉上去看子级会短一些,其实只是父级显示的宽度大了而已,
例:
<div style="width:200px; height:80px; padding:20px 50px 0px 50px; background:black;">
<div style="width:200%; height:60px; background:red;"></div>
</div>
这里你就需要了解padding属性的特性,加了padding的div的显示宽度是div所设置宽度+padding左右值的和;假如div设置了宽度为100px,然后又设置了padding:0 30px;那么div显示的宽度将为160px;
追问
亲,我做的效果是父div里包含一个子div,父div宽度100%,子div宽度200%,有两个按钮可以控制子div在父div里进行滑动切换,切换一次就可以显示子div的另一半。但是实际效果是子div的前半段显示正常,后半段比父div少了大约5px,父、子的padding,margin,border全部设置为0
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询