在网页开发中，css定位是非常重要的技术。通过使用定位属性，我们可以精确的控制页面的元素位置，让页面的布局看起来更加的美观。下面我们介绍它们在实际开发中的一些常见的应用场景以及案例。
1.浮动
我们可以通过为元素设置浮动属性，使其可以脱离文档流左右移动。以下是浮动的应用场景以及案例：
水平排列
当我们希望多个元素水平排列时，可以将它们设置为浮动属性，示例代码如下：
<html>
<head>
<style type="text/css">
.container {
width: 500px;
height: 100px;
background-color: yellow;
}
.box {
float: left;
width:100px;
height: 100px;
margin-right: 10px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>
**
多栏布局
使用多栏布局可以将一个元素中的内容分为两栏或者是多栏并显示。当我们需要多栏显示的时候，我们可以使用浮动属性来实现。下面是示例代码：
<html>
<head>
<style type="text/css">
.container {
width: 100%;
height: 100px;
background-color: yellow;
}
.column {
float: left;
width: 25%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div class="column">column4</div>
</div>
</body>
</html>
**
2.定位
通过定位属性我们可以对页面元素的位置进行精确的排列。下面是定位的应用场景以及案例：
- 导航栏
导航栏是网页开发中常见的功能，我们可以通过定位属性将导航栏固定在页面的上方，并显示不同的内容或者跳转到对应的页面。下面是示例代码：
<html>
<head>
<style type="text/css">
/* 导航栏的样式 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #f2f2f2;
padding: 10px;
}
.navbar div {
float: left;
margin-right: 30px;
}
/* 导航栏的链接样式 */
.navbar a {
text-decoration: none;
font-size: 17px;
line-height: 32px;
}
/* 鼠标悬停时更改链接的颜色 */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* 显示当前选中的元素 */
.navbar a:active {
background-color: #2196F3;
color: white;
}
/* .navbar .search-box {
float: right;
} */
/* 导航栏的搜索框样式 */
.navbar input[type=text] {
margin-right: 10px;
border: none;
padding: 6px;
margin-right: 16px;
font-size: 17px;
}
.navbar input::placeholder {
color: #999;
}
/* 搜索按钮样式 */
.navbar button {
width: 60px;
height: 32px;
border: 0px;
border-radius: 3px;
background-color: #2196F3;
color: white;
font-size: 17px;
}
</style>
</head>
<body>
<div class="navbar">
<!-- 导航栏内容 -->
<div>
<a href="#home">首页</a>
</div>
<div>
<a href="#news">动态</a>
</div>
<div>
<a href="#concat">关于我们</a>
</div>
<!-- 搜索框 -->
<div class="search-box">
<input type="text" placeholder="请输入搜索内容..."></input>
<button>搜索</button>
</div>
</div>
</body>
</html>
**
登陆框
当一些网站需要登录时就需要在页面上放一个登陆框，通过登陆框可以完成用户的登录操作。下面是代码示例：
<html>
<head>
<style type="text/css">
/* 登陆框样式 */
.login-box {
width: 500px;
height: 300px;
background-color: #f6f6f6;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 输入框左侧标签的样式 */
.login-box span {
width: 60px;
height: 45px;
line-height: 50px;
margin-right: 5px;
font-size: 18px;
}
/* 输入框样式 */
.login-box input {
/* border: none; */
padding: 6px;
font-size: 17px;
}
/* 登陆框标题样式 */
.title {
width: 150px;
margin-left: 175px;
margin-top: 20px;
font-size: 30px;
text-align: center;
}
/* 用户名样式 */
.username {
width: 280px;
height: 45px;
margin-top: 30px;
margin-left: 110px;
}
/* 密码样式 */
.password {
width: 280px;
height: 45px;
margin-top: 10px;
margin-left: 110px;
}
/* 底部登录和注册按钮盒子样式 */
.button-box {
width: 200px;
height: 50px;
margin-left: 150px;
margin-top: 30px;
}
/* 登录和注册样式 */
.button-box button {
width: 70px;
height: 32px;
border: 0px;
border-radius: 3px;
background-color: #2196F3;
color: white;
font-size: 17px;
margin-top: 9px;
}
/* 设置注册按钮位置 */
.button-box button:nth-child(2) {
float: right;
}
</style>
</head>
<body>
<div class="login-box">
<div class="title">登录</div>
<form>
<div class="username">
<span>用户名：</span><input type="text" placeholder="请输入用户名..."></input>
</div>
<div class="password">
<span> 密码：</span><input type="password" placeholder="请输入密码..."></input>
</div>
<div class="button-box">
<button>登录</button>
<button>注册</button>
</div>
</form>
</div>
</body>
</html>
**
广告或者悬浮框
在浏览网页时，我们经常会在页面上看到一些弹窗广告、悬浮框或者悬浮按钮，通过定位我们也可以实现这些功能。下面是示例代码：
<html>
<head>
<style type="text/css">
/* 广侧广告 */
.left-box {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 0px;
background-color: aqua;
}
/* 右侧广告 */
.right-box {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
right: 0px;
background-color: aquamarine;
}
/* 中间内容部分 */
.content-box {
height: 100%;
}
</style>
</head>
<body>
<div class="left-box">广告1</div>
<div class="right-box">广告2</div>
<div class="content-box">
<script>
for (var i = 0; i < 50; i++) {
document.write(i + "<br/>")
}
</script>
</div>
</body>
</html>
**
通过浮动以及定位，我们可以灵活的为页面创建各种布局。浮动布局适合水平排列以及多栏布局，通过定位我们可以精确的控制元素的所在位置，熟练掌握这些布局技巧可以快速的进行开发，且能够做出非常美观的页面。我们后面还会讲另一种布局-弹性布局，它非常适合垂直居中和响应式布局。
