CSS浮动

浮动的作用

1. 浮动可以让元素脱离文档流，并在其周围创建一个新流。这可以用来创建图像和文本的水平排列，或创建列表或导航栏。
2. 浮动元素不会占据父元素的宽度。这意味着，如果父元素是块级元素，则浮动元素会在父元素中创建一个新的行。
3. 浮动元素会自动与其左侧或右侧的元素相邻。这可以用来创建水平列表或导航栏。
4. 浮动元素可以通过设置 clear 属性来清除父元素的高度。这可以用来防止浮动元素导致父元素的高度增加。

应用场景

​ ​ ​ ​ ​ ​ ​ ​ 当我们思考CSS浮动技巧的应用场景时，想象一下你正在构建一个网页，其中就有一些图片和文本内容需要合理地排列在页面上。
​ ​ ​ ​ ​ ​ ​ ​ 假设你正在为一个旅游网站设计首页，要展示不同目的地的照片和简短介绍。你想让这些照片和文字能够流畅地排列在页面上，以吸引用户的注意力。这时，CSS浮动技巧可以派上用场。通过使用浮动属性，你可以让图片和文本在同一行上并排展示。这样，页面就能更加美观，而且信息呈现得更有吸引力。
​ ​ ​ ​ ​ ​ ​ ​ 换个应用场景，你正在为一个新闻网站设计文章页面。在这个页面上，你要将文章内容与侧边栏分开，便于阅读和导航。通过使用CSS浮动技巧，你可以将文章内容设置为浮动，让侧边栏与之并排显示。这样，读者在阅读文章时，侧边栏中的相关链接和信息仍然可见，提供了更好的用户体验。
​ ​ ​ ​ ​ ​ ​ ​ 浮动技巧还可用于创建响应式布局。比如你正在设计一个博客页面，你想在大屏幕上以两列显示文章列表，而在小屏幕上则变成单列显示，以适应不同设备的浏览。通过使用CSS浮动技巧，你可以轻松地实现这种响应式布局，让页面在各种设备上都能完美呈现。
​ ​ ​ ​ ​ ​ ​ ​ 在实际操作时，可以总结成以下部分：

• 创建水平列表或导航栏
• 创建图像和文本的水平排列
• 清除父元素的高度

实践实操

创建水平列表或导航栏

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<style>
ul.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.list li {
  float: left;
  margin-right: 10px;
}
</style>

清除父元素的高度

<div class="clearfix">
  <div class="float-left">This is a float-left element.</div>
  <div class="float-right">This is a float-right element.</div>
</div>

<style>
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>

CSS定位

定位的作用

• 绝对定位 可以让元素脱离文档流，并在其父元素中指定位置。这可以用来创建弹窗、浮动元素、图像和文本的水平排列等。
• 相对定位 可以让元素相对于其原始位置进行定位。这可以用来创建弹窗、浮动元素、图像和文本的水平排列等。
• 固定定位 固定定位可以让元素固定在浏览器窗口中，无论页面如何滚动，元素都会保持在同一位置。这可以用来创建导航栏、头部、尾部等。
• 粘性定位 粘性定位可以让元素在滚动时，从顶部到达指定位置后，变为绝对定位。这可以用来创建导航栏、头部、尾部等。

应用场景

​ ​ ​ ​ ​ ​ ​ ​ 想象一下，你正在设计一个个人简历的网页 (希望更方便地投递到BAT)。你想在页面上有一个漂亮的头像，紧随其后的是你的个人信息，如姓名、联系方式等。为了让这些元素排列整齐、美观，你可以使用CSS定位技巧。通过相对定位，你可以调整每个元素的位置，让它们紧密相连，形成一个整洁的个人简历页面。以便HR对你的印象加深。
​ ​ ​ ​ ​ ​ ​ ​ 定位技巧还可用于创建弹出式对话框。假设你正在为一个在线购物网站设计页面 （拼多多计划开发Web端），当用户点击某个商品时，你希望弹出一个窗口显示商品的详细信息和购买选项。通过使用绝对定位，你可以在点击商品时动态地显示这个弹出式对话框，并确保它位于页面的合适位置。
​ ​ ​ ​ ​ ​ ​ ​ 另一个场景是，你正在为一个在线音乐播放器设计界面 （投递大厂失败，选择网易云） 。你想在底部固定一个播放器控制栏，让用户可以随时控制音乐的播放和暂停。这时，你可以使用固定定位，让播放器控制栏始终停留在底部，无论用户如何滚动页面，都能方便地操作音乐播放。
总之，在技术上可以总结为：

• 创建弹窗
• 浮动元素
• 图像和文本的水平排列
• 导航栏
• 头部、尾部

实践实操

创建弹窗

<div id="popup">
  <p>This is a popup window.</p>
</div>
#popup {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background-color: blue;
  z-index: 100;
}

浮动元素

<div id="image-text">
  <img src="image.jpg" alt="Image">
  <p>This is some text.</p>
</div>
#image-text {
  position: relative;
  width: 500px;
  height: 100px;
}

#image-text img {
  float: left;
  margin-right: 10px;
}

#image-text p {
  float: right;
}

CSS弹性盒子

弹性盒子的作用

• 创建灵活的布局
• 比传统的CSS布局技术更容易使用
• 可以用来创建各种各样的布局，包括水平列表、垂直列表、卡片布局、图像布局等
• 可以用来对元素进行水平排列、垂直排列、对齐、填充等操作
• 可以用来创建响应式布局

应用场景

​ ​ ​ ​ ​ ​ ​ ​ 想象你正在设计一个团队合作的网页。你想在页面上展示团队成员的照片和姓名，并且要让它们在不同屏幕尺寸下自动调整排列。这时，CSS弹性盒子技巧就派上用场了。通过将团队成员的照片和姓名放在一个弹性盒子容器中，你可以使用弹性盒子的特性让它们在一行内平均分布，并且在页面缩放时自动适应不同的屏幕尺寸，让页面看起来整齐又美观。
​ ​ ​ ​ ​ ​ ​ ​ 还有就是，你正在构建一个导航菜单。你希望菜单项能够水平排列，并且在菜单项过多时能够自动换行显示，而不会出现溢出问题。这时，你可以使用CSS弹性盒子技巧来创建一个水平弹性盒子容器，让菜单项自动排列在一行上，并在需要时自动换行，让导航菜单看起来更加整洁和易于导航。
​ ​ ​ ​ ​ ​ ​ ​ C弹性盒子还可以用于创建响应式布局。假设你正在设计一个商品展示页面，你希望在大屏幕上显示多列商品，而在小屏幕上则变成单列显示。通过使用弹性盒子技巧，你可以轻松地实现这种响应式布局，让商品在不同设备上都能美观地展示。

实践实操

垂直列表：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>
.flex-container {
  display: flex;
  flex-direction: column;
}
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}

图像布局

<div class="flex-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.image {
  width: 100px;
  height: 100px;
  margin: 10px;
}