CSS網(wǎng)頁布局：盒子模型

Dr_Noooo 發(fā)布于2019-04-23 13:44 / 1973人閱讀

摘要：一盒子模型標(biāo)準(zhǔn)盒子模型盒子不論是標(biāo)準(zhǔn)盒模型還是盒子模型，都有四個(gè)部分組成，但從上圖也可以看出盒子和盒子主要區(qū)別在與寬度上的區(qū)別中的盒子模型的寬包括中的盒子模型的也包括上面的兩個(gè)寬度相加的屬性是一樣的。

一、盒子模型

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

不論是標(biāo)準(zhǔn)盒模型還是IE盒子模型，都有content、padding、border、margin四個(gè)部分組成，但從上圖也可以看出W3C盒子和IE盒子主要區(qū)別在與content寬度上的區(qū)別

w3c中的盒子模型的寬:包括margin+border+padding+width;

??? width:margin*2+border*2+padding*2+width;

??? height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的兩個(gè)寬度相加的屬性是一樣的。不過在ie中content的寬度包括padding和border這兩個(gè)屬性；

舉例說明的話：

例如一個(gè)盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解釋，那么這個(gè)盒子模型占用的

?寬度為：20*2+10*2+10*2+200=280px;

?高度：20*2+10*2+20*2+50=130px;

?盒子的實(shí)際寬度大小為:10*2+10*2+200=240px;

?實(shí)際高度：10*2+10*2+50=90px;

用ie的盒子模型解釋：盒子在網(wǎng)頁中占據(jù)的大小為20*2+200=240px; 高：20*2+50=90px;

盒子的實(shí)際大小為：寬度:200px, 高度:50px;

CSS3中增加了box-sizing屬性可用于調(diào)整盒子

box-sizing屬性可以為三個(gè)值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計(jì)算入width之內(nèi)? 默認(rèn)的標(biāo)準(zhǔn)盒子

padding-box，padding計(jì)算入width內(nèi)

border-box，border和padding計(jì)算入width之內(nèi)，其實(shí)就是IE盒子了

云服務(wù)器 GPU云服務(wù)器盒子模型 html盒子的布局 css布局 css布局教程

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

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

相關(guān)文章

H5多列布局

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評(píng)論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評(píng)論0 收藏0
《CSS世界》筆記一：流/元素/尺寸

摘要：一流體布局引出的幾種網(wǎng)頁布局方式布局方式描述特點(diǎn)場景靜態(tài)布局，傳統(tǒng)設(shè)計(jì)，網(wǎng)頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。下一篇：《CSS世界》筆記二：盒模型四大家族寫在前面初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時(shí)候除了工作，其他時(shí)間基本都在這本書里了，因?yàn)樗拇_吸引人。之前看過《CSS揭密》...

hizengzeng 2019-08-30 15:54 評(píng)論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動(dòng)如下圖缺點(diǎn)結(jié)構(gòu)不正確多了一層標(biāo)簽布局左欄中間右欄如下圖缺點(diǎn)兼容性問題參考文章 W3C標(biāo)準(zhǔn) 由萬維網(wǎng)聯(lián)盟制定的一系列標(biāo)準(zhǔn)，包括：結(jié)構(gòu)化標(biāo)準(zhǔn)語言（HTML和XML）表現(xiàn)標(biāo)準(zhǔn)語言（CSS）行為標(biāo)準(zhǔn)語言（DOM和ECMAScript） CSS中的定位機(jī)制在CSS中存在三種定位機(jī)制：標(biāo)準(zhǔn)文檔流（Normal flow）浮動(dòng)（Floats）絕對(duì)定位（Abs...

LancerComet 2019-08-29 15:27 評(píng)論0 收藏0
前端面試（知識(shí)點(diǎn)）整理（一）

摘要：接受個(gè)參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級(jí)元素的事件，但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。一、頁面布局 1.問題：假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng)。解決方案一：使用浮動(dòng)布局` Document ...

zhichangterry 2019-08-22 11:06 評(píng)論0 收藏0