99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要介紹css盒模型有多少種，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的彭山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

那么CSS模型有什么認(rèn)識的呢？

首先，css盒模型有幾種呢？兩種。

1、標(biāo)準(zhǔn)模型   2、IE模型

先來說說這兩種盒模型的區(qū)別在哪里，看圖說話：

標(biāo)準(zhǔn)模型與IE模型最大的區(qū)別在于兩者計算方式的不同，標(biāo)準(zhǔn)盒模型的高寬就是content的高寬度。而IE模型的高寬的計算是包含padding與border的寬高在內(nèi)的。在設(shè)置時我們可以通過設(shè)置box-sizing來達到對兩者的區(qū)分。

box-sizing的值

content-box：標(biāo)準(zhǔn)盒模型。

border-box：IE盒模型。

那么什么時候要用到IE盒模型呢？筆者的感覺用到的地方不多，但是有一種情況就很需要。當(dāng)在設(shè)置一個元素hover上去后給它增加邊框，如果這個時候采用的標(biāo)準(zhǔn)盒模型則會出現(xiàn)樣式的錯亂，觀感就是

元素被硬生生的擠進去了一個1px的邊框很不美觀。然而設(shè)置box-sizing:border-box可以很好的解決這個問題。

其次，利用js如何來獲取一個元素寬高呢？

我們先把方法甩出來再來講區(qū)別。

document.getElementById('id').style.width/height :只限于獲取內(nèi)聯(lián)樣式取得寬高。

document.getElementById('id').currentStyle.width/height:可以獲取瀏覽器及時渲染后的寬高，這個方法更準(zhǔn)確但是只能支持IE。（既要準(zhǔn)確又要大家都能用看下面這個方法）

window.getComputedStyle(dom).width/height:這個方法可以兼容chrome與firefox瀏覽器。

document.getElementById('id').getBoundingClientRect().width/height:該方法也可以及時拿到元素的寬高，計算一個元素的絕對位置并且同時拿到top、left、width、height四個值。

說到css盒模型就必須要引出BFC這個概念（塊級格式化上下文），關(guān)于這一部分內(nèi)容網(wǎng)上有更詳細(xì)的介紹我就不再這里重復(fù)造輪子了，只是簡單提一下。

BFC的原理

1、在BFC這個元素的垂直方向的邊距會發(fā)生重疊。

2、BFC的區(qū)域不會與浮動元素的BOX重疊。

3、BFC是一個獨立的容器，外面的元素不會影響里面的元素。

4、計算BFC高度的時候浮動元素也會參與計算。

如何創(chuàng)建BFC

1、overflow:hidden、auto;

2、float的值不為none;

3、position的值不為默認(rèn)或者是realative

4、display:inline-block、table-cell、table

以上是“css盒模型有多少種”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：css盒模型有多少種
文章來源：http://www.ef60e0e.cn/article/iioijj.html