一天搞定CSS：盒模型content、padding、border、margin--06
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：盒模型content、padding、border、margin--06
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.盒模型
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。2.盒模型分為：標準盒模型和非標準盒模型
當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標簽，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!DOCTYPE HTML>以上幾種DOCTYPE都是標準的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。
兩者區別：計算寬高的方式不一樣
1）標準盒模型：除IE以外的所有瀏覽器都是標準盒模型
width=content的寬；
height=content的高；
2）非標準盒模型：又稱怪異盒模型，只有IE是使用該模型
width=content的寬+padding*2+border*2；
height=content的高+padding*2+border*2；
3.盒模型體系
4.盒模型詳細說明
5.熟練盒模型：做一個如下效果圖
代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.box1{border:dotted;margin:0px auto;padding:25px;width:350px;}.box2{border:5px solid blue;padding:20px}.box3{background:#ffa0df;padding:48px;}.box4{border:1px dotted white;padding:5px;}.box5{border:1px dotted white;padding:40px;}.box6{width:100px;height:100px;border:5px solid yellow;background:greenyellow;}</style></head><body><div class="box1"><div class="box2"><div class="box3"><div class="box4"><div class="box5"><div class="box6"></div></div></div></div></div></body> </html>總結
以上是生活随笔為你收集整理的一天搞定CSS：盒模型content、padding、border、margin--06的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：文本text--05
- 下一篇： 【小练习01】CSS--PS提示框制作