盒模型的相關計算及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

---------------------我是分割線-------------------------

其實在佈局中還有不少規律，但願你們多多細心發現後與你們共享，讓你們少走坑！！！以上