CSS 提供了多种布局技巧，包括浮动、定位、弹性盒子、网格和多列布局等。以下是对每种技巧进行简要的汇总：
-
浮动（Float）布局：
- 浮动布局通过
float属性将元素从正常的文档流中脱离，使其能够沿着页面进行左右浮动。
应用场景
- 浮动布局常用于创建多栏布局，例如将导航菜单置于网页顶部或侧边栏。通过设置不同元素的浮动方向和宽度，可以实现多列布局。
- 浮动布局也可用于实现图像和文字环绕效果，其中文本环绕在图像旁边。
实操实践
-
.container类使用overflow: hidden;属性来清除内部浮动，确保容器能够正确地包含浮动元素。 -
.column类使用float: left;属性使每个列向左浮动，实现它们并排显示。
-
定位（Positioning）布局：
-
定位布局使用
position属性来精确放置元素在页面上的位置。 -
常见的定位属性有：
static（默认）、relative、absolute和fixed。
应用场景
- 定位布局可用于创建浮出框、模态框或固定定位的导航栏。通过设置元素的定位属性和偏移量，可以将元素放置在适当的位置。
- 定位布局还可用于实现元素的层叠效果，通过设置不同元素的
z-index属性来控制元素在垂直方向上的显示顺序。
实操实践
-
.navbar类使用position: fixed;属性将导航栏固定在浏览器窗口的顶部。 -
top: 0;和left: 0;属性将导航栏定位在页面的左上角。 -
width: 100%;属性设置导航栏的宽度为100%，使其横向填满整个浏览器窗口。
-
弹性盒子（Flexbox）布局：
-
弹性盒子布局是一种用于创建灵活、自适应布局的技术。
-
弹性盒子通过
display: flex将容器元素设置为弹性容器，其中的子元素成为弹性项目。 -
弹性盒子布局通过设置容器和项目的属性，如
flex-direction、justify-content和align-items，来调整元素的大小、顺序和对齐方式。
应用场景
弹性盒子布局特别适合创建响应式布局，使页面在不同屏幕尺寸下都能良好显示。
实操实践
-
.container类使用display: flex;属性启用弹性盒子布局。 -
flex-direction: row;属性指定子元素水平排列，沿着主轴从左到右。 -
justify-content: space-around;属性使子元素沿主轴等间距分布，左右两端不贴边。 -
align-items: center;属性将子元素在侧轴上居中对齐。
-
网格（Grid）布局：
-
网格布局是一种二维布局系统，通过划分行和列来放置元素。
-
网格布局通过使用
display: grid将容器元素设置为网格容器，其中的子元素成为网格项目。 -
网格布局通过设置容器的属性，如
grid-template-rows、grid-template-columns和grid-gap，来控制网格的结构和间距。
应用场景
网格布局非常适合复杂的页面布局，例如新闻网站的首页或产品展示页面。可以灵活地放置不同大小和位置的元素，并实现响应式设计。
实操实践
-
.container类使用display: grid;属性启用网格布局。 -
grid-template-columns: repeat(3, 1fr);属性创建了一个包含三列的网格，每列宽度相等。 -
grid-gap: 10px;属性设置了网格之间的间距为 10 像素。
-
多列（Multi-column）布局：
-
多列布局通过将内容分成多栏来展示长文本，提高可读性。
-
多列布局通过使用
column-count和column-width等属性来控制列的数量和宽度。
应用场景
- 多列布局常用于报纸或杂志的排版，也适用于其他需要分栏展示文本的情况。
- 多列布局还可以通过媒体查询和响应式设计来适应不同屏幕尺寸。
实操实践
-
.container类使用column-count: 3;属性将内容分为三列。 -
column-width: 200px;属性指定每列宽度为 200 像素。
