在没设置box-sizing之前 设置padding背景灯笼和文字一起向下移动了，为什么设置了box-sizing之后只有文字移动，而图片没动？
来源：3-5 移动端项目开发--表示层（page1）
点点圈圈错错真真
2016-12-02 09:18
在没设置box-sizing之前 设置padding-top灯笼和文字一起向下移动了，为什么设置了box-sizing之后只有文字移动，而图片没动？
写回答
关注
3回答
-
- 慕粉184929853
- 2017-04-04 23:17:48
border-box说明你定义的宽度是border+padding+content，所以包含文字的这块content会下移。而background是第三层，包含padding和content的，所以灯笼就不下移。
-
- 夜空中最亮de星
- 2016-12-02 12:01:23
width: 45vw;
height: 47.2vh;/*原来高度-内边距*/
z-index: 0;
font-size: 3.506rem;
color: #fff;
text-align: center;
position: absolute;
top: -2%;
right: 0;
left: 0;
margin: auto;
background: url(../img/p1_lantern.png) no-repeat center bottom;
background-size: 100%;
padding-top: 24vh;
-
- 夜空中最亮de星
- 2016-12-02 11:59:54
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
这个兼容性不好，所以我没用。我用的高度减去 内边距的高度。
HTML5+CSS3实现春节贺卡
又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡
110057 学习 · 450 问题
相似问题