最近由于新學css，實踐經驗又太少了，對盒子模型的內外邊距實在很難有形象的想象和理解，糾結了很久。。。

今天發現了一個好辦法輔助布局時看到盒子的實際大小和位置，在此記錄：

如例圖（妙味課堂的例子）：

css代碼是這樣：

.top_menu li { float:left; /*左浮動，靠左側*/background:url(../images/top_ico.png) no-repeat right 14px; /*背景圖片，不平鋪，水平方向靠每個li容器右側，垂直方向向下14像素*/font-size:13px; /*文字大小13像素*/line-height:30px; /*行高30像素*/padding-right:18px; /*li容器內部文字距離容器右側18像素*/margin-right:15px; /*右外邊距*/}

查看盒子方法，加邊框！！

結果：

css代碼：

.top_menu li { float:left; /*左浮動，靠左側*/background:url(../images/top_ico.png) no-repeat right 14px; /*背景圖片，不平鋪，水平方向靠每個li容器右側，垂直方向向下14像素*/font-size:13px; /*文字大小13像素*/line-height:30px; /*行高30像素*/padding-right:18px; /*li容器內部文字距離容器右側18像素*/margin-right:15px; /*右外邊距*/border-style: solid ;/*輔助查詢盒子大小*/border-color:green;}

　　

?

轉載于:https://www.cnblogs.com/wwHww/p/9023207.html

總結

以上是生活随笔為你收集整理的新技能get!判断盒子的实际大小及位置。。。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。