問題描述

在學(xué)習(xí)vue.js的時(shí)候，遇到這樣奇怪的現(xiàn)象當(dāng)我設(shè)置width:375px padding: 0 22px 0 12px如下顯示

可以看到左邊留有空白，右邊沒有

控制臺(tái)顯示

完整css

.bulletin-wrapperwidth: 375pxheight: 28pxline-height: 28pxpadding: 0 22px 0 12pxwhite-space: nowrapoverflow: hiddentext-overflow: ellipsis

為什么當(dāng)設(shè)置width為375px（iPhone6）左邊的padding可以顯示，右邊卻沒有，不是已經(jīng)設(shè)置滿寬度了？，事實(shí)上padding改為margin也是如此

問題解答

第一個(gè)截圖是iPhone6的截圖，第二個(gè)截圖是把寬度增加以后的截圖，由圖二可知，兩邊的padding設(shè)置都是正確的，只不過是p元素的父元素的寬度小于12px+375px+22px，所以后面的padding和省略號(hào)的部分看不見而已。

p元素是塊元素，默認(rèn)會(huì)填充父元素，所以如果不是有特殊需求，你這的width: 375px;是不是可以刪除。去掉width屬性后的截圖如下。

iPhone6的寬度就是375，你看你的box的圖，內(nèi)容寬度375，再加上padding，肯定超過了屏幕寬度，當(dāng)然只能看到左邊的padding設(shè)置box-sizing:border-box后，width設(shè)的寬度就會(huì)是內(nèi)容寬度+padding的寬度了

你這情況肯定還有橫向的滾動(dòng)條，你試下左右拖動(dòng)下就知道了，如果屏幕是375，你設(shè)置了寬是375，padding: 0 22px 0 12px,實(shí)際上寬度是409。你加上box-sizing:border-box;這個(gè)css屬性吧，加上之后，寬度就包括padding和border了，就正常了，比如寬度設(shè)置是375，padding: 0 22px 0 12px,實(shí)際上，寬度是341（375-22-12）;PS：我有一個(gè)不理解，上面那個(gè)樣式是編譯計(jì)算出來的，還是你寫的？如果是你寫的，難道手機(jī)網(wǎng)站，你只適配375這個(gè)屏幕尺寸？

現(xiàn)在設(shè)置的設(shè)備的分辨率是?