布局的实现Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情 1.前言布局通常是我们前端实现

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情

1.前言

布局通常是我们前端实现界面的效果的第一步，所以今天打算和大家分享一下一些布局的想法。

2.布局的方式

第一种方式：

<div class="left">左边</div>
<div class="right">右边</div>

.left{
    width: 200px;
    height: 300px;
    float: left;
    border: 1px solid red;
}
.right{
    height: 300px;
    overflow: hidden;
    border: 1px solid green;
}

这种方式主要采用BFC的原理，代码简单方便。

第二种方式：

<div class='box'>
    <div class="left">flex_left</div>
    <div class="right">flex_right</div>
</div>

.box{
    display: flex;
}
.left{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.right{
    flex: 1;
    height: 200px;
}

这种方式主要是利用flex布局的原理，也是目前大多数使用的方式，简单通用。

第三种方式：

<div class='left'>float_left</div>
<div class='right'>float_right</div>

.left{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    float: left;
}
.right{
    height: 200px;
    margin-left: 200px;
    border: 1px solid green;
}

这种方式主要采用的是浮动的原理达到效果，也是我们一开始经常使用的一种布局方式。

第四种方式：

<div>
    <div class="left">position_left</div>
    <div class="right">position_right</div>
</div>

.left{
    width: 200px;
    height: 200px;
    position: absolute;
    border: 1px solid red;
}
.right{
    margin-left: 200px;
    height: 200px;
    border: 1px solid green;
}

这种方式主要采用的定位的方式进行实现。

3.结语

布局的方式有很多种，实现的方式也是各种各种各样，但是我觉得这几种简单方便，是我们目前使用的比较多的，所以和大家分享一下，如果对于你的学习和工作有所帮助的话，麻烦点上你的小心心❤️。