CSS布局技巧｜青训营css布局，盒子，flexbox，grid，position，响应式布局，float（没写这个

CSS（层叠样式表）是用于网页布局和样式设计的关键技术之一。

盒模型和定位

使用box-sizing来管理盒模型的宽度和高度，可以选择border（宽度包含了边框和内边距）、content（默认，仅包含内容部分）以及margin（外边距，设置盒子之间的间距）等

使用position属性进行元素的定位，如static、relative、absolute、fixed等

布局方式

弹性盒子布局（Flexbox）

使用display: flex将容器变为弹性容器，使得内部元素可以灵活地进行排列、对齐和分布

flexbox是一个用的很多的盒子

微博首页👆一些相关的css👇（组件超多，对应位置找的不准确请见谅）

.woo-box-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.woo-box-column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

.woo-box-item-flex {
    align-self: stretch;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: stretch
}

网格布局（Grid）

使用display: grid创建网格容器，通过定义行和列来实现复杂的布局结构，在网格布局中，使用grid-template系列属性定义网格的行列结构，使用grid-area等属性为网格项指定位置

可以很明显的看出来网格的格式👇

所涉及的源代码👇

定位布局（Positioning）

使用position: absolute、position: fixed或position: relative来对元素进行绝对或固定定位，通常与父元素的相对定位一起使用

响应式布局

使用@media媒体查询，根据不同的屏幕尺寸应用不同的样式，在不同设备上的适应性布局

👉这么一说，下面这些代码都在干啥就很好理解了吧

其他布局技巧

浮动布局（Float）： 使用float属性使元素浮动到其容器的左侧或右侧，然后通过清除浮动来管理布局的流动性
多列布局： 使用column-count和column-width属性创建多列布局，可以实现类似报纸的分栏效果
层叠布局（Z-index）： 使用z-index属性控制元素的层叠顺序，决定元素在垂直堆叠时的显示优先级
水平居中和垂直居中： 使用不同的技术，如margin: auto、flexbox、grid等来实现元素的水平和垂直居中
定位偏移： 使用top、bottom、left、right等属性对绝对定位的元素进行微调
等分布局： 使用百分比、Flexbox、Grid等方法将容器内的元素等分成多个部分
混合布局： 结合多种布局技术，根据不同的布局需求来实现复杂的页面结构
。。。

以上是一些常见的CSS布局技巧，实际操作中根据具体的项目需求，可能会结合使用多种布局技术来实现所需的效果，在选择布局时，还应该考虑到浏览器兼容性、响应式需求以及页面的复杂度。

CSS布局技巧 ｜ 青训营