彈性盒模型計算

2022-11-24 16:57:40 字數 2701 閱讀 5218

彈性盒模型計算

div1

div2

div3

div4

彈性盒模型寬度為0的前提下,如果彈性盒模型內設定了具體寬度,計算盒模型的寬度時,應該用父級的寬度減去具體設定的值,然後剩下的寬度按照flex等分計算。

也可理解為:父級減去內部所有固定寬度後,按照flex總份數等分,每個盒子再乘以所佔份數最後加上自己的固定寬度(margin、padding、border)。

此例設定div1、div2、div3為彈性盒模型,div1佔2份,div2、div3各佔1份。div4為固定寬度200px,左邊距60px。所有div設定內邊距50px,邊框20px。父級總寬1000px。

第一步:用父級總寬減去所有固定寬度,4個div共有8個50px的橫向padding、8個20px的橫向border,1個200px的固定div,以及一個橫向60px的margin

1000 - 50 * 8 - 20 * 8 - 200 - 60 = 180

第二步:將剩下的寬度按照flex的份數等分,div1為2、div2為1、div3為1,一共為4份

180 / 4 = 45

結果:div1的寬度為 45 * 2 + 50 * 2 = 190

div2的寬度為 45 * 1 + 50 * 2 = 145

div3的寬度為 45 * 1 + 50 * 2 = 145

div4的寬度為 200 + 50 * 2 = 300

doctype html public "-//w3c//dtd html 4.01//en" ""

>

<

html

>

<

head

>

<

meta

http-equiv

="content-type"

content

="text/html; charset=utf-8"

>

<

title

>彈性盒子模型計算

title

>

<

style

>

body

.box

.box div

.box .div1

.box .div2

.box .div3

.box .div4

style

>

head

>

<

body

>

<

h1>彈性和模型計算

h1>

<

div

class

="box"

>

<

div

class

="div1"

>div1

div>

<

div

class

="div2"

>div2

div>

<

div

class

="div3"

>div3

div>

<

div

class

="div4"

>div4

div>

div>

<

p>彈性盒模型寬度為0的前提下,如果彈性盒模型內設定了具體寬度,計算盒模型的寬度時,應該用父級的寬度減去具體設定的值,然後剩下的寬度按照flex等分計算。<

br />

也可理解為:父級減去內部所有固定寬度後,按照flex總份數等分,每個盒子再乘以所佔份數最後加上自己的固定寬度(margin、padding、border)。

p>

<

h2>示例:

h2>

<

p>

此例設定div1、div2、div3為彈性盒模型,div1佔2份,div2、div3各佔1份。div4為固定寬度200px,左邊距60px。所有div設定內邊距50px,邊框20px。父級總寬1000px。

<

br /><

br />

第一步:用父級總寬減去所有固定寬度,4個div共有8個50px的橫向padding、8個20px的橫向border,1個200px的固定div,以及一個橫向60px的margin

<

br />

1000 - 50 * 8 - 20 * 8 - 200 - 60 = 180

<

br /><

br />

第二步:將剩下的寬度按照flex的份數等分,div1為2、div2為1、div3為1,一共為4份

<

br />

180 / 4 = 45

<

br /><

br />

結果:<

br />

div1的寬度為 45 * 2 + 50 * 2 = 190

<

br />

div2的寬度為 45 * 1 + 50 * 2 = 145

<

br />

div3的寬度為 45 * 1 + 50 * 2 = 145

<

br />

div4的寬度為 200 + 50 * 2 = 300

p>

body

>

html

>

CSS盒模型

在右邊的 編輯器中大家可以看到我們為 a 元素設定了寬和高,但都沒有起到作用,原因是a在預設的時候是內聯元素,內聯元素是不可以設定寬和高的。變為內聯塊元素即可。doctype html html head meta http equiv content type content text html ...

css盒模型

1.標準盒模型 一個塊的總寬度 頁面中佔的寬度 width margin 左右 padding 左右 border 左右 2.怪異盒模型 一個塊的總寬度 width margin 左右 即width已經包含了padding和border值 ie瀏覽器 box sizing content box 將...

IE盒模型

普通盒模型 最裡面是寬高,往外面一次為內邊距 邊框 外邊距 這些邊距元素都不會影響最裡面的寬度。獨立開來的。邊距如果變大隻會影響整個寬高。對立面原始的內容寬高無影響。ie6以下的盒模型不一樣 它設定的寬度是包括內邊距的。按現實邏輯的箱子。內邊距如果大就會把裡面內容撐小。就像是顯示中間裝玻璃的箱子裡面...