zoukankan html css js c++ java

清除浮动css详解

CSS定位position：

static relative abslute fixed

1.relative相对定位

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>
    <body>
        <div class="s1">内容一</div>
        <div id="special"class="s1">内容一</div>
        <div class="s1">内容一</div>
        <div class="s1">内容一</div>
                <div class="s1">内容一</div>
        <div class="s1">内容一</div>
    </body>
</html>

View Code

left 与top来进行定位，参照点是它原来的位置作为参照点

2.abslute绝对定位（对离自己最近的元素为参照点）

此时的参照为body

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>

    <body>
        <div class="s1">内容一</div>
        <div class="s1" id="special">内容二 </div>
        <div class="s1">内容三</div>
        <div class="s1">内容四</div>
        <div class="s1">内容五</div>
        <div class="s2">HELLO</div>
    </body>

</html>

View Code

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}
.s2{
    position: relative;
    left: 200px;
    top: 100px;
     300px;
    height: 100px;
    background: green;
    float: left;
}

View Code

以离自己最近的非标准流作为参考点

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/relative.css" />
    </head>

    <body>
        <div class="s1">内容一</div>

        <div class="s1">内容三</div>
        <div class="s1">内容四</div>
        <div class="s1">内容五</div>
        <div class="s2">
            <div class="s1" id="special">内容二 </div>
        </div>
    </body>

</html>

View Code

.s1{
     100px;
    height: 60px;
    background: silver;
    float: left;
    margin-left:10px ;
    
}
#special{
    position: relative;/*相对定位*/
    left: 40px;/*在原来的位置向左移的大小*/
    top: 100px;/*向下移动*//
}
.s2{
    position: relative;
    left: 200px;
    top: 100px;
     300px;
    height: 100px;
    background: green;
    float: left;
}

View Code

3.static

left与right没有

4.fixed

类似于absoute但是包含块是视窗本身body

只认body

查看全文

相关阅读:
How can i use iptables on centos 7?
Running Jenkins behind Nginx
GPG入门教程
 HTML5 canvas标签－4 灰度直方图的实现
 [转载]手把手用C++解密Chrome80版本数据库
 Delphi
7-zip Delphi API
cef对本地web资源打包加密
 CEF3资源重定向、读取加密资源、读取zip资源
 axios设置withCredentials导致“跨域”的解决方案

原文地址：https://www.cnblogs.com/helloworld2019/p/10910364.html