成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

我理解的css盒模型以及使用場(chǎng)景

icyfire / 1423人閱讀

摘要：在中我們可以通過(guò)設(shè)置的屬性來(lái)完成標(biāo)準(zhǔn)或者怪異模式之間的切換。設(shè)為之后，和的厚度可以隨意調(diào)，并不會(huì)溢出父元素。

- css盒模型是什么
網(wǎng)頁(yè)設(shè)計(jì)中css技術(shù)所使用的一種思維模型

- 盒模型的組成

- 盒模型的兩種標(biāo)準(zhǔn)（在不考慮css3的情況下）


兩種模型唯一的差異就在元素寬高度的定義
w3c標(biāo)準(zhǔn)模型的 元素寬高＝內(nèi)容（content）的寬高
IE模型的 元素寬高＝內(nèi)容（content）＋填充（padding）＋邊框 （border） 的總寬高

在html頭部有一個(gè)聲明，瀏覽器會(huì)根據(jù)這個(gè)聲明來(lái)判斷文件是什么類(lèi)型的，也會(huì)根據(jù)這個(gè)聲明來(lái)解析文件

當(dāng)我們寫(xiě)了doc聲明的時(shí)候，無(wú)論哪種內(nèi)核的瀏覽器都會(huì)解析為標(biāo)準(zhǔn)模型，元素寬度＝content的寬度，即當(dāng)我們?cè)O(shè)置width：100px的時(shí)候，這個(gè)寬度指的就只是content的寬度
總寬度＝我們?cè)O(shè)置的width＋padding＋border

當(dāng)頭部的doc聲明缺失的時(shí)候，部分ie內(nèi)核的瀏覽器則會(huì)觸發(fā)ie模式 即怪異模式（ie6，7，8）width＝content＋padding＋border
總寬度＝width

- 為什么會(huì)出現(xiàn)不同模型

當(dāng)年微軟的IE瀏覽器占據(jù)超過(guò)80%市場(chǎng)份額的時(shí)候，想自己獨(dú)立制定一套瀏覽器標(biāo)準(zhǔn)，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他們遵循的是W3C的標(biāo)準(zhǔn)來(lái)定制瀏覽器，也就造成了現(xiàn)在瀏覽器不同的CSS盒模型，但是仍有很多老網(wǎng)站采用的是老IE的標(biāo)準(zhǔn)(怪異模式)，因此很多瀏覽器保留了IE的怪異模式。

- box-sizing
在CSS3中我們可以通過(guò)設(shè)置 box-sizing的屬性來(lái)完成標(biāo)準(zhǔn)或者怪異模式之間的切換。

（1）box-sizing ： content-box 采用標(biāo)準(zhǔn)模式 也是默認(rèn)樣式

（2）box-sizing： border-box 采用ie怪異模式

- content-box的缺點(diǎn)
目前任何瀏覽器默認(rèn)使用的都是content-box，但是這個(gè)內(nèi)容盒子有一個(gè)缺點(diǎn)，舉個(gè)栗子
假設(shè)我們想要兩個(gè)子容器float:left，寬度各50%，然后給一點(diǎn)padding，最后讓子容器并排充滿(mǎn)父容器，代碼如下




  
  Title
  




  
left-box

  
right-box

我們?cè)跒g覽器中運(yùn)行之后發(fā)現(xiàn)，想象的很美好 結(jié)果卻并不美好，因?yàn)閮蓚€(gè)子元素寬度超過(guò)了50%，導(dǎo)致了折行，于是寬度就不能設(shè)置為50%了，只能將寬度減去padding的值，在這種時(shí)候，border-sizing就派上用場(chǎng)了

了解border-sizing
border-sizing是css3新增的聲明，很多開(kāi)發(fā)者可能都不曾用過(guò)，既然標(biāo)準(zhǔn)模型誕生的早，又叫標(biāo)準(zhǔn)模型，為什么還要出現(xiàn)border-sizing呢

border-sizing的優(yōu)點(diǎn)
border-sizing的誕生就是為了解決content-sizing的缺點(diǎn)，border－sizing意味著子容器的padding和border厚度都算在50%內(nèi)，這樣你就可以隨意修改padding和border的值，而不用擔(dān)心父容易被撐爆

border-sizing的兼容性
ie8也支持該屬性，所以不用擔(dān)心兼容性問(wèn)題

border-box的使用場(chǎng)合
目前最流行的css框架幾乎都采用了border－sizing，框架想要具備柵格系統(tǒng)，肯定要用border－sizing
通常情況下 你只需要在必須使用border－sizing元素的身上使用這個(gè)屬性，其他元素都保持content－sizing就好了

子元素有padding和border，或者至少有其一，并且需要給子元素設(shè)定100%寬度（或者50%寬度等等），這時(shí)候顯然需要border-box。設(shè)為border-box之后，padding和border的厚度可以隨意調(diào)，并不會(huì)溢出父元素。如果是content-box，那么，寬度必然會(huì)溢出，而且，為了不溢出，你設(shè)定子元素的寬度就只能是一個(gè)定值，或者是一個(gè)計(jì)算值（比如calc(100%- 20px)）。

由于之前一直對(duì)于css盒模型的理解模棱兩可，所以最近趁有時(shí)間查了很多相關(guān)文章，歸納了以上內(nèi)容終于搞懂了這個(gè)難啃的骨頭，參考的資料有以下幾篇文章，感興趣的可以自己查閱，由于自己也是邊理解邊總結(jié)的內(nèi)容，如果文章中有什么不對(duì)的地方還請(qǐng)大家指正。
https://blog.csdn.net/qq_3190...
https://www.cnblogs.com/cheng...
https://www.jianshu.com/p/006...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117385.html

相關(guān)文章

  • 深入理解盒模型與BFC

    摘要：標(biāo)準(zhǔn)盒模型與盒模型開(kāi)發(fā)者們都知道，由于歷史遺留問(wèn)題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個(gè)盒模型的差異之前，我們先來(lái)看一張圖先不討論寬高，我們把一個(gè)元素的組成分為。 標(biāo)準(zhǔn)盒模型與IE盒模型 開(kāi)發(fā)者們都知道，由于歷史遺留問(wèn)題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，...

    gself 評(píng)論0 收藏0

  • CSS常見(jiàn)問(wèn)題小結(jié)

    摘要：常見(jiàn)問(wèn)題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁(yè)面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁(yè)面不夠純凈，文件體積過(guò)大不利于，后期維護(hù)成本高。 CSS常見(jiàn)問(wèn)題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)；比如： 一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋 在制作頁(yè)面的時(shí)...

    ivyzhang 評(píng)論0 收藏0

  • 【前端芝士樹(shù)】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問(wèn)題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問(wèn)題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁(yè)。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開(kāi)始，一步步涉及一些常見(jiàn)的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...

    binta 評(píng)論0 收藏0

  • CCS 盒模型分析

    摘要：基本概念頁(yè)面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是。分類(lèi)盒模型有兩種，標(biāo)準(zhǔn)盒模型和盒模型。 基本概念 頁(yè)面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。html 標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是 content, padding, border, margin 。 showImg...

    Jochen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<