web前端定位
程序员文章站
2022-04-22 16:10:09
...
一，定位
1，定位作用：
将盒子定在某一个位置，*的漂浮在其他盒子（包括标准流和浮动）的上面 所以我们脑海中应该有三种布局机制的上下顺序标准流在最底层（海底）---浮动的盒子在中间层（海面）---定位的盒子在最上层（天空）
2，定位详解
定位也是用来布局的，它有两部分组成：定位=定位模式+变偏移
2.1边偏移
简单说，我们定位的盒子，是通过边偏移来移动位置的。在CSS中，通过 top botttom left right来移动位置的
2.2定位模式（position）
在CSS中，通过position属性定义元素的定位模式，语法如下：选择器：{position:属性值;}
定位模式分类：
2.2.1静态定位（static）-了解
- 静态定位是元素的默认定位方式，无定位的意思
- 静态定位按照标准流特性摆放位置，他没有边偏移
- 静态定位在布局时我们几乎不用的
相对定位（relative）重要
- 相对定位是元素相对于它原来在标准流中的位置来说的
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin-top: 200px;
margin-left: 200px;
background-color: pink;
position: relative;
top:200px;
left: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
相对定位的特点（重点）：
- 相对于自己原来在标准流中位置来移动
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待他
举例：
<strong>相对定位的特点（重点）：<br><ul>
<li>相对于自己原来在标准流中位置来移动</li>
<li>原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待他</li>
</ul></strong>
运行效果：
2.2.3绝对定位（absolute）重要
绝对定位是元素以带有定位的父级元素来移动位置- 完全脱标---完全不占位置；
- 父元素没有定位，则以浏览器为准定位（文档）
- 父元素有定位
将元素依据最近的已经定位（绝对，固定，或者相对的定位）的父元素进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
background-color: pink;
width: 300px;
height: 300px;
margin: 100px;
/*position: absolute;
top: 10px;
left: 10px;*/
/*标准流的子盒子总是以父级为准移动位置*/
/*绝对定位，如果父级没有定位 绝对定位以文档定位*/
}
.son{
background-color: purple;
width: 200px;
height: 200px;
/*margin-left: 100px;*/
position: absolute;
top:10px;
left:10px;
}
.grandfather{
width: 400px;
height: 400px;
background-color: gray;
position: relative;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
运行结果：
绝对定位的特点：
- 绝对是以带有定位的父级元素来移动位置，如果父级都没有定位，则以浏览器文档为准移动位置
- 不保留原来的位置，完全是脱标的
推荐阅读
-
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
-
web服务器软件有哪些，常见的web服务器软件分类
-
java web项目里ehcache.xml介绍
-
web服务器的作用是什么，简述web服务器的工作原理
-
在C#程序中对MessageBox进行定位的方法
-
ASP.NET web.config中 数据库连接字符串加密解密
-
或许是你应该了解的一些 ASP.NET Core Web API 使用小技巧
-
web服务器和应用服务器的区别是什么，简述两者的架构与工作原理
-
web服务器的作用是什么，简述web服务器的工作原理
-
web应用服务器有哪些功能，web应用的特点介绍