.box { width: 100px; height: 100px; background: red;}
.bd { width: 100%; padding: 10px; background: black;}
<div class="box"><div class="bd"></div> </div> 如上结构,子元素将会溢出 解决方法:CSS3:
加入box-sizing:border-box;属性即可解决
一般的方法:父元素设置padding
例:
<div class="box" style="padding-right: 20px;"><div class="bd"></div></div>
.container .block{ position: absolute; width: 33.3333%; height: 280px; transition: all 0.3s; } .container .block .item{ position: absolute; top: 0; left: 0; padding: 6px; box-sizing:border-box;
添加box-sizing:border-box; width: 100%; height: 100%; transition: all 1.2s; z-index: 1; opacity: 1; transform: scale(1, 1); }