出處：當我們布局乙個網頁的時候，經常會遇到這樣的一種情況，那就是最終網頁成型的寬度或是高度會超出我們預先的計算，其實就就是所謂的css的盒模型造成的。
#test
如上一段的**，很多時候我們會把它所佔的位置計算成width:120px，heloxozkswight: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
這裡的test的寬度就應該是外邊框 內邊框 邊框 寬度本身，所以test的width是 150px。
如下圖所示，width與heiwww.cppcns.comght真正所佔的位置並不是它本身的那一小塊，而應該是一直程式設計客棧到最外面深藍色的那個層為止。
本文標題: css入門教程:計算css盒模型寬和高
本文位址: /web/css/26286.html
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...
CSS入門教程
一說學程式設計,大家都下意識覺得要 吃苦 熬夜 哪有那麼複雜,一定是你看錯了教程.這是我剛錄的教程,挑乙個陽光的午後,關掉手機,用6個小時,看看十八哥如何把乙個公司的保安教會html的.001.了解html 002.開發環境準備 003.認識html的組成結構 004.網頁布局之切切豆腐 005.c...