溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS盒模型如何實現網頁寬度和高度設計”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS盒模型如何實現網頁寬度和高度設計”這篇文章吧。
用CSS盒模型原理設計網頁的寬度和高度
當我們設計布局一個網頁的時候，經常會碰到這樣的一種情況，那就是最終網頁成型的時候寬度或者高度會超出我們預先的設計大小，其實這種現象就是所謂的CSS的盒模型造成的。
#test{margin:10px;padding:10px;width:100px;height:100px;}如上一段的代碼，很多時候我們會把它所占的位置計算成width:120px，height:120px，因為在正常的理解下，padding是內邊距，應該是包括在width里面的，而margin是外邊距，所以width＝margin-left+margin-right+width，但是瀏覽器對于CSS盒模型的解釋卻并非如此，所以最終我們會發現布局出來的網頁寬度與高度都會超出我們預期的計算，***造成顯示上的錯位。
◆其實不然，對于test所占的位置的真正計算應該是width=margin-left+margin-right+padding-left+padding-right+width，也就是寬度真正所占的大小應該是內邊距+外邊距+寬度本身，也就是說test真正的大小應該是140px才對。高度的計算與寬度的計算是一樣的。
◆而如果給test加上邊框的話，這個寬度與高度的算法還應該加上邊框的大小。
#test{margin:10px;padding:10px;border:5px; width:100px;height:100px;}這里的test的寬度就應該是外邊框+內邊框+邊框+寬度本身，所以test的width是150px。
如下圖所示，width與height真正所占的位置并不是它本身的那一小塊，而應該是一直到最外面深藍色的那個層為止。
以上是“CSS盒模型如何實現網頁寬度和高度設計”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
