javascript - 移動(dòng)端padding問題
問題描述
在學(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也是如此
問題解答
回答1:第一個(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的寬度了
回答3:你這情況肯定還有橫向的滾動(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è)屏幕尺寸?
回答4:現(xiàn)在設(shè)置的設(shè)備的分辨率是?
相關(guān)文章:
1. python執(zhí)行cmd命令,怎么讓他執(zhí)行類似Ctrl+C效果將其結(jié)束命令?2. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)3. node.js - 微信小程序websocket連接問題4. Python從URL中提取域名5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. Python中使用超長的List導(dǎo)致內(nèi)存占用過大7. python - Django有哪些成功項(xiàng)目?8. python - scrapy url去重9. 數(shù)據(jù)庫 - Mysql的存儲(chǔ)過程真的是個(gè)坑!求助下面的存儲(chǔ)過程哪里錯(cuò)啦,實(shí)在是找不到哪里的問題了。10. 鏈接圖片時(shí),鏈接不成功
