CSS基础复习第四天——浮动与定位基础知识学习笔记

浮动与定位：网页布局的基础

浮动与定位是CSS中重要的布局元素，掌握这两项可以灵活方便地进行网页布局。浮动允许元素脱离标准文档流，而定位允许元素在文档流中指定具体位置。

一、浮动

1. 浮动概念

浮动（float）是指元素脱离标准文档流，并沿着包含元素的一侧（左或右）排列。浮动元素不再占据其原始位置，而是漂浮在文档流中。

2. 浮动属性值

• left：左浮动，元素浮动到其包含元素的左侧。
• right：右浮动，元素浮动到其包含元素的右侧。

3. 浮动元素性质

• 浮动元素脱离标准文档流，不会占据其原始位置。
• 浮动元素与其他元素不会相互影响，它们之间没有间隙。
• 浮动元素可以与其他浮动元素或非浮动元素重叠。

二、定位

定位（position）允许元素在文档流中指定具体位置。定位元素可以脱离标准文档流，并根据指定的定位属性进行定位。

1. 定位属性值

• static：静态定位，元素在文档流中占据其原始位置。
• absolute：绝对定位，元素脱离标准文档流，并根据其父元素的相对位置进行定位。
• fixed：固定定位，元素脱离标准文档流，并根据浏览器窗口的位置进行定位。
• relative：相对定位，元素在文档流中占据其原始位置，但可以根据其相对位置进行偏移。

2. 定位元素性质

• 定位元素脱离标准文档流，不会占据其原始位置。
• 定位元素与其他元素不会相互影响，它们之间没有间隙。
• 定位元素可以与其他定位元素或非定位元素重叠。

三、浮动与定位的使用技巧

• 浮动可以用于创建多列布局，还可以用于将元素放置在特定位置。
• 定位可以用于创建固定导航栏、侧边栏等元素，还可以用于将元素放置在特定位置。
• 浮动与定位可以结合使用，以实现更复杂的布局效果。

四、实例讲解

1. 使用浮动创建两列布局

<div class="container">
  <div class="left-column">
    ...
  </div>
  <div class="right-column">
    ...
  </div>
</div>

.container {
  display: flex;
}

.left-column {
  float: left;
  width: 50%;
}

.right-column {
  float: right;
  width: 50%;
}

2. 使用定位创建固定导航栏

<nav class="navbar">
  ...
</nav>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

3. 使用浮动与定位创建侧边栏

<div class="container">
  <div class="sidebar">
    ...
  </div>
  <div class="main-content">
    ...
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  float: left;
  width: 20%;
}

.main-content {
  position: relative;
  width: 80%;
}

五、结语

浮动与定位是CSS中重要的布局元素，掌握这两项可以灵活方便地进行网页布局。通过本文的学习，读者应该对浮动与定位有了更深入的理解，并能够在实际项目中灵活运用这些知识。