CSS3 元素的浮动与定位语法知识点及案例代码
一、CSS3 浮动（float）
知识点
1. **定义** ：浮动使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。浮动主要用于布局，如实现图文绕排等效果。
2. **取值** ：
* `left` ：向左浮动。
* `right` ：向右浮动。
* `none` ：默认值，不浮动。
3. **清除浮动** ：浮动会使父元素高度塌陷，需要清除浮动来避免布局问题。常用方法有：
* `clear:both` ：清除浮动，使元素位于浮动元素下方。
* 使用 `overflow:hidden` 给父元素添加隐藏溢出样式。案例代码
html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 浮动案例</title>
<style>
/* 父容器 */
.container {
border: 2px solid black;
padding: 10px;
overflow: hidden; /* 清除浮动 */
}
/* 左浮动元素 */
.left-float {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 5px;
}
/* 右浮动元素 */
.right-float {
float: right;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
/* 清除浮动的元素 */
.clear {
clear: both;
height: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="left-float">左浮动</div>
<div class="right-float">右浮动</div>
<div class="clear">清除浮动</div>
</div>
</body>
</html>注释 ：在这个案例中，我们创建了一个父容器 container，里面有两个浮动元素（一个左浮动，一个右浮动）和一个清除浮动的元素。通过 overflow:hidden 清除了父容器内部浮动元素导致的高度塌陷问题，确保父容器能够正确包裹浮动子元素。左浮动和右浮动元素分别向左和向右对齐，清除浮动的元素位于它们下方。
二、CSS3 定位（position）
知识点
1. **定义** ：定位用于指定元素在文档中的位置，通过不同的定位方式可以实现复杂的布局效果。
2. **取值及特点** ：
* `static` ：默认值，元素按照正常文档流进行排列，不进行定位。
* `relative` ：相对定位，元素相对于其正常位置进行偏移，不脱离文档流，原位置保留。
* `absolute` ：绝对定位，元素相对于最近的已定位（非 `static`）的祖先元素进行定位，脱离文档流，原位置不保留。
* `fixed` ：固定定位，元素相对于浏览器窗口进行定位，即使窗口滚动，元素位置不变。
* `sticky` ：粘性定位，是一种相对定位和固定定位的混合，根据滚动位置来决定其行为方式。
3. **定位属性** ：
* `top` 、`right` 、`bottom` 、`left` ：用于指定定位元素的位置偏移量。案例代码
html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 定位案例</title>
<style>
/* 相对定位元素 */
.relative-box {
position: relative;
width: 200px;
height: 200px;
background-color: lightpink;
top: 20px; /* 相对于原位置向下偏移 20px */
left: 20px; /* 相对于原位置向左偏移 20px */
}
/* 绝对定位元素 */
.absolute-box {
position: absolute;
width: 150px;
height: 150px;
background-color: lightcoral;
top: 50px; /* 相对于最近的已定位祖先元素向下偏移 50px */
left: 50px; /* 相对于最近的已定位祖先元素向左偏移 50px */
}
/* 固定定位元素 */
.fixed-box {
position: fixed;
width: 100px;
height: 100px;
background-color: lightgreen;
top: 10px; /* 相对于浏览器窗口向下偏移 10px */
right: 10px; /* 相对于浏览器窗口向右偏移 10px */
}
/* 粘性定位元素 */
.sticky-box {
position: sticky;
top: 10px; /* 当元素距离顶部 10px 时触发粘性定位 */
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<div class="sticky-box">粘性定位（滚动页面可查看效果）</div>
<div style="height: 1500px;">（用于测试固定定位和粘性定位的长页面内容）</div>
</body>
</html>注释 ：在这个案例中，我们展示了相对定位、绝对定位、固定定位和粘性定位的效果。相对定位的元素相对于自身原位置偏移；绝对定位的元素相对于最近的已定位祖先元素（如果没有则相对于 body）定位；固定定位的元素始终相对于浏览器窗口定位，即使页面滚动位置也不变；粘性定位的元素在滚动到一定位置时会切换为固定定位，常用于导航栏等需要在滚动过程中保持可见的元素。
以下是开发中常用的CSS3元素浮动与定位的实际具体案例：
CSS3 浮动实际案例
案例一：图文混排
html
<!DOCTYPE html>
<html>
<head>
<title>图文混排案例</title>
<style>
.box {
width: 150px;
height: 100px;
background-color: lightblue;
float: left;
margin-right: 15px;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<h1>图文混排案例</h1>
<div class="box">图片</div>
<p>
这是一个图文混排的案例。通过将图片设置为左浮动，文字会自动环绕在图片的右侧。这种方式常用于文章中的插图，使页面布局更加美观和紧凑。
</p>
<p>
CSS3 的浮动属性使元素脱离正常文档流，从而实现图文混排的效果。在实际开发中，这种方法简单实用，能够快速实现所需的布局。
</p>
</body>
</html>注释 ：在这个案例中，我们创建了一个浮动的 div 元素作为图片，然后在后面添加了两段文字。通过设置 float:left，图片会向左浮动，文字则会自动环绕在图片的右侧，实现图文混排的效果。这种方式在文章排版中非常常见，能够使页面布局更加美观和紧凑。
案例二：两栏布局
html
<!DOCTYPE html>
<html>
<head>
<title>两栏布局案例</title>
<style>
.container {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.left {
width: 30%;
float: left;
background-color: lightpink;
padding: 10px;
}
.right {
width: 70%;
float: right;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
</div>
</body>
</html>注释 ：在这个案例中，我们创建了一个父容器 container，里面有两个子元素 left 和 right。通过设置 float:left 和 float:right，分别将左侧栏和右侧栏向左和向右浮动，实现两栏布局的效果。父容器通过 overflow:hidden 清除了内部浮动元素导致的高度塌陷问题，确保父容器能够正确包裹浮动子元素。这种两栏布局在网页设计中非常常见，如博客、新闻网站等。
CSS3 定位实际案例
案例一：固定导航栏
html
<!DOCTYPE html>
<html>
<head>
<title>固定导航栏案例</title>
<style>
.nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 100;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav ul li {
display: inline-block;
margin: 0 15px;
}
.nav ul li a {
color: white;
text-decoration: none;
}
.content {
margin-top: 60px; /* 为内容区域留出导航栏的高度 */
padding: 20px;
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="content">
<h1>固定导航栏案例</h1>
<p>这是一个固定导航栏的案例。当用户滚动页面时，导航栏始终固定在页面顶部，方便用户随时访问各个页面部分。</p>
<p>通过设置 `position:fixed` 和 `top:0`，导航栏会相对于浏览器窗口定位，即使页面滚动，导航栏位置也不变。这种方式在实际开发中非常常见，能够提高用户体验。</p>
<div style="height: 1500px;">（用于测试固定导航栏效果的长页面内容）</div>
</div>
</body>
</html>注释 ：在这个案例中，我们创建了一个固定导航栏。通过设置 position:fixed 和 top:0，导航栏会相对于浏览器窗口定位，即使页面滚动，导航栏位置也不变。这种方式在实际开发中非常常见，能够提高用户体验，方便用户随时访问各个页面部分。
案例二：模态框
html
<!DOCTYPE html>
<html>
<head>
<title>模态框案例</title>
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 200;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: white;
padding: 20px;
border-radius: 5px;
}
.btn {
display: inline-block;
padding: 8px 15px;
background-color: #333;
color: white;
text-decoration: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="openModal()">打开模态框</button>
<div class="modal" id="myModal">
<div class="modal-content">
<h2>模态框</h2>
<p>这是一个模态框的案例。模态框会覆盖在页面内容之上，用户必须与模态框交互后才能继续操作页面其他部分。</p>
<button class="btn" onclick="closeModal()">关闭</button>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = 'block';
}
function closeModal() {
document.getElementById('myModal').style.display = 'none';
}
</script>
</body>
</html>注释 ：在这个案例中，我们创建了一个模态框。通过设置 position:fixed 和 top:0、left:0，模态框会覆盖在页面内容之上，用户必须与模态框交互后才能继续操作页面其他部分。模态框的内容通过 position:absolute 和 transform:translate(-50%, -50%) 居中显示，这种方式在实际开发中非常常见，用于实现弹出窗口、提示框等效果。
案例三：粘性定位导航栏
html
<!DOCTYPE html>
<html>
<head>
<title>粘性定位导航栏案例</title>
<style>
.nav {
position: sticky;
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 100;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav ul li {
display: inline-block;
margin: 0 15px;
}
.nav ul li a {
color: white;
text-decoration: none;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="content">
<h1>粘性定位导航栏案例</h1>
<p>这是一个粘性定位导航栏的案例。当用户滚动页面到一定位置时，导航栏会固定在页面顶部，方便用户随时访问各个页面部分。</p>
<p>通过设置 `position:sticky` 和 `top:0`，导航栏会在滚动到一定位置时切换为固定定位，这种方式在实际开发中非常常见，能够提高用户体验。</p>
<div style="height: 1500px;">（用于测试粘性定位导航栏效果的长页面内容）</div>
</div>
</body>
</html>注释 ：在这个案例中，我们创建了一个粘性定位导航栏。通过设置 position:sticky 和 top:0，导航栏会在滚动到一定位置时切换为固定定位，这种方式在实际开发中非常常见，能够提高用户体验，方便用户随时访问各个页面部分。