盒模型

點選開啟視訊教學

標準盒模型、怪異盒模型（IE盒模型）

什麼是盒模型？

盒模型的作用：規定了網頁元素如何顯示以及元素間的相互關係
盒模型的概念：盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間的相互關係。
css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、
邊框、邊界(外邊距)這就是盒模型。

2、盒模型是怎樣組成的？

盒模型的組成部分
	content（內容區）+ padding（填充區）+ border（邊框區）+ margin（外邊界區）

<template>
  <div id="app">
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  .box{
    width: 100px;
    height: 100px;
    border: 4px solid red;
    padding: 5px;
    margin: 5px;
  }
</style>

效果：

標準盒模型的組成：寬高（content）+ padding + border + margin
怪異盒模型的組成：width（content+border+padding）+ margin

可以用css屬性更改是標準盒模型還是怪異盒模型

css屬性：box-sizing: border-box（怪異盒模型）/content-box（標準盒模型）

浮動佈局

float 屬性定義元素往哪個方向浮動。
float元素脫離了檔案流，但是不脫離文字流

浮動佈局主要是利用float屬性來實現，可以給元素設定float屬性讓元素脫離檔案流，然後設定left和right來邊改元素在檔案上的展示位置以此形成我們想要的佈局方式，下面用浮動佈局完成一個左右寬度固定中間自適應的三欄佈局。

float實現三欄佈局

<template>
  <div id="app">
    <div class="content">
      <div class="left">
        左
      </div>
      <div class="right">
        右
      </div>
      <div class="middle">
        中
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  .content{
    width:100%;
    height:200px;
  }
  .left {
    width: 200px;
    height: 100px;
    float: left;
    background-color: red;
  }
  .right {
    width: 200px;
    height: 100px;
    float: right;
    background-color: yellow;
  }
  .middle {
    width:400px;
    height: 100px;
    margin-left:100px;
    background-color: blue;
  }
</style>

效果：

注意：使用float浮動佈局middle中間的元素在html中要放在最後，否則黃色區域會換行，因為div是塊級元素使用margin後右邊區域也是屬於它的。

注意：如果給非float元素加上寬度，一定要記得給此元素加上margin-left/right屬性， 否側非float元素會被float元素覆蓋住一部份。

定位佈局

定位佈局是利用position來實現，可以使用absolute絕對定位移動元素的位置，使用絕對定位也會使元素脫離檔案流，下面使用絕對定位實現一個三欄佈局。

絕對定位實現三欄佈局：

<template>
  <div id="app">
    <!-- 定位佈局 -->
    <div class="content">
      <div class="positionLeft">
        左
      </div>
      <div class="positionMiddle">
        中
      </div>
      <div class="positionRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* 定位佈局 */
  .positionLeft {
    position: absolute;
    width: 200px;
    left: 0;
    top: 0;
    background-color: red;
  }
  .positionMiddle {
    background-color: blue;
    margin: 0 200px;
  }
  .positionRight {
    position: absolute;
    width: 200px;
    right: 0;
    top: 0;
    background-color: yellow;
  }
</style>

效果：

表格佈局

表格是很嚴格的一行就是一行，一列就是一列，並且他們的位置不會發生變化，所以我們可以利用表格佈局來實現我們想要的佈局，在以前還沒有出現這些浮動、定位屬性的時候表格用的是最多的佈局方式。通過給父元素設定display: table;，給子元素設定display: table-cell;即可實現三欄佈局，使用表格佈局還是比較方便的，幾乎不需要寫什麼樣式就可以實現。

表格佈局實現三欄佈局：

<template>
  <div id="app">
    <!-- 表格佈局 -->
    <div class="parent">
      <div class="tableLeft">
        左
      </div>
      <div class="tableMiddle">
        中
      </div>
      <div class="tableRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* 表格佈局 */
  .parent {
    display: table;
    width: 100%;
  }
  .parent > div {
    display: table-cell;
  }
  .tableLeft {
    width: 300px;
    background-color: red;
  }
  .tableRight {
    width: 300px;
    background-color: yellow;
  }
  .tableMiddle {
    background-color: blue;
  }
</style>

效果：

flex佈局

flex佈局也叫彈性佈局，是利用css3新出的屬性display: flex實現的，
這種佈局方式很方便，也不會對檔案的結構改變，是當下最熱門的一種佈局方式，
建議每個前端開發者都要掌握。

flex佈局實現三欄佈局：

<template>
  <div id="app">
     <!-- flex佈局 -->
    <div class="flexParent">
      <div class="flexLeft">
        左
      </div>
      <div class="flexMiddle">
        中
      </div>
      <div class="flexRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* flex佈局 */
  .flexParent{
    display: flex;
  }
  .flexLeft {
    width: 300px;
    background-color: red;
  }
  .flexRight {
    width: 300px;
    background-color: yellow;
  }
  .flexMiddle {
    flex: 1;
    background-color: blue;
  }
</style>

效果：

grid 佈局（柵格佈局）
百分比佈局
響應式佈局
等等....