弹性盒模型计算
弹性盒模型计算
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>