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

查看全文

相关阅读:
从零开始通过webhooks实现前端自动化
 使用rem配置PC端自适应大屏
 Nuxt内导航栏的两种实现方式
 VueX中直接修改数据报错，修改一维数组，二维数组，报错的原因
 在mpvue或者Vue中使用VUEX
小程序框架MpVue踩坑日记（二）
小程序mpvue中动态切换echarts图表
 小程序踩坑之不同屏幕下动态改变translate值
 Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统
 小程序框架MpVue踩坑日记（一）

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