前言
CSS布局是设计和构建网页的关键部分，拥有合适的布局技巧能够使网页内容更具吸引力和可读性。在接下来的内容中，我们将一起探讨各种布局技巧的具体应用，帮助您更好地理解和应用于实际开发中。无论对于初学者还是有一定经验的开发者，这些CSS布局技巧都将是一个有益的参考和指南。让我们一起开始CSS布局的学习之旅吧！
CSS常用布局
CSS页面布局技术允许我们选择网页中的元素，并且通过控制它们相对于正常布局流、周边元素、父容器或主视口/窗口的位置来定位它们。在这个模块中，我们将深入讨论页面布局技术的细节，包括如何选择和操作元素以及如何控制它们的位置和布局。通过学习这些技术，我们将能够更加灵活地设计和构建网页布局，实现更具创意和吸引力的页面设计。
1. 弹性盒子布局
CSS弹性盒子布局是一种现代的、响应式的布局模型，用于在容器内部按照一定的规则和比例排列和对齐子元素。
Flexbox布局通过设置容器和子元素的属性来实现灵活的布局效果。主要包括以下几个关键概念：
- 容器（flex container）：通过设置
display: flex或display: inline-flex将元素定义为Flexbox容器。容器内的子元素即为Flex项目。 - 项目（flex item）：Flex容器内的每个子元素被称为Flex项目，它们可以根据设定的规则进行布局和对齐。
- 主轴（main axis）和交叉轴（cross axis）：Flexbox布局中存在主轴和交叉轴两个方向。主轴是Flex项目排列的方向，默认为水平方向，交叉轴是与主轴垂直的方向，默认为垂直方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
Flexbox布局适用于各种场景，如导航菜单、栅格布局、居中对齐等。它不仅简化了布局的实现，还提供了更好的灵活性和可扩展性。
2. 浮动布局
float属性用于设定元素在其父元素中的浮动方式，使其脱离正常的文档流，并沿指定的方向（左浮动或右浮动）移动。- 浮动元素会对其他非浮动元素的布局产生影响，使它们环绕在浮动元素的周围。
- 通过设置float属性，我们可以实现实用的布局效果，如将多个元素并排显示、创建多列布局等。
需要注意的是，浮动元素脱离了正常的文档流，可能会导致一些副作用，如父元素塌陷、布局错乱等。因此，在使用float属性时，需要合理地使用其他CSS布局技术来处理这些问题，如清除浮动、使用额外的包裹元素等。
3. 定位布局
position属性用于指定元素的定位方式，可以选择四个值：static、relative、absolute和fixed。
- static：默认值，元素按照正常文档流中的位置进行定位，不会受到top、left、right、bottom等属性的影响。
- relative：相对定位，元素按照自身在正常文档流中的位置进行定位，并且可以通过top、left、right、bottom属性来控制元素相对于原始位置的偏移。相对定位的元素仍会在文档流中占据原本的位置。
- absolute：绝对定位，元素相对于离它最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位。通过top、left、right、bottom属性来确定元素的位置。绝对定位的元素不会在文档流中保留原来的位置，其他元素会忽略该元素。
- fixed：固定定位，元素相对于浏览器视口进行定位，即不随滚动条的滚动而变化。通过top、left、right、bottom属性来确定元素在视口中的位置。固定定位的元素会覆盖其他元素，并且不会在文档流中占据空间。
掌握position属性的不同取值可以让我们更灵活地控制元素的定位和布局，适应各种设计需求。
