前端学习笔记02

最新推荐文章于 2024-08-28 17:54:22 发布

顺其自然6

最新推荐文章于 2024-08-28 17:54:22 发布

阅读量129

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_56951318/article/details/126477808

版权

css 的三大特性?

1,层叠性 (一个标签可以有多个css样式)

2,继承性 (子标签能继承父标签的某些样式, 比如文本颜色和字号,但是有些样式不能继承)

3,优先级

css权重公式?

继承 * 0 0 0 0

标签 0 0 0 1

类伪类 0 0 1 0

id 0 1 0 0

行内 1 0 0 0

!important 无穷

width height 大于无穷大

div ul li - 0 0 0 3

li - 0 0 0 1

贡献值没有进位权重不能继承

常用的单位 ?

px (像素)

em (绝对单位 , 如果父级的字号是16px , 可以设置为 2 em ,就是 32px)

rem (由整个html的字号决定,改变浏览器的字号设置,页面的字号也发生变化)

百分比相对父元素的比例

行内元素没有宽和高

浏览器加的margin为8px

文档流:

在网页中将窗体自上而下分成好多行,在每行从左到右的顺序排列元素,是网页默认的布局方式

定位 position

static 文档流默认的

absolute 相对于一个父元素的绝对定位

当设置了定位之后,原来的元素会脱离文档流,会在页面上浮起来

relative 相对定位

相对于他的上一个元素定位

fixed 固定定位

导航栏固定定位

子绝父相子元素绝对定位父元素相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* transition 
          过渡转变  transition-duration 是必须写的
        
        */
        div{
            width: 300px;
            height: 300px;
            background-color: red;

            /* transition-property: all;
            transition-duration: 3s;
            transition-timing-function:ease-in-out; */

            animation: myAnim 5s;
        }
        /* div:hover {
                width: 500px;
                height: 500px;
                background-color:aqua;
            } */

        
        @keyframes myAnim{

            0%{
                background-color: red;
            }
            50%{
                background-color: green;
            }
            100%{
                background-color: black;
            }
        }
    </style>
</head>
<body>
    <div ></div>
</body>
</html>
<!-- transition 和 animation 的区别?
    transition 是一个过渡的效果,没有中间状态,要设置触发事件 
    例如 (hover) 等才能执行

    animation 是一个动画的效果 有多个中间帧,
    可以在任意一个中间帧设置状态,不需要设置触发事件就能执行

 -->