弹性盒模型计算

弹性盒模型计算

弹性盒模型计算

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" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>弹性盒子模型计算</title>

<style>

body { font-size:1em; line-height:1.5em; padding:50px; color:#333; font-family:"微软雅黑"; }



.box { width:1000px; background:#EBEBEB; border:10px solid #CCC; display:-webkit-box; -webkit-box-orient:horizontal; }

.box div { padding:50px; border:20px solid #00e5ed; color:#FFF; text-shadow:2px 2px 2px rgba(0, 0, 0, .5); width:0; }

.box .div1 { -webkit-box-flex:2; background:#12d698; }

.box .div2 { -webkit-box-flex:1; background:#128ed6; }

.box .div3 { -webkit-box-flex:1; background:#efb017; }

.box .div4 { width:200px; background:gray; margin-left:60px; }

</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>

 

你可能感兴趣的:(计算)