CSS——定位与浮动

最新推荐文章于 2024-08-13 09:24:34 发布

gxyqn626

最新推荐文章于 2024-08-13 09:24:34 发布

阅读量248

点赞数

分类专栏： MarkDown

本文链接：https://blog.csdn.net/gxyqn626/article/details/81168872

版权

MarkDown 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定位（Position)

定位属性：

– position top left right bottom overflow clip z-index

0、什么也没指定的时候

#position1
{
    width:100px;
    height: 100px;
    background-color: blue;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>定位</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="position1"></div>
    <script type="text/javascript">
    for(i=0;i<100;i++)
        {
            document.write(i+"<br/>")
            }
    </script>
</body>
</html>

无操作

按照流的方式自上而下

1、position:relative

#position1
{
    width:100px;
    height: 100px;
    background-color: blue;
    position: relative;
    right:30px;
    top:10px ;
}

相对布局

相对定位元素的定位是相对其正常位置。

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

2、position:absolute

#position1
{
    width:100px;
    height: 100px;
    background-color: blue;
    position: absolute;
}

绝对布局

好像从页面中抠出来，其他的依旧自上而下

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

3、position:fixed

#position1
{
    width:100px;
    height: 100px;
    background-color: blue;
    position: fixed;
    left:20px;
    top:10px;
}

固定布局

不管怎样滚动，一直都固定在那里

4、position:stistic

#position1
{
    width:100px;
    height: 100px;
    background-color: blue;
    position: static;
    left:20px;
    top:10px;
}

静态布局

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

浮动

浮动：float属性
值：left:向左浮动
right:向右浮动
none:不浮动
inherit:从父级继承浮动属性
- clear属性：
  去掉浮动属性（包括继承来的属性）
  值：left/right:去掉元素向左向右浮动
  both：左右两侧均去掉浮动
  inhert:从父级继承来clear的值

#fd
{
    width:100px;
    height: 100px;
    background-color: red;
}
#sd
{
    width: 100px;
    height: 100px;
    background-color: blue;
}
#td
{
    width: 100px;
    height: 100px;
    background-color: green;
}