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

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

其實在佈局中還有很多規律，希望大家多多細心發現後與大家共享，讓大家少走坑！！！以上