其他分享
首页 > 其他分享> > 前端常用布局方式大全——细致讲解

前端常用布局方式大全——细致讲解

作者:互联网

盒模型

点击打开视频教程

标准盒模型、怪异盒模型(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>

效果:
屏幕截图 2022-08-11 202027.png

标准盒模型的组成:宽高(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>

效果:
屏幕截图 2022-08-11 205206.png2222.png

注意:使用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>

效果:

屏幕截图 2022-08-11 211123.png33333333333333333333333333.png

表格布局

表格是很严格的一行就是一行,一列就是一列,并且他们的位置不会发生变化,所以我们可以利用表格布局来实现我们想要的布局,在以前还没有出现这些浮动、定位属性的时候表格用的是最多的布局方式。通过给父元素设置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>

效果:

屏幕截图 2022-08-11 212133.png44444444444444444444.png

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>

效果:
屏幕截图 2022-08-11 213654.png555555555.png

grid 布局(栅格布局)
百分比布局
响应式布局
等等....

标签:元素,color,前端,布局,width,float,background,讲解,大全
来源: https://www.cnblogs.com/mochenxiya/p/16578356.html