盒模型 點擊打開視頻教程 標準盒模型、怪異盒模型（IE盒模型） 什麼是盒模型？ 盒模型的作用：規定了網頁元素如何顯示以及元素間的相互關係 盒模型的概念：盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間的相互關係。 css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、 ...
盒模型
標準盒模型、怪異盒模型（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 佈局（柵格佈局）
百分比佈局
響應式佈局
等等....
