HTML5+CSS3学习笔记(第5章)CSS3高级应用

HTML5+CSS3学习笔记(第5章)CSS3高级应用

今天是居家隔离的第3天,加油!加仓自己!

5.1框模型

也可以称为盒模型

外边距 margin

上右下左
margin:0 auto

内边距 padding

内边距是背景的范围

边框border

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border: 2px solid red;
            width: 200px;
        }
    </style>
</head>
<body>
<p>放屁鮰鱼,放个臭屁</p>
</body>
</html>

简写属性的概念

5.2布局常用属性

浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

定位

绝对定位position:fixed指的是相对于浏览器定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border: 2px solid red;
            width: 200px;
            height: 1000px;
        }
        .fix{
            position: fixed;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
<p>放屁鮰鱼,放个臭屁</p>
<p class="fix">放屁鮰鱼,放个臭屁!!!</p>
<p>放屁鮰鱼,放个臭屁</p>
<p>放屁鮰鱼,放个臭屁</p>
<p>放屁鮰鱼,放个臭屁</p>
</body>
</html>

相对定位

5.3动画与特效

变化(transform)

transform:
translate平移
scale缩放
skew倾斜
rotate旋转
可以简写属性同时实行。
例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            transform: scale(1.1,1.2) translate(50px,100px) rotate(90deg);

        }
    </style>
</head>
<body>
<img src="1.jpg" alt="">
</body>
</html>

过渡

transition

动画

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;

}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}


</style>
</head>
<body>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

例子
放屁鮰鱼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
.my-pi1{
        width: 50px;
    height: 50px;
    background: #beffb7;
    position:relative;
    animation:mymove 5s infinite;
    left: 100px;
    top: 200px;
}
        .my-pi2{
            width: 40px;
            height: 40px;
            background: #beffb7;
            position:relative;
            animation:mymove 5s infinite;
            animation-delay: 1s;
            left: 100px;
            top: 200px;
        }
        @keyframes mymove {
            from{top:200px}
            to{top:0 }
        }
    </style>
</head>
<body>
<div class="my-box">
    <div class="my-pi1"></div>
    <div class="my-pi2"></div>
    <div class="my-pi3"></div>
    <img src="fish.png" alt="">
</div>
</body>
</html>

你可能感兴趣的:(笔记,HTML5)