盒模型的相关计算及flex布局的不常见规律总结

1. content-box与border-box的区别及相关计算

当box-sizing:content-box时，boxwidth（盒子宽度）=contentwidth(盒子内容宽度)+2*padding+2 *border,

以下为实例

<div class="bc">
    <div class="bc1">
        <div class="bc2"></div>
    </div>
</div>
复制代码

以下为css样式

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}
复制代码

下面进行盒模型的相关计算

spacewidth(盒子空间宽度)=boxwidth+2*margin
spaceheight(盒子空间高度)=boxheight=2 *margin

bc1:
box-sizing:border-box;margin:0
spaceWidth=boxwidth=400*100%=400,
spaceHeight=boxheight=200*100%=200,padding=20 ==>
contentWidth=400-2*20=360,contentHeight=200-2*20=160

box2:
boxSizing=borderbox
container(contentWidth=360,contentHeight=160),width=50%,height=50% ==> 
boxwidth:180,boxheight:80
padding=20;border=5 ==> 
contentWidth=180-2*20-2*5=130,
contentHeight=80-2*20-2*5=30
margin=8 ==> 
spaceWidth=180+2*8=196,spaceHeight=80+2*8=96
复制代码

实际效果图：

当box-sizing:content-box时，

bc1:
box-sizing:border-box;margin:0
spaceWidth=width=400,
spaceHeight=height=200,padding=20 ==> 
contentWidth=400-2*20=360,
contentHeight=200-2*20=160 

bc2
boxsizing=contentbox
container(contentWidth=360,
contentHeight=160),
width=50%,
height=50% ==>
contentWidth:180,contentHeight:80
padding=20;border=5 ==> 
width=180+2*20+2*5=230,height=80+2*20+2*5=130
margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146
复制代码

实际效果图：

由此可见当选择不同的box-sizing模型时，盒子的宽度是不同的

选择content-box时，contentwidth不变，当padding,border变大时，盒子可视宽度变大，撑大，影响整体布局

而选择border-box时，当padding,border变大时，contentwidth会被压缩，盒子可视宽度不变，不影响整体布局

而一般开发情况下，为了不影响整体布局，我们通常选择border-box 为盒模型

2.flex布局不常见规律总结

1.flex-direction 决定扩展方向

当flex-direction属性取值后，其width/height只能在row/column上进行扩展，当其含有多个子元素时，子元素的W/H按比例分配（margin也要计算在内），示例：

<div class="bc">
  
    <div class="bc1">
        <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
复制代码

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

复制代码

bc1:
box-sizing:border-box;margin:0
spaceWidth=width=400,
spaceHeight=height=200,padding=20 ==> 
contentWidth=400-2*20=360,
contentHeight=200-2*20=160 

bc2:
boxsizing=border-box
container(contentWidth=360,
contentHeight=160),
width=50%,
height=50% ==>
width=180,height=80
padding=20;border=5 ==>
contentWidth=180-2*20-2*5=130,contentHeight=80-2*20-2*5=30
margin=8 ==> spaceWidth=230+2*8=246,spaceHeight=130+2*8=146

复制代码

计算

beacuse bc2(flex-direction:row) ==> bc2-contentWidth=bc3-Width+bc4-Width
bc3-Width:bc4-Width=7:8 ==>
bc3-width=130*0.46=60.672
bc4-Width=130*0.54=69.328
bc3-height,bc4-height be equal to defined vaule

复制代码

当存在margin时，两个子元素宽度会被压缩

.bc4{
    margin-left:50px;
}
复制代码

column方向同理

另外还可根据flex值分配W/H,示例如下

.bc3{
   flex:2
   height:30px;
}

.bc4{
   flex:1
   height:90px;
}
复制代码

得到的效果如下：

2.子元素决定父元素尺寸，子元素一旦固定，父元素不会变化

当多个元素分配W/H时，有子元素的可根据其子元素的W/H确定其值（具有优先分配W/H的权力）。且子元素一旦固定，其值也不会变化。

实例

html:

<div style="position: relative;width:400px;height:200px;margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
            <div class="bc5">
                <div class="bc6"></div>
            </div>
        </div>
    </div>
</div>
复制代码

css:

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
width: 50%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:140px;
    height:30px;
}

.bc4{
    width:160px;
    height:90px;
}

.bc5{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.bc6{
    width:100px;
    height:100px;
}
复制代码

计算：

bc1,bc2计算方式如上 ==>bc2-width=130
because bc6:width=100,height=100 ==>
bc5 width,height not defined ==>
bc5 width=100,height=100;
bc5: margin-left=10 ==>
bc3-width+bc4-width=bc2-width-100-10=20
bc3-width:bc4-width=7:8 ==>
bc3-width=9.328,bc4-width=10.672

height has defined vaule ==> height not change

复制代码

实图

3.当父元素W/h未定义，子元素的最大w/h决定父元素的w/h

实例如下

html:

<div style="position: relative;width:400px;height:200px;margin: 10px;">
    <div class="bc1">
          <div class="bc2">
            <div class="bc3"></div>
            <div class="bc4"></div>
        </div>
    </div>
</div>
复制代码

css

.bc{
position: relative;
width:400px;
height:200px;
margin: 10px;
}

.bc1{
width:100%;
height:100%;
box-sizing:border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding:20px;
}

.bc2{
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 5px solid #000;
margin: 8px;
padding: 20px;
}

.bc3{
    width:50px;
    height:30px;
}

.bc4{
    width:100px;
    height:90px;
}
复制代码

实图：以为flex-direction=row ==>bc2-width=100+50=150,height未定义，取子元素最大值（90px）

当换以下height以后

.bc3{
    width:50px;
    height:100px;
}
.bc4{
    width:100px;
    height:50px;
}
复制代码

以下为新的实图

父元素的高度通过子元素变换后，取最大值（100px）,宽度仍为子元素之和150px

---------------------我是分割线-------------------------

其实在布局中还有很多规律，希望大家多多细心发现后与大家共享，让大家少走坑！！！以上