盒模型

点击打开视频教程

标准盒模型  
    
    
    
、怪异盒模型（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 布局（栅格布局）

百分比布局

响应式布局

等等....