盒子模型掃盲

2021-09-12 05:47:45 字數 674 閱讀 9362

簡單地說每個html標籤都是乙個方塊,然後這個方塊又包著幾個小方塊。分別是:margin、border、padding、content。

w3c標準的盒模型:width == content_width(不包括padding+border+margin)

ie怪異盒模型: width == content_width+padding+border

tips:在ie8+瀏覽器中使用哪個盒模型可以由box-sizing控制,預設值為content-box,即標準盒模型;

static

一般如果我們不設定position的話它的預設值就是static,這個時候left、top、bottom、right是不起作用的

z-index對static也不起作用

relative

使用相對定位給元素加left/top/right/buttom元素會以原來的位置為基礎加上這些值,即以原來的位置為基礎定位,並且沒有脫離文件流

absolute

元素已經脫離文件流,元素位移的參考不再是原來的位置而是body。

fixed

相對於瀏覽器視窗進行定位

inherit

從父元素繼承

盒子模型與怪異盒子模型

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

html盒子模型 jquery盒子模型

最近學了jquery的盒子模型之後,感覺真的顛覆我之前對盒子模型的看法,我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件,那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...