CSS中的定位控制

最新推荐文章于 2024-05-31 17:42:47 发布

淡淡的一抹

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量288

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ych4513979/article/details/42153223

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1 浮动定位

浮动定位并不会影响正常的文档流，但是被浮动的元素会向上层“浮动”（可以理解成行级元素变成了块级元素），例如

<style>
        .floatL{
            background: blue;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            float: left;/*浮动定位*/
        }
        .floatR{
            background: red;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            float: right;
        }
        .clearLR{
            clear: both;//清除浮动定位
        }
    </style>
</head>
<body>
    <span class="floatL"></span>
    <span class="floatL"></span>
    <div class="clearLR"></div>
    <span class="floatR"></span>
    <span class="floatR"></span>
</body>

这里需要注意的是：html元素中有块级元素和行级元素。行级元素会独占一行，例如：<div>；而块级元素就不会，例如：<span>。当<div>被浮动后，它会自动由行级元素上浮为块级元素。

2 相对定位

相对定位是相对于自己父容器的相对定位。

position: relative;

3 绝对定位

绝对定位一般是指相对于页面远点的定位。

position: absolute;

这里需要注意：绝对定位的元素实际上是相对于同样为绝对或者相对定位的父元素的左上角，如果没有就相对于<body>元素。

4 固定定位

固定定位的元素就想被定在屏幕上，而不是页面上，机试页面滚动，元素也不会动，就像一张贴在屏幕上的纸。

position: fixed;

一个简单的例子为：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .class1{
            border: 1px solid black;
            width: 100%;
            height: 1000px;
        }
        .positionF{
            background: red;
            top:0px;
            width: 100%;
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="positionF">111</div>
    <div class="class1">111</div>
    <div class="class1">111</div>
    <div class="class1">111</div>
</body>
</html>

淡淡的一抹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的定位控制

1 浮动定位浮动定位并不会影响正常的文档流，但是被浮动的元素会向上层“浮动”（可以理解成行级元素变成了块级元素），例如 .floatL{ background: blue; border: 1px solid #000; width: 100px; height: 100px;
复制链接

扫一扫

专栏目录