CSS之定位与脱离文档流与过渡

最新推荐文章于 2024-04-24 21:51:38 发布

liurongsheng123

最新推荐文章于 2024-04-24 21:51:38 发布

阅读量723

点赞数

分类专栏：前端文章标签： css 定位过渡脱离文档流

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79418320

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS介绍

实现移动的三种方法
可以用margin
可以用浮动布局
可以用定位

脱离文档流

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>脱离文档流</title>
        <link rel="stylesheet" href="脱离文档流.css"/>
    </head>
    <body>
        <div class="redDiv"></div>
        <div class="blueDiv">
            <div class="item"></div>
        </div>
    </body>
</html>


body{
    margin:0px;
}
.redDiv{
    width: 200px;
    height: 200px
    background-color: red;
}
.blueDiv{
    width: 400px;
    height: 100px;
    background-color: yellow;
    float:right;
}
.item{
    width: 20px;
    height: 100px;
    background-color: yellow;
    float:right;
}

定位

定位
浮动

行标签 inline
不能设置宽-高 宽高由内容撑开
可以同行显示

块标签 block
可以设置宽高 
不设置宽:默认宽度继承父级
默认高度:由内容撑开
不能同行显示 独占一行

文档流:标签在浏览器里面按照特性,从上到下,从坐到右排列的一个顺序
脱离文档流:让元素在文档流里面飞起来,不占用原来的空间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位</title>
        <link rel="stylesheet" href="定位.css/">
    </head>
    <body>
        <div class="redDiv"></div>
        <div class="blueDiv">
            <div class="greenDiv"></div>
            <div class="yellowDiv"></div>
        </div>
        <div class="ad">大家好,我是渣渣辉,一刀998级,贪玩蓝月,你值得拥有
    </body>
</html>

.redDiv,.blueDiv{
    width: 200px;
    height: 200px;
}
.redDiv{
    /*默认值:不定位*/
    /*position: static*/
    /*1.相对定位 相对于自身的位置去移动
      2.不脱离文档流,还占用原来的位置
      3.只有定位的元素才能使用:left top bottom right
    */
    position: relative;
    right: 10px;
    bottom: 10px;
    background-color: red;
    margin-top:50px;
}
.blueDiv{
    background-color: blue;
    /*绝对定位 相对于有定位属性的父级去定位
      如果父级只是作为定位父级来使用 只需要使用relative即可
      即position: relative
    */
}
.greenDiv{
    /*绝对定位 相对于带有position属性(不包括static属性)的父级定位,如果
    父级没有position属性,就找父父级别 直到html,如果html也没有position,
    就相对于窗口定位 绝对定位会脱离文档流*/
    position: absolute;
    right: 0px;
    bottom: 0px;
    width:50px;
    height:50px;
    background-color:green;
    /*
    对于定位的元素才可以使用z-index
    z-index的值越大,位置越靠前
    z-index可以是负值,负值的情况下比正常元素靠后
    z-index > 浮动 > 正常
    */
    z-index:99;
}
.yellowDiv{
    width: 100px;
    height: 100px;
    background-color:yellow;
}
.ad{
    z-index:99;
    width:100px;
    height:380px;
    background-color:gray;
    color:white;
    font-size:20px;
    /*固定定位 相对于窗口的位置始终不变 left 0;设置元素在窗口左边为0的地方
    bottom 0设置元素在距离窗口下边为0的地方 会脱离文档流*/
    position: fixed;
    right: 20px;
    top:50%;
    margin-top:-190px;
}

过渡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>过渡</title>
        <link rel="stylesheet" href="过渡.css" />
    </head>
    <body>
        <!--女生能接受的高跟鞋尺寸 10cm 6cm 18cm-->
        <div class="redDiv"></div>
    </body>
</html>

.redDiv{
    margin: 100px auto;
    width: 30px;
    height: 50px;
    background-color:red;
    /*过渡时间*/
    transition-duration:2s;
    /*过渡属性
    希望哪些样式变化的时候有过渡效果.多个属性用逗号隔开 默认是all*/
    transition-property: all;
    /*过渡的运动方式 速度变化
    linear 匀速
    ease
    ease-in 变快
    ease-out 变慢
    ease-in-out 先块后慢
    */
    transition-timing-function: ease-in-out;
    /*过渡延时*/
    transition-delay:1s;

    /*复合写法*/
    transition: all 1s 2s linear;
    /*兼容性*/
    /*谷歌 -webkit内核*/
    -webkeit-transition: all 1s 2s linear;
    /*火狐*/
    -moz-transition:all 1s 2s linear;
    /*IE*/
    -ms-transition:all 1s 2s linear;
    /*欧朋*/
    -o-transition:all 1s 2s linear;
    transition: all 1s 2s linear;
}
.redDiv:hover{
    height:400px;
    background-color:blue;
}

liurongsheng123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之定位与脱离文档流与过渡

CSS介绍实现移动的三种方法可以用margin可以用浮动布局可以用定位脱离文档流&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;脱离文档流&lt;/title&a
复制链接

扫一扫