• 前端学习笔记02

    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  固定定位 

    导航栏  固定定位

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* transition 
    10.           过渡转变  transition-duration 是必须写的
    11.         
    12.         */
    13.         div{
    14.             width: 300px;
    15.             height: 300px;
    16.             background-color: red;
    17.  
    18.             /* transition-property: all;
    19.             transition-duration: 3s;
    20.             transition-timing-function:ease-in-out; */
    21.  
    22.             animation: myAnim 5s;
    23.         }
    24.         /* div:hover {
    25.                 width: 500px;
    26.                 height: 500px;
    27.                 background-color:aqua;
    28.             } */
    29.  
    30.         
    31.         @keyframes myAnim{
    32.  
    33.             0%{
    34.                 background-color: red;
    35.             }
    36.             50%{
    37.                 background-color: green;
    38.             }
    39.             100%{
    40.                 background-color: black;
    41.             }
    42.         }
    43.     style>
    44. head>
    45. <body>
    46.     <div >div>
    47. body>
    48. html>
  • 相关阅读:
    golang开发 深入理解 context
    深度强化学习入门：马尔可夫决策过程（井字棋案例理解）
    LeetCode·899.有序队列·最小表示法
    【Vue】Non-Props 属性是什么
    nodejs+vue水浒鉴赏平台系统
    自己动手写编译器:实现命令行模块
    Cortex-M3异常
    2024拼多多校招面试真题汇总及其解答（一）
    学好MySQL增删查改，争取不做CURD程序员【上篇】
    C之(10)CMocka-单元测试框架使用
  • 原文地址：https://blog.csdn.net/qq_56951318/article/details/126477808