CSS3盒模型
CSS有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型， 定義了Web頁面中的元素是如何看做盒子來解析的。 每一個(gè)盒子有不同的展示界面， 在 CSS 中 主要有以下幾種盒模型： inline、inline- block、block、table、absolute，position、float。 瀏覽器把每個(gè)元素看 一個(gè)盒模型， 每一個(gè)盒模型是由以下幾個(gè)屬性組合所決定的： display、position、float、width、height、margin、padding和border等， 不同類型的盒模型會(huì)產(chǎn)生不同的布局。
什么是盒模型？
CSS中每一個(gè)元素都是一個(gè)盒模型，包括HTML和body標(biāo)簽元素。在平時(shí)設(shè)計(jì)中，大家對(duì)content、padding、margin、background和border來說一定不會(huì)陌生了， 因?yàn)楹心Ｐ投季邆溥@些屬性。 其中width、height、border、background、padding和margin之間的層次關(guān)系和相互影響，可以 看出 padding、content、 background-image、background-color，它們四者構(gòu)成了Z軸（ 垂直屏幕的坐標(biāo)） 多重層疊關(guān)系。 但是border與margin、padding三者之間應(yīng)該是平面上 的并級(jí)關(guān)系，并不能構(gòu)成Z軸的層疊關(guān)系。
在CSS中盒模型被分為兩種：第 一種 是 W3C 的 標(biāo)準(zhǔn) 模型。另一種 是 IE 的 傳統(tǒng) 模型。
它們相同之處都是對(duì)元素計(jì)算尺寸的模型，具體說就是對(duì)元素的width、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系，不同之處是兩者的計(jì)算方法 不一致。

10多年品牌的成都網(wǎng)站建設(shè)公司,上1000+企業(yè)網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn).價(jià)格合理,可準(zhǔn)確把握網(wǎng)頁設(shè)計(jì)訴求.提供定制網(wǎng)站建設(shè)、商城建設(shè)、微信小程序開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等服務(wù),我們?cè)O(shè)計(jì)的作品屢獲殊榮,是您值得信賴的專業(yè)網(wǎng)站制作公司。

1. W3C的標(biāo)準(zhǔn)盒模型。
2. http:/ /www.iis7.com/b/plc/
   外盒尺寸計(jì)算（元素空間尺寸）
   element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
   element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距內(nèi)盒尺寸計(jì)算（ 元素大小）
   element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）
   element 寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）
3. IE傳統(tǒng)下盒模型（ IE6以下，不包含IE6版本或QuirksMode下IE5.5+）。
   外盒尺寸計(jì)算（ 元素空間尺寸）
   element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   內(nèi)盒尺寸計(jì)算（ 元素 大小）
   element高度＝內(nèi)容高度（ height 包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   element寬度＝內(nèi)容寬度（ width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   為了解決這種問題， CSS3增添 了 一個(gè)盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式，box- sizing 的 屬性 值 主要 有 以下 三個(gè)：
   1· content-box： 默認(rèn)值， 讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度和高度（ width/ height） 等于元素邊框?qū)挾龋?border） 加上元素內(nèi)距（ padding） 加上元素內(nèi)容寬度或高度（ content width/ height），也就是 element width/ height=border+padding+content width/ height。
   2· border-box： 此值會(huì)重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（ IE6以下版本和IE6～7怪異模式）。元素的寬度或高度等于元素 內(nèi)容的寬度或高度。 從盒模型介紹可知， 這里的內(nèi)容寬度或高度包含了元素的border、padding、內(nèi)容的寬度或高度（ 此處的內(nèi)容寬度或高度＝盒子的寬度或 高度-邊框-內(nèi)距）。
   3· inherit：此值使元素繼承父元素的盒模型模式。 box-sizing屬性主要用來控制元素的盒模型的解析模式， 其主要目的是控制元素的總寬度。 在W3C規(guī)范中， 元素的box-sizing默認(rèn)屬性值是content-box 值， 如果不顯式重置box-sizing屬性值為border-box， 才能明確對(duì)元素設(shè)置一個(gè)總寬度。在這種情況之下會(huì)使 頁面布局更加方便。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：CSS3盒模型-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article16/dghodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)