CSS布局技巧

汇总CSS布局技巧，浮动，定位，弹性盒子布局等，以及它们的应用场景和实操，从中学习和探讨。

一、浮动（Float）

什么是浮动？

浮动是设置了浮动属性的元素会脱离标准流的控制，在父级元素盒子范围内进行排列，为了让多个块级元素同一行显示。

浮动的使用

float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

应用场景

/* 左右布局 */
.left {
       float: left;
       width: 50%;
     }
.right {
        float: right;
        width: 50%;
    }

/* 图片与文本环绕 */
.img {
      float: left;
      margin-right: 10px;
    }

/* 多栏布局 */
.column {
         float: left;
         width: 33.3%;
         margin-right: 3%;
        }

/* 清除浮动 */
.clearfix:after {
                 content: '';
                 display: block;
                 clear: both;
               }           

二、定位(Position)

什么是定位？

在css中，定位的意思是指定一个元素在网页上的位置，一般使用position属性来设置。

应用场景

css的定位方式：

1.相对定位（relative）

. box {
    position: relative;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;

2.绝对定位（absolute）

. box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
    background-color: pink;

3.固定定位（fixed）

.box {
    position: fixed;
    top: 0;
    right: 0;
  }

4、粘性定位（sticky）

.box {
    position: sticky;
    top: 0;
    width: 500px;
    height: 100px;
    background-color: #fff;
    margin: 100px auto;
  }

三、弹性盒子（Flexbox）

什么是弹性盒子？

是CSS3中引入的一种新的布局模式。相比于传统的布局模式，弹性盒更加灵活，可以帮助开发者快速实现各种复杂的布局需求。 弹性盒的核心概念是弹性容器（flex container）和弹性子元素（flex item）。在弹性容器中，弹性子元素可以通过设置各种属性来实现不同的布局效果。

CSS 弹性盒子布局的css分两种：

• 一种是应用中父容器的的CSS,用于设定父容器本身或者全部子元素的表现形式
• 另一种则是应用在子元素上，用于设置单个子元素的表现行为

应用场景

• display：设置为flex以定义一个弹性容器
• flex-direction：指定主轴方向，可以为row、column、row-reverse或column-reverse
• flex-wrap：指定是否允许弹性子元素换行，可以为nowrap、wrap或wrap-reverse
• flex-grow：定义弹性子元素的比例，数值越大表示占据剩余空间的比例越大
• flex-shrink：定义弹性子元素的收缩比例，数值越大表示缩小的比例越大
• flex-basis：定义弹性子元素基准大小，可以为像素值、百分比或auto
• align-self：定义弹性子元素自己的对齐方式，可以为center、flex-start、flex-end等

/* 定义弹性容器 */
.container {
  display: flex;
}

/* 定义弹性子元素 */
.item {
flex: 1;  /* 子元素的比例，表示占据剩余空间的比例 */
order: 2; /* 子元素的顺序，数值越小排在越前面 */
align-self: center; /* 子元素的对齐方式 */
}

通过探讨CSS的浮动，定位以及弹性盒子布局，希望通过实例代码能够帮助大家掌握网页布局的基本技巧，更加深入地了解这些概念，并能够灵活运用于实际项目中。