在网页开发中，CSS布局是一个重要但复杂的任务。合理的布局不仅让页面清晰美观，还能提供良好的用户体验。以下内容为大家介绍一些常用的布局技巧以及应用场景
1、左右布局
这就要说到一个属性float，使用float: left;就可以让浮动元素脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。但是，子类使用float来使元素并排时，父类就需要使用clearfix来防止子元素下方的标签浮动上来贴和。
.clearfix::after {content: '';display: block; clear: both;}
这样所有元素就会紧贴左边浮动，如果想要左右浮动，就可以把最右边的元素设置为float: right;这样就可以实现左右布局。
2、左中右布局
左中右布局，父元素有三个子元素，首先先把三个子元素浮动并排起来如左右布局一样，然后给后两个元素都设置一个margin左边距，父元素设置水平居中;就可以实现左中右布局
ol li id=portfolio1所有 /li li id=portfolio2框架 /li li id=portfolio3原生 JS&CSS/li /ol li{ float: left; margin-left: 40px;} ol ｛ margin: 0 auto; display: inline-block; vertical-align: top;}
3、水平居中
对于行内元素(inline)：text-align: center; 对于块级元素(block)：设置宽度marigin-left 和 margin-right 设成 auto； 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局
4、弹性盒子布局（Flexbox Layout）
它可以方便地实现灵活的盒子布局。通过设置容器的display属性为flex，可以将其内部的元素排列为一行或一列，并自动调整元素的大小和位置。
.container { display: flex; justify-content: space-between; align-items: center; } .item { flex: 1; }
5、网格布局（Grid Layout）
它可以将页面划分为多个网格区域，并灵活地控制元素在网格中的位置和大小。通过设置容器的display属性为grid，可以定义网格的列和行。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px; } .item { grid-column: span 2; grid-row: 1; }
6、多列布局（Multi-column Layout）
通过设置容器的column-count属性和column-gap属性，可以将内容分为指定数量的列，并控制列之间的间距。
应用场景：多列布局适用于需要将大段文本内容分为多列显示的情况，比如报纸、杂志等。
.container { column-count: 3; column-gap: 20px; }
7、表格布局（Table Layout）
与前文提到的方式不同的是，表格布局是一种 使用HTML表格元来实现的布局方式。 通过设置表格的各个单元格的宽度、高度和边距等属性，可以实现各种复杂的布局效果。
应用场景：表格布局适用于需要展示结构化数据的情况，比如数据报表、排行榜等。
table /tr td单元格1 /td td 单元格2/td /tr tr td 单元格3/td td 单元格4/td /tr /table
注意，虽然表格布局在某些情况下可以方便地实现复杂的布局效果，但过度使用表格布局可能会导致语义化和可访问性方面的问题，因此在使用表格布局时需要谨慎考虑。
其他小技巧
1、box-shadow可以给块设置阴影，看起来更立体，谷歌搜索css shadow generator可以自己调整样式。
2、transition: all 0.3s;动画属性，可以给所有变化加入过渡动画和过渡时间。
3、cursor: pointer;鼠标悬停时I型可以变成手指点击形状
4、border: 1px solid red; border边框可以用来调试标签的所占位置。
当设置display: inline-block; 需要加上vertical-align: top; 来去除底层多出的空间。
background-image: url(../img/girl.jpg); 设置背景图片background-position: center center;可以使背景图片
5、垂直水平居中， background-size: cover;使背景图片可以按比例缩放。
6、谷歌搜索css linear-gradient generator可以设置一个元素的渐变色，来使一个元素包含多种颜色。
