web笔记

m0_74256660

已于 2023-07-25 15:21:15 修改

阅读量110

点赞数

文章标签：前端笔记

于 2023-07-23 22:04:59 首次发布

本文链接：https://blog.csdn.net/m0_74256660/article/details/131883026

版权

第三天

【1】字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./01-字体样式.css">
</head>
<body>
    <p>我是一段文字</p>
</body>
</html>

p {
    /* font-size :字体大小 */
    font-size: 12px;     
    /* 字体 */
    font-family: sans-serif;  
    /* 字体粗细 */
    font-weight: bold;           

    /* 第二种直接输入数字：font-weight: 500; 
        400：正常    700：加粗*/

    /* 字体样式   一般是normal  italic:倾斜*/
    font-style: italic;      

    /* 连写顺序：style、weight、size、family 
       字号和字体必须同时存在    不推荐使用*/

    font : italic 700 20px '宋体';

    /* css层叠性：属性名相同时，后边的样式会将前边的样式覆盖掉 */
}

【2】文本样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02-文本样式.css">
</head>
<body>
    <p>
        RT报道称，欧尔班还警告说，这种趋势肯定不会让华盛顿满意，因为华盛顿希望自己永远“站在世界巅峰”。他说，在人类历史上，对现有霸权地位的挑战曾多次导致重大冲突，并补充说，“没有永远的赢家，也没有永远的输家”。

据RT报道，欧尔班认为，两个大国之间的冲突很可能发生，但并非无法避免。他说，世界须找到一种新的平衡，对立双方应互相平等相待。他补充说，主要国家必须“接受这样的事实：现在，天空出现两个太阳，而不是美国的主导地位”。

报道说，欧尔班还对欧盟的未来做出了冷酷的预测，称欧洲即将失去其在全球经济中的主导地位。欧尔班将它归咎于西方的反俄政策。他说，欧盟已经“富有但脆弱”，由于决心对俄实施制裁，欧盟将进一步失去竞争优势。

报道提到，近期，匈牙利已成为西方政策的主要批评者之一，该国政府一再呼吁乌克兰停火并达成和平协议，并批评欧盟向基辅提供武器装备。匈牙利总理欧尔班7月14日表示，只要美国愿意，乌克兰危机将会立即结束。他表示：“如果美

国说它希望和平，让我们停止战争，停火并开始谈判，那第二天早上和平就会来临。为什么美国人不想这样做，我们在北约峰会上也没有得到回答。”
    </p>
</body>
</html>

body {
    text-indent: 20px;
 } 
 /* 有些属性有继承性，有些没有 */
 p {
   /* font-size ：控制字体大小*/
    font-size: 40px;
    /* text-indent: 32px; */
    text-indent: 2em;
    /* px有局限性，我们选择使用em   em:当前一个字符的大小  */
 }

【3】文本对齐方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03-文本对齐方式.css">
</head>
<body>
    <div class="box1">我是一个盒子</div>

    <div class="box2">
        <img src="./灰太狼.jpg" alt="">
        <p>我是文字</p>
    </div>
</body>
</html>

div {
    /* 改为行内 */
    display: block;
    /* 对齐方式:text-align       居中的是内容*/
    text-align: center;

}

.box2 {
    width: 300px;
    height: 400px;
    background-color: pink;
    text-align: center;
}

【4】文本修饰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./04-文本修饰.css">
</head>
<body>
    <a href="#">去百度</a>
</body>
</html>

a {
    /* 清除a链接的默认样式 */
    text-decoration: none; 
    /* 删除线   默认：实线*/
    text-decoration: line-through;
    /* 下划线 */
    text-decoration: underline;
    /* 上划线 */
    text-decoration: overline;
}

【5】文本转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./05-text-transform.css">
</head>
<body>
    <ul>
        <li>woshi1</li>
        <li>woshi2</li>
        <li>woshi3</li>
        <li>WOSHI4</li>
    </ul>
</body>
</html>

/* 转大写 */
ul li:nth-child(1) {
    text-transform: uppercase;
}
/* 转小写   lowercase*/
ul li:nth-child(4) {
    text-transform: lowercase;
}

【6】行高：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./06-行高.css">
</head>
<body>
    <p>
        【环球时报综合报道】“我早在1984年就首次警告过AI
        
        （人工智能）会构成威胁，但电影业没有人在意。”就在
        
        美国好莱坞演员大罢工抵制“AI入侵”不到一周时间，《泰
        
        坦尼克号》导演詹姆斯·卡梅隆在接受采访时如此说道。直
        
        至今日，再也没有人能够不在意这一具有“冲击力”的技术，
        
        好莱坞罢工的影响也已蔓延至全球：在英国，电影《魔法坏
        
        女巫》的制作已被叫停，《死侍3》的制作受到严重影响；在
        
        澳大利亚，约150名演员和工作人员退出电影《真人快打2》的
        
        制作……这一场由好莱坞演员率先发起的大罢工背后，原因多重，
        
        但AI对演员和编剧带来的巨大威胁却成为最显眼的那一个。面
        
        对“AI入侵”，全球电影业在担心什么？每一次电影业的变革都
        
        伴随着技术的迭代，AI技术的全面发展是否意味着新的电影时代就此到来
    </p>

    <div>我是文字</div>
</body>
</html>

p {
    line-height: 50px;
}

div {
    width: 400px;
    height: 200px;
    background-color: pink;
    text-align: center;
    /* 单行文本借助行高垂直居中 */
    line-height: 200px;
    
}

【7】文本溢出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./07-文本溢出.css">
</head>
<body>
    <div>
        【环球时报综合报道】“我早在1984年就首次警告过AI
        
        （人工智能）会构成威胁，但电影业没有人在意。”就在
        
        美国好莱坞演员大罢工抵制“AI入侵”不到一周时间，《泰
        
        坦尼克号》导演詹姆斯·卡梅隆在接受采访时如此说道。直
        
        至今日，再也没有人能够不在意这一具有“冲击力”的技术，
        
        好莱坞罢工的影响也已蔓延至全球：在英国，电影《魔法坏
        
        女巫》的制作已被叫停，《死侍3》的制作受到严重影响；在
        
        澳大利亚，约150名演员和工作人员退出电影《真人快打2》的
    </div>
</body>
</html>

div {
    width: 300px;
    height: 200px;
    background-color: pink;
    /* 将溢出的放进滚动   只管y轴*/
    overflow: auto;
    /* 
    overflow: hidden;      //将溢出的隐藏
    overflow: scroll;      //scroll：滚动    既有y轴又有x轴  
    white-space: nowrap; 
    text-overflow：ellipsis   //将多余的变为省略号
    */
    
}

【8】背景相关：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./08-背景相关.css">
</head>
<body>
    
</body>
</html>

body {
    width: 3000px;
    height: 3000px;
    background-color: aqua;
    /* 设置背景图片 */
    background-image: url(./灰太狼.jpg);
    /* 平铺 */
    background-repeat: no-repeat;
    /* 固定 */
    background-attachment: fixed;
    /* 定位 */
    background-position: right;

    /*连写（不管顺序）： background: pink url(./灰太狼.jpg) no-repeat; */

    background-size: cover;
    /* 设置背景大小    强行占满    contain:设置背景大小*/
}

【9】列表样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./09-列表样式.css">
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>
</html>

li {
    /* 去除li默认样式 */
    list-style: none;
    /* style:样式  disc：实心圆点  */
    list-style: disc;
    /* list-style: circle;     circle：空心圆点*/
}

【10】元素显示模式转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./10-元素显示模式转换.css">
</head>
<body>
    <span>我是一个小盒子</span>
    <span>我是一个小盒子</span>
    <span>我是一个小盒子</span>

    <div>我是一个盒子</div>
</body>
</html>

span {
    /* 将行内元素转化为行内块元素 */
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: pink;
}
/* inline：行内  block：块 */
div {
    display: inline-block;
}

【11】轮廓线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./11-轮廓线.css">
</head>
<body>
    <input type="text" name="username">
</body>

</html>

input {
    /* 去除轮廓线默认样式 */
    outline-style: none;
    /* 点状 */
    outline-style: dotted;
    /* 双划线 */
    outline-style: double;
    /* 设置轮廓线颜色 */
    outline-color: aqua;
    /* 设置宽 */
    outline-width: 40px;

    /* 连写 */
    outline: none;
}

【12】边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./12-边框.css">
</head>
<body>
    <div>

    </div>
</body>
</html>

div {
    width: 300px;
    height: 200px;
    background-color: aqua;
    border-color: black;
    /* style:设置样式 */
    border-style: dashed;
    
    /* 设置边框左上角 */
    border-top-left-radius: 45%;
}

【13】合并相邻边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./13-合并相邻边框.css">
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

table {
    border-collapse: collapse;
}
td {
    width: 40px;
    height: 30px;
    border: 3px solid;
}

【14】颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./14-颜色.css">
</head>
<body>
    <p>我是12</p>
    <div>

    </div>
</body>
</html>

p {
    /* 前颜色  字体颜色 */
    color: aquamarine;

    color: rgb(13, 45, 67);
}
div {
    width:300px ;
    height: 200px;
    /* 设置透明度两种方法 */
    background-color: rgba(rgba(255, 0, 0, 0.509), rgb(7, 124, 7), rgb(68, 68, 126), 0.3);
    /* 括号内最后一个是调节透明度的 */
    opacity: 0.3;
    /* opacity 0-1  0时，只是视觉上看不到，原来位置还在 */
}

【15】元素隐藏的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./15-元素隐藏的方式.css">
</head>
<body>
    <div class="box1">
        我是一个小盒子
    </div>
    <div class="box2">
        
    </div>
</body>
</html>

.box1 {
    width: 400px;
    height: 400px;
    background-color: pink;
    /* 1.设置透明度隐藏  0-1  保留原来位置 */
    opacity:0;

    /* 2.display: none     不保留原来位置 */
    display: none;

    /* 3.visibility：hidden   保留原来位置*/
    visibility: hidden;
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: aqua;
}

【16】鼠标样式以及拖拽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./16-鼠标样式以及拖拽.css">
</head>
<body>
    <textarea cols="30" rows="10"></textarea>
</body>
</html>

textarea {
    /* 防止拖拽 */
    resize: none;

    /* 鼠标样式 */
    cursor: pointer;
}

【17】绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./17-绝对定位.css">
</head>
<body>
    <div class="father">
        <div class="son son1">1</div>
        <div class="son son2">2</div>
    </div>
</body>
</html>

.father {
    position: relative;
    width: 800px;
    height: 800px;
    font-size: 40px;
    background-color: brown;
}
.son {
    width: 200px;
    height: 200px;
    font-size: 40px;
}
.son1 {
    /* 绝对定位会放弃原来的位置 子绝父相 
           逐级查找父级元素是否有相对定位，
           如果有，以父亲为定位参考；如果没有，继续向上查找， */
    position: absolute;
    top: 50px;
    left: 90px;
    background-color: aqua;

    /* 显示的优先级 */
    z-index: 2;
}
.son2 {
    background-color: blue;
}

【18】固定定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./18-固定定位.css">
</head>
<body>
    <div class="box1">
        你好
        <div class="box2"></div>
    </div>

</body>
</html>

body {
    height: 2000px;
    background-color: pink;
}
.box1 {
    /* 固定定位   固定于可视窗口进行定位     放弃定位 */
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50px;
    background-color: blue;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

【19】粘性定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./19-粘性定位.css">
</head>
<body>
    To stop inappropriate parking of shared bikes,Beijing"s Dongcheng and Xicheng districts will start apilot program that designates certain areas fit topark, using hi-tech assistance to enforce relatedrules.

        　　为解决共享单车乱停乱放问题，北京市东城区和西城区将启动一个试点项目，指定特定的共享单车停放区，借助高科技手段执行相关规定。
        
        　　Dongcheng District will mark nearly 600 sites forparking shared bikes, mainly near bus hubs, subwaystations and shopping centers.
        
        　　东城区将施划近600个共享单车停放区，主要设在公交枢纽、地铁站点和购物中心附近。
        
        　　Users will know from their mobile phone app where to put them. The project will possibly startas early as June.
        
        　　使用者将会通过他们的手机APP知道单车放在了哪里。该项目最早将于6月启动。
        
        　　Dongcheng and Xicheng districts are also planning to use "electronic fence" to curb illegalparking.
        
        　　东城区和西城区还计划用“电子围栏”来遏制违规停车。
        
        　　Riders who park bikes outside the allowed areas cannot lock them and will continue to becharged.
        
        　　骑车人将单车停在指定区域外将无法为车辆上锁，会一直计费。
        
        　　The capital has increased its administration of shared bike parking as they become a popular,cheap choice for dodging traffic jams.
        
        　　随着共享单车成为一种避开交通堵塞的流行、廉价得选择，北京市也对停车管理进行了加强。
        
        　　<p>Haidian, Xicheng and Shijingshan districts have designed some 2,000 parking areas for sharedbikes. Xicheng has also singled out 10 streets where riders are banned from parking.
        
        　　海淀区、西城区和石景山区已经为共享自行车设计了约2000个停车位。西城区还特别挑出了10条禁止骑车人停车的街道</p>

        To stop inappropriate parking of shared bikes,Beijing"s Dongcheng and Xicheng districts will start apilot program that designates certain areas fit topark, using hi-tech assistance to enforce relatedrules.

        　　为解决共享单车乱停乱放问题，北京市东城区和西城区将启动一个试点项目，指定特定的共享单车停放区，借助高科技手段执行相关规定。
        
        　　Dongcheng District will mark nearly 600 sites forparking shared bikes, mainly near bus hubs, subwaystations and shopping centers.
        
        　　东城区将施划近600个共享单车停放区，主要设在公交枢纽、地铁站点和购物中心附近。
        
        　　
</body>
</html>

p {
    position: sticky;
    top: 20px;
    background-color: pink;
}

第四天

【1】盒子模型：

1、 css会把所有的html元素都看作盒子

2、组成：外边距（margin）、内边距（padding）、边框（border）、内容区（content）

3、影响盒子大小：内边距（padding）、边框（border）、内容区（content）

【2】内边距：内容距离边框的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02-内边距.css">
</head>
<body>
    <div>我是盒子的内容区域</div>
    <span>我是一个小盒子</span>
</body>
</html>

div {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    /* 设置内边距   改变距离时，盒子大小也会改变 */
    padding-top: 20px;
    padding-left: 20px;

    /* 复合属性 */
    padding: 20px;
    /* 两个值时，第一个值代表上下的padding值，第二个值代表左右的padding值 */
    padding: 10px 50px;
    /* 三个值：上   左右   下 */
    padding: 10px 20px 30px;
    /* 四个值：上   右   下   左 */
    padding: 10px 20px 30px 40px;
    /* padding的值不能为负值 */
}

/* 行内元素的左右内边距可以准确设置，上下不能 */
span {
    background-color: pink;
    padding-left: 20px;
    padding: 20px;
    
    /* padding-top: 20px;
    padding-bottom: 20px; */
}

【3】外边距：标签与标签之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./03-外边距.css">
</head>
<body>
    <div class="box1">
        我是盒子的内容区域
        <div class="box2">我是盒子2</div>
        <div class="box3">我是盒子3</div>
    </div>
</body>
</html>

div {
    width: 400px;
    height: 300px;
    border: 1px solid black;
}
.box1,
.box2,
.box3 {
    display: inline-block;
}
/* margin不改变盒子大小 */
.box1 {
    /* margin-top: 20px;
    margin-bottom: 20px; */

    /* 上下左右都为20px */
    margin: 20px;
    /* auto:实现元素的水平居中 */
    /* auto  尽可能远离左右 */
    margin: 0 auto;

    /* 复合属性与内边框一样 */
}
/* margin有负值 */
.box2 {
    margin-top:-20px ;
}

【4】外边距塌陷：

解决方法：

1、给父元素加边框

2、给父元素添加内边距

3、加overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./04-外边距塌陷.css">
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <p>我是1</p>
    </div>
</body>
</html>

.father {
    width: 800px;
    height: 800px;
    background-color: aqua;
    /* 解决margin-top的办法 */
    /* 1、给父元素加边框 */
    border: 1px solid black;
    /* 2、给父元素添加内边距 */
    padding: 10px;
    /* 3、加overflow :文本溢出        偏方*/
    overflow: hidden;
}
.father>div {
    width: 20px;
    height: 20px;
}
.son1 {
    background-color: pink;
    /* 父盒子里，第一个子盒子的margin-top值会被父盒子抢掉 */
    margin-top: 20px;

    margin-bottom: 20px;
    margin-left: 20px;
}
.son2 {
    background-color: aquamarine;
    margin-bottom: 30px;
}
.son3 {
    background-color: blue;
}

【5】避免padding将盒子撑大：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./05-避免padding将盒子撑大.css">
</head>
<body>
    <div>我是一个盒子</div>
</body>
</html>/

div {
    width: 200px;
    height: 300px;
    background-color: pink;
    padding: 20px;
    /* 解决padding影响盒子大小 */
    box-sizing: border-box;
}

【6】flex布局:弹性盒子布局，相对于传统的盒子模型的垂直方向居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./06-flex布局.css">
</head>
<body>
    <div class="box">
        <div>我是盒子1</div>
        <div>我是盒子2</div>
        <div>我是盒子3</div>
    </div>

    <ul>
        <li><a href="#">去百度</a></li>
        <li><a href="#">去百度</a></li>
        <li><a href="#">去百度</a></li>
    </ul>
</body>
</html>

.box {
    /* 变为弹性盒子 */
    display: flex;
    /* 改子元素排列方式 */
    /* flex-direction: column;
    flex-direction: row-reverse; */

    /* 改变主轴对齐方式 */
    /* space-between:两边贴边，中间平分剩余空间 
       space-around：平分在子项的两边*/
    justify-content: space-between;

    /* 侧轴对齐方式 */
    align-content: center;

    /* 侧轴单行 */
    align-items: center;
    /* 允许换行 */
    flex-wrap: wrap;


    width: 700px;
    height: 500px;
    background-color: pink;
    margin: 0 auto;
}
.box>div {
    /* flex: ;    占用剩余空间的多少 */
    width: 200px;
    height: 50px;
    background-color: aqua;
}
.box div:nth-of-type(3) {
    /* order :值越小，排列越靠前     没有设置的子项目，默认为0 */
    order: -1;
}
ul {
    display: flex;
}

【7】去除标签默认外边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./07-去除标签默认外边距.css">
</head>
<body>
    asshjhfji
    <ul>
        <li>wddcd</li>
    </ul>
</body>
</html>

/* body {
            margin: 0;
        }
        ul {
            margin: 0;
            padding: 0;
        } */
/* 利用通配符 */
* {
     margin: 0;
    padding: 0;
 }

【8】字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./08-字体.css">
</head>
<body>
    <div>你好</div>
</body>
</html>

@font-face {
    font-family: ok;
    src:url(./)
}
div {
    font-family: ok;

}

【9】渐变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./09-渐变.css">
</head>
<body>
    <div></div>
</body>
</html>

div {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(to right,pink,blue);
    /* 重复线性渐变 */
    background-image: repeating-linear-gradient(45deg,yellow,red);
    /* 径向线性渐变 */
    background-image: radial-gradient(red,pink,yellow);
}

【10】css继承性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./10-css继承性.css">
</head>
<body>
    <div class="father">
        father
        <div>son</div>
    </div>
</body>
</html>

/* 会继承的css属性：字体属性、文本属性、文字颜色…… */
/* 不会继承的：边框、背景、内外边距、宽高…… */
.father {
            color: aqua;
            border: 1px solid black;
        }

【11】浮动：

特点：

1、脱离文档流

2、无论元素类型，只要浮动，就按照浮动规律来：默认宽高都是被内容撑开的，而且可以设置宽高

3、和其他元素共用一行

4、不存在外边距塌陷

5、没有行内块元素的空白问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./11-浮动.css">
</head>
<body>
    <img src="./灰太狼.jpg" alt="">
    灰太狼，动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面主角（前18部为反派男主角）。《喜羊羊与灰太狼之羊村守护者》第35集之后成为第二男主。
武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。他也是狼族里最强大的发明家，狼族里智商最高的狼。
灰太狼是小灰灰的父亲，黄太狼的孙子，黑太狼的儿子，蕉太狼的二叔，夜太狼的表弟，红太狼的丈夫，狼堡的主人。同时也是爱老婆、疼爱孩子的好丈夫、好爸爸。
从《喜羊羊与灰太狼之羊村守护者》之后，灰太狼改邪为正，成为正派角色。
灰太狼，动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面主角（前18部为反派男主角）。《喜羊羊与灰太狼之羊村守护者》第35集之后成为第二男主。
武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。他也是狼族里最强大的发明家，狼族里智商最高的狼。
灰太狼是小灰灰的父亲，黄太狼的孙子，黑太狼的儿子，蕉太狼的二叔，夜太狼的表弟，红太狼的丈夫，狼堡的主人。同时也是爱老婆、疼爱孩子的好丈夫、好爸爸。
从《喜羊羊与灰太狼之羊村守护者》之后，灰太狼改邪为正，成为正派角色。
灰太狼，动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面主角（前18部为反派男主角）。《喜羊羊与灰太狼之羊村守护者》第35集之后成为第二男主。
武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。他也是狼族里最强大的发明家，狼族里智商最高的狼。
灰太狼是小灰灰的父亲，黄太狼的孙子，黑太狼的儿子，蕉太狼的二叔，夜太狼的表弟，红太狼的丈夫，狼堡的主人。同时也是爱老婆、疼爱孩子的好丈夫、好爸爸。
从《喜羊羊与灰太狼之羊村守护者》之后，灰太狼改邪为正，成为正派角色。
灰太狼，动画片系列《喜羊羊与灰太狼》及其衍生作品中的正面主角（前18部为反派男主角）。《喜羊羊与灰太狼之羊村守护者》第35集之后成为第二男主。
武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。他也是狼族里最强大的发明家，狼族里智商最高的狼。
灰太狼是小灰灰的父亲，黄太狼的孙子，黑太狼的儿子，蕉太狼的二叔，夜太狼的表弟，红太狼的丈夫，狼堡的主人。同时也是爱老婆、疼爱孩子的好丈夫、好爸爸。
从《喜羊羊与灰太狼之羊村守护者》之后，灰太狼改邪为正，成为正派角色。
</body>
</html>

img {
    /* 文字环绕 */
    float: left;
    width: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./11.1_浮动.css">
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <p>我是一段文字</p>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</body>
</html>

.father {
    background-color: pink;
}
.son1 {
    /* 左浮动 */
    float: left;
    width: 200px;
    height: 300px;
    background-color: aqua;
}
.son2 {
    float: left;
    width: 100px;
    height: 400px;
    background-color: aquamarine;
}
.son3 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: brown;
}
p {
    /* 清除浮动 */
    clear: both;
}
ul li {
    float: left;
}

【12】2d转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./12-2d转换.css">
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

.father {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 200px auto;
}
.son {
    width: 300px;
    height: 300px;
    background-color: aqua;
    /* 移动 */
    transform: translateX(200px) translateY(100px);
    /* transform: translateY(100px)  单独写会覆盖; */
    /* 复合：x , y */
    transform: translate(50px,50px);
    /* 旋转 */
    transform: rotateX('45deg') rotateY('45deg');
    /* transform: rotateY('45deg');  会覆盖 */
    transform: rotateZ('40deg');    

    /* 复合移动、旋转、缩放时，一定要把旋转放最后一个 */
    
    /* 缩放 */
    transform: scaleX(1.5) scaleY(2);
    transform: scale(0.5);

    /* 改原点   对移动无影响，对旋转、缩放有影响 */
    transform-origin: top;
}

【13】3d转换：

旋转：

transform：rotate3D（）四个值：0，0，0，30deg x，y，z都不扭转30deg 1表示该轴扭转

缩放：

复合：transform：scale3d（x,y,z）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./13-3d转换.css">
</head>
<body>
    <div class="father">
        <div class="son">dshDJ</div>
    </div>
</body>
</html>

.father {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 200px auto;
    transform-style: preserve-3d;
    perspective: 800px;
}
.son {
    width: 300px;
    height: 300px;
    background-color: aqua;
    /* 移动 */
    transform: translateZ(-200px);

    transform-origin: left;
    /* 旋转 */
    transform-origin: top;
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    /* 缩放 */
    /* transform: scaleZ(2); */

    /* 背部可见性 */
    backface-visibility: hidden;
}

【14】过渡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./14-过渡.css">
</head>
<body>
    <div></div>
</body>
</html>

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 过渡 */
    transition-property: width,height,background-color;
    /* 设置时间 */
    /* transition-duration: 5s;
    transition-property: width,height,background-color; */
    /* 复合： */
    transition: all 3s steps(12);
}
div:hover {
    width: 700px;
    height: 800px;
    background-color: aqua;
}

【15】动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./15-动画.css">
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

/* 1、定义动画 */
@keyframes movie {
    from{
        transform: translate(0) rotate(0);
        border-radius: 0;
    }
    to {
        transform: translate(700px, 0) rotate(360deg);
        border-radius: 50%;
    }
}
.father {
    width: 800px;
    height: 100px;
    border: 1px solid black;
}
.son {
    width: 100px;
    height: 100px;
    background-color: aqua;
    /* 定义的动画名字 */
    animation-name: movie;
    /* 动画执行所需时间 */
    animation-duration: 4s;

    /* 复合：animation: movie 5s; */

    /* 动画延迟时间 */
    animation-delay: 1s;
    /* 动画方式   默认最后慢 */
    animation-timing-function: steps(12);
    /* 控制动画执行次数   infinite:无限*/
    animation-iteration-count: 3;
    /* 动画方向    alternate：默认往后*/
    animation-direction: reverse;
    /* 设置停放位置      forwards执行完的状态*/
    animation-fill-mode: forwards;
}
.father:hover {
    animation-play-state: paused;
}

【16】grad布局：

display : grid ;   存在兼容性问题
display : inline-grid ;


设置行列：

跟几组值，就代表几行几列
            /* grid-template-rows: 100px 100px 100px; */
片段划分：fr
            grid-template-rows: 1fr 3fr 1fr;
            grid-template-rows: 20% 30% 50%;

            /* grid-template-columns: 100px 200px 100px; */
            grid-template-columns: 1fr 1fr 1fr;

 /* 取值重复函数 repeat(num1,num2)    num1:重复次数     num2:重复的数值*/
            grid-template-columns: repeat(5, 1fr);
         /* 自动填充   用10%进行划分，划分不下来，不在划分 */
            grid-template-columns: repeat(auto-fill, 10%);

网格间距：
/* row-gap: 20px; */
/* column-gap: 20px; */

gap: 20px 40px;


添加项目：
grid-auto-flow:row/colimn;

项目对齐方式：
水平对齐方式：justify-items

垂直对齐方式:   align-items

网格位于容器的对齐方式：align-content