CSS布局

在Web布局中，现代CSS特性可以很好的帮助我们快速实现各种布局排版，以帮助我们解决不同的场景页面布局问题。本文将介绍一些css布局技巧，如浮动、定位、弹性盒子布局等。

布局是什么？

• 确定内容的大小和位置的算法。
• 依据元素、容器、兄弟节点和内容等信息来计算。

浮动布局

在CSS中，通过float属性可以实现元素的浮动，其中不同的属性值对应不同的浮动方向。left：向左浮动，right：向右浮动，none：默认值，元素不浮动，inherit：规定应该从父元素继承float属性的值。通常用于实现多栏布局，如两栏或三栏布局。

.top{
    height: 80px;
    text-align: center;
    line-height: 80px;
    margin-bottom: 10px;
}
.top1,.top3{
    width: 200px;
    background-color: gray;
    float: left;
}
.top2{
    width: 540px;
    background-color: gray;
    margin: 0 10px;
    float: left;
}

<div>
    <div class="top top1">logo</div>
    <div class="top top2">banner1</div>
    <div class="top top3">banner2</div>
</div>

定位布局

定位可以设置元素的position属性，分别是static：静态定位、relative：相对定位、absolute：绝对定位、fixed：固定定位，来定位元素。通常用于实现元素的精确定位，如悬浮按钮、模态框等。

.outer{
    width: 500px;
    background-color: skyblue;
    border: 1px solid brown;
    padding: 20px;
}
.box{
    width: 200px;
    height: 200px;
    position: relative;
}
.box1{
    background-color: red;
}
.box2{
    background-color: pink;
    position: absolute;
    top: 130px;
    left: 130px;
}

<div class="outer">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
</div>

其中，可以用到top、right、bottom和left属性来精确定位元素。

弹性盒子布局

弹性盒子布局通过设置容器的display属性为flex，实现灵活的布局方式。通常用于各种复杂布局，如导航栏、卡片布局等。

.outer{
    display:flex;
}
.left{
    width: 200px;
    height: 200px;
    background-color: red;
}
.right{
    background-color: pink;
    height: 200px;
    flex:1;/*右边盒子自适应宽度*/
}

<div class="outer">
    <div class="left">1</div>
    <div class="right">2</div>
</div>

总结

CSS布局技巧是Web开发中必备的技能。掌握浮动、定位和弹性盒子布局等技巧，能够帮助开发者轻松实现不同的页面布局，使网页更清晰整洁，易于维护，提高开发效率和用户体验。