盒模型
點擊打開視頻教程
標準盒模型、怪異盒模型（IE盒模型）
什么是盒模型？
盒模型的作用：規定了網頁元素如何顯示以及元素間的相互關系
盒模型的概念：盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間的相互關系，
css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含內容區、補白（填充）、
邊框、邊界(外邊距)這就是盒模型，
2、盒模型是怎樣組成的？
盒模型的組成部分
content（內容區）+ padding（填充區）+ border（邊框區）+ margin（外邊界區）
<template>
<div id="app">
<div ></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 >
<div >
左
</div>
<div >
右
</div>
<div >
中
</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 >
<div >
左
</div>
<div >
中
</div>
<div >
右
</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 >
<div >
左
</div>
<div >
中
</div>
<div >
右
</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 >
<div >
左
</div>
<div >
中
</div>
<div >
右
</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 布局（柵格布局）
百分比布局
回應式布局
等等....
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501646.html
標籤：其他
上一篇：element-ui tree 手動進行展開（異步樹也可以）
下一篇：也談SAP系統優缺點