在沒設置box-sizing之前 設置padding背景燈籠和文字一起向下移動了，為什么設置了box-sizing之后只有文字移動，而圖片沒動？
在沒設置box-sizing之前 設置padding-top燈籠和文字一起向下移動了，為什么設置了box-sizing之后只有文字移動，而圖片沒動？
3 回答
舉報
0/150
提交
取消
在沒設置box-sizing之前 設置padding-top燈籠和文字一起向下移動了，為什么設置了box-sizing之后只有文字移動，而圖片沒動？
2016-12-02
舉報
2017-04-04
border-box說明你定義的寬度是border+padding+content，所以包含文字的這塊content會下移。而background是第三層，包含padding和content的，所以燈籠就不下移。
2016-12-02
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;
2016-12-02
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。
這個兼容性不好，所以我沒用。我用的高度減去 內邊距的高度。