- 定位
- 相对定位
- 绝对定位
- 浮动定位
相对定位
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本,这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架,将html文件括起来-->
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<p style="position: relative; left: -20px; bottom: -20px;">
<!--进行相对定位-->
第一段
</p>
<p style="position:relative;">
第二段
</p>
</div>
</body>
</html>
绝对定位
<!--
* @Author: zhu xianyu
-->
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本,这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架,将html文件括起来-->
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<p style="position: absolute; left: -20px; bottom: -20px;">
<!--进行相对定位-->
<!--这里是根据浏览器的相对位置进行定位-->
第一段
</p>
<p style="margin: 10px 50px 50px 10px;">
第二段
</p>
</div>
</body>
</html>
浮动定位
<!--
* @Author: zhu xianyu
-->
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本,这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架,将html文件括起来-->
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<img src="/icon.png" width="200" style="float:right">
</div>
</body>
</html>