css 定位 | 易学教程

css 定位概念

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

1，相对定位

相对于一个元素的正常位置来对其定位。

2，绝对定位

使用绝对值来对元素进行定位。

3，浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

本节知识点练习作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        div.xddw{
            position:relative;
            bottom: 27px;

        }
        a.cdl{
            font-size: 14px;
            text-decoration: none;
            margin-left: 5px;
            margin-top: 3px;
            margin-bottom: 3px;
            color: darkgrey;
        }
        a.xddw2{
            font-size: 16px;
            color: black;
            position: relative;
            top: 54px;
            text-decoration:;
        }
    </style>
</head>
<body>
<div style="border-bottom: 1px solid #cccccc;height:27px;">
    <a href="" class="cdl">首页</a>
    <a href="" class="cdl">新闻</a>
    <a href="" class="cdl">找找看</a>
    <a href="" class="cdl">学习计划</a>
</div>
<div class="xddw" style="height: 130px;width: 1000px;margin-right: auto;margin-left: auto;border-bottom: 1px solid #cccccc">
    <a href="" class="xddw2">园子</a>
    <a href="" class="xddw2">关注</a>
    <a href="" class="xddw2">粉丝</a>
    <a href="" class="xddw2">随便看看</a>
    <a href="" class="xddw2">消息</a>
    <p style="position: relative;top: 88px;font-size: 18px;"><strong>欢迎您，欲心！</strong></p>
    <img src="jinritoutiao%20logo.png" alt="" style="height: 45px;position: absolute;left: 685px;top:50px">
    <img src="bokeyuan%20logo.png" alt="" style="height: 50px;position: relative;left: 700px;top: 60px">
</div>
<div style="height: 160px;width: 1000px;margin-right: auto;margin-left: auto;">
    <img src="bj.png" alt="" style="height: 160px;width: 1000px;">

</div>
<div style="height: 30px;width: 1000px;margin-left: auto;margin-right: auto;border-bottom: 3px solid black">
    <img src="01.jpeg" alt="" style="height: 150px;position: absolute;bottom: 600px;left:500px;border-radius: 50%">
</div>
</body>
</html>

来源：https://www.cnblogs.com/yx3445/p/12405623.html

标签

绝对定位

position

margin

css