溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS盒子模型的種類區別有哪些”，在日常操作中，相信很多人在CSS盒子模型的種類區別有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS盒子模型的種類區別有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型分兩種： ie 盒子模型和標準 w3c 盒子模型。
ie 盒子模型的范圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，
假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；
假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。
盒子模型的選定：
怎么樣才算是選擇了“標準 w3c 盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明<!DOCTYPE html>。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
PS：CSS中margin和padding的區別
在CSS中margin是指自身邊框到自身外部另一個容器邊框之間的距離，就是容器外距離；padding則是容器內距離。
一、padding
1、語法結構
（1）padding-left:10px; 左內邊距
（2）padding-right:10px; 右內邊距
（3）padding-top:10px; 上內邊距
（4）padding-bottom:10px; 下內邊距
（5）padding：10px; 四邊統一內邊距
（6）padding:10px 20px; 上下、左右內邊距
（7）padding:10px 20px 30px; 上、左右、下內邊距
（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距
2、可能取的值
（1）length 規定具體單位記的內邊距長度
（2）% 基于父元素的寬度的內邊距的長度
（3）auto 瀏覽器計算內邊距
（4）inherit 規定應該從父元素繼承內邊距
3、瀏覽器兼容問題
（1）所有瀏覽器都支持padding屬性
（2）任何版本IE都不支持屬性值“inherit”
到此，關于“CSS盒子模型的種類區別有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
