javascript - 移動端padding問題
問題描述
在學習vue.js的時候，遇到這樣奇怪的現(xiàn)象當我設置width:375px padding: 0 22px 0 12px如下顯示
可以看到左邊留有空白，右邊沒有
控制臺顯示
完整css
.bulletin-wrapperwidth: 375pxheight: 28pxline-height: 28pxpadding: 0 22px 0 12pxwhite-space: nowrapoverflow: hiddentext-overflow: ellipsis
為什么當設置width為375px（iPhone6）左邊的padding可以顯示，右邊卻沒有，不是已經(jīng)設置滿寬度了？，事實上padding改為margin也是如此
問題解答
回答1：
第一個截圖是iPhone6的截圖，第二個截圖是把寬度增加以后的截圖，由圖二可知，兩邊的padding設置都是正確的，只不過是p元素的父元素的寬度小于12px+375px+22px，所以后面的padding和省略號的部分看不見而已。
p元素是塊元素，默認會填充父元素，所以如果不是有特殊需求，你這的width: 375px;是不是可以刪除。去掉width屬性后的截圖如下。
iPhone6的寬度就是375，你看你的box的圖，內(nèi)容寬度375，再加上padding，肯定超過了屏幕寬度，當然只能看到左邊的padding設置box-sizing:border-box后，width設的寬度就會是內(nèi)容寬度+padding的寬度了
回答3：你這情況肯定還有橫向的滾動條，你試下左右拖動下就知道了，如果屏幕是375，你設置了寬是375，padding: 0 22px 0 12px,實際上寬度是409。你加上box-sizing:border-box;這個css屬性吧，加上之后，寬度就包括padding和border了，就正常了，比如寬度設置是375，padding: 0 22px 0 12px,實際上，寬度是341（375-22-12）;PS：我有一個不理解，上面那個樣式是編譯計算出來的，還是你寫的？如果是你寫的，難道手機網(wǎng)站，你只適配375這個屏幕尺寸？
回答4：現(xiàn)在設置的設備的分辨率是?
相關文章：
1. ddos - apache日志很多其它網(wǎng)址，什么情況？2. android - 百度地圖加載完成監(jiān)聽3. 這是什么情況？？？4. android - 百度地圖拖拽圖標后原來位置的圖標還在？5. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？6. css3 - 純CSS實現(xiàn)固定高度等分（等分個數(shù)不定）7. javascript - 百度地圖自己的產(chǎn)品可以精確定位，為什么我調(diào)用他的公開API卻必須經(jīng)過用戶同意才能獲取精確定位，而且還慢？8. html5 - 用html+css開發(fā)桌面軟件有什么好的解決方案（兼容XP系統(tǒng)）9. css - 為什么父級寬度固定且居中，但 input width: 100% 超出父級范圍10. objective-c - 使用axios 通過vuex mutation修改數(shù)據(jù) getter第一次獲取失敗 第二次成功
網(wǎng)公網(wǎng)安備