盒模型的定義
html元件中呈現一片空白區域的元件都可以當成盒模型,比如盒模型的分類一般來說盒模型分為兩種 一種為等標籤 css提供了display屬性來控制盒模型的外觀
block盒模型:允許通過css來設定高度,寬度 自成一行 例如標籤這些就是block盒模型
另一種就是inline盒模型:不允許通過css來設定高度,寬度 不自成一行 例如標籤這些就是inline盒模型
盒模型的驗證
lang="en">
charset="utf-8">
titletitle>
div,span
style>
head>
我愛html5div>
我愛html5div>
我愛html5span>
我愛html5span>
body>
html>我們標籤div span都設定高度 寬度 邊框線 但顯示出來卻能證明一切
顯示div的寬度 高度設定成功了 而span的寬度 高度設定並未起作用 這充分說明了兩種盒模型的差別 當然我們可以通過display屬性改寫物件對應的盒模型
lang="en">
charset="utf-8">
titletitle>
div,span
span
style>
head>
我愛html5div>
我愛html5div>
我愛html5span>
我愛html5span>
body>
html>效果如下:
把標籤span設定成block盒模型 標籤span也自成一行 高度 寬度也都設定通過了
這裡我們可以繼續操作 把div通過display屬性改寫成inline盒模型
lang="en">
charset="utf-8">
titletitle>
div,span
span
divstyle>
head>
我愛html5div>
我愛html5div>
我愛html5span>
我愛html5span>
body>
html>end！！！！！！！！！！！！
標準盒模型和IE盒模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...
正常盒模型和怪異盒模型
首先大概說說正常盒模型和怪異盒模型的區別 1.用途 正常盒模型主要用於pc端，怪異盒模型主要用於手機端。2.原理 正常盒模型的大小是由內到外的，由內部決定外部的大小 而怪異盒模型是由外而內的。舉例說明 以下為正常盒模型，設定兩個div，分別為鞋盒和鞋子 鞋子 鞋子 設定樣式如下 body div c...
1 盒模型和怪異盒模型
標準盒模型 一 標準盒模型模擬 當我們在學習h5前端的時候，首先應該了解的是盒模型的結構，這樣在寫頁面的時候才不會結構不清除，導致屬性設定起來不明白，只是試出來，卻不懂底層的原理。首先可以先在html中寫個div，然後給div加上width，height background 設定好之後在谷歌瀏覽器...