国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

盒子模型的理解

xiangzhihong / 2901人閱讀

摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。盒子模型是中一個(gè)重要的概念，理解了盒子模型才能更好的排版。標(biāo)準(zhǔn)盒子模型從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分。

概述

網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。

這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子)上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。

CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是 ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對(duì)盒子模型的解釋各不相同。

標(biāo)準(zhǔn)盒子模型

從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：一個(gè)容器的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個(gè)容器需要占據(jù)的位置為：寬20*2+1*2+10*2+200=262px、高 20*2+1*2+10*2+50=112px，盒子的實(shí)際大小為：寬1*2+10*2+200=222px、高1*2+10*2+50=72px；假如用ie 盒子模型，那么容器需要占據(jù)的位置為：寬20*2+200=240px,高20*2+50=90px,盒子的實(shí)際大小為：寬 200px、高 50px。

在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

1、提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。
2、提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于多帶帶的邊。
3、提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。
瀏覽器兼容性

一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。
雖然有方法解決這個(gè)問題。但是目前最好的解決方案是回避這個(gè)問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

那我們開發(fā)的時(shí)候選擇哪中盒子模型呢？
肯定是“標(biāo)準(zhǔn) w3c 盒子模型”。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c 盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁，即 ie 瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子，而 ff 會(huì)采用標(biāo)準(zhǔn) w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) w3c 盒子模型去解釋你的盒子，網(wǎng)頁就能在各個(gè)瀏覽器中顯示一致了。
所以為了讓網(wǎng)頁能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型。

CSS3 box-sizing 屬性 定義和用法

box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。
當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用*標(biāo)準(zhǔn)模式*解析計(jì)算，也是默認(rèn)模式；
當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用*怪異模式*解析計(jì)算；
目前使用此屬性需要前綴如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器以怪異模式呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

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

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

相關(guān)文章

  • 盒子模型的理解

    摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。盒子模型是中一個(gè)重要的概念，理解了盒子模型才能更好的排版。標(biāo)準(zhǔn)盒子模型從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分。 概述 網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。 這些屬性我們可以把它...

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

  • 「前端早讀君」css進(jìn)階之徹底理解視覺格式化模型

    摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。匿名塊盒子在某些情況下進(jìn)行視覺格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項(xiàng)目。 今日勵(lì)志 不論你在什么時(shí)候開始，重要的是開始之后不要停止。 前言 對(duì)于部分前端工程師來講，有時(shí)候CSS令他們很頭疼，明明設(shè)置了某個(gè)樣式，但是布局就是不起作用。 showImg(htt...

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

  • 從CSS盒子模型說起

    摘要：前言總括對(duì)于盒子模型，，和外邊距合并等概念和問題的總結(jié)原文地址從盒子模型說起知乎專欄前端進(jìn)擊者博主博客地址的個(gè)人博客為學(xué)之道，莫先于窮理窮理之要，必先于讀書。 前言 總括： 對(duì)于盒子模型，BFC，IFC和外邊距合并等概念和問題的總結(jié) 原文地址：從CSS盒子模型說起 知乎專欄：前端進(jìn)擊者 博主博客地址：Damonare的個(gè)人博客 為學(xué)之道，莫先于窮理；窮理之要，必先于讀書。 正文 ?...

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

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

0條評(píng)論

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