• 2022-08-23 第二小组 张明旭 前端学习记录

    目录

    重点归纳

    知识点

     CSS三大特性

    1.层叠性

    2. 继承性

    3.优先级

     常用的单位

    字体和图片的使用

    列表、边界样式

    练习

    盒子模型

    定位

    定位的left、margin-left的区别

    图片隐藏及小动画

    鼠标放在图片上之前

    鼠标放在图片上之后

    浮动

     内容坍塌与清除浮

     解决：清除列表ul中的浮动

    重点归纳

    • CSS三大特性
    • CSS选择器*****
    • 盒子模型
    • 定位
    • 浮动
    • 元素的隐藏

    知识点

     CSS三大特性

    1.层叠性

            一个标签可以有多个CSS样式

            浏览器处理冲突的能力：如果一个属性通过两个相同的选择器设置到元素上，样式的层叠规则按照样式的声明顺序来层叠，就近原则

            前提：选择器必须是同一种（例如都是类选择器）

            样式不冲突不会层叠

    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.         .fontStyle{
    10.             color: yellow;
    11.             font-size: 20px;
    12.         }
    13.         .a{
    14.             color: red;
    15.         }
    16.         .backgroundStyle{
    17.             background-color: green;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22. <-- 三个类选择器作用于h1 -->
    23. <h1 class="a fontStyle backgroundStyle">我是H1标签h1>
    24. body>
    25. html>

    2. 继承性

            子标签会继承父标签的某些样式

            比如说文本的颜色、字号

            但是文本样式不会继承

    3.优先级

    权重：

                （1）继承的权重=0：优先级最低

                （2）行内样式权重=100：优先级很高

                （3）权重相同时:就近原则，谁先声明谁在前。

                （4）！important：定义优先级

    CSS权重公式:

    1.             继承、*                   0,0,0,0
    2.             标签选择器                0,0,0,1
    3.             类、伪类选择器            0,0,1,0
    4.             ID选择器                 0,1,0,0
    5.             行内样式                 1.0.0.0
    6.             ！important              无穷大
    7.             width、height            大于无穷大
    8.             max-width、max-height    大于无穷大
    9.             min-width、min-height    大于无穷大

    ！important：如果同时有max-width、max-height,！important是不管用的

    例子：

                选择器 div ul li {}的权重等于他们的权重相加：0,0,0,3

                li{} 的权重等于：0,0,0,1

    例子：

                a:link{}的权重=0,0,1,1

                div a {}的权重=0,0,0,2

    权重不能被继承

    贡献值没有进位

    前提：CSS样式发生冲突

    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.  
    10.         h1{
    11.             color: blue;
    12.         }
    13.         .div{
    14.             height: 200px;
    15.             width: 200px;
    16.         }
    17.         p{
    18.             background-color: blueviolet !important;
    19.         }
    20.  
    21.         /* div下的ul下的li */
    22.         div ol li{
    23.             color: red;
    24.         }
    25.  
    26.         /* 这个页面上所有的li */
    27.         li{
    28.             color: yellow;
    29.         }
    30.  
    31.         a:link{
    32.             color: red;
    33.         }
    34.  
    35.         div a {
    36.             color: yellow;
    37.         }
    38.     style>
    39. head>
    40. <body>
    41. <div class=backgroundStyle>
    42.     <p style="background-color: red;">我是div里的pp>
    43. div>
    44.  
    45. <div>
    46.     <ol>
    47.         <li>123456li>
    48.         <li>123456li>
    49.         <li>123456li>
    50.     ol>
    51. div>
    52. <div>
    53.     <a href="#">a标签a>
    54. div>
    55. body>
    56. html>

     常用的单位

    1. px：像素（最常用）
    2. em：绝对单位，例如父级的像素字号为16px，我可以设置成2em，父类字号的2倍
    3. rem：由整个html的字号决定，当我们改变了浏览器的字号设置，页面的字号也会发生变化
    4. 百分比：相对父元素的比例

    字体和图片的使用

    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.         p {
    10.             /* 字体大小 */
    11.             font-size: 20px;
    12.             /* 字体样式 */
    13.             font-style: italic;
    14.             /* 字体粗细 */
    15.             font-weight: bold;
    16.             /* 字体修饰：取消下划线、上划线、删除线 等 */
    17.             text-decoration: none;
    18.             /* 字体 */
    19.             font-family: monospace;
    20.             /* 复合属性:直接定义多个font开头的属性 */
    21.             font: 30px italic bold;
    22.         }
    23.         div {
    24.             background-color: white;
    25.             width: 800px;
    26.             height: 400px;
    27.             background-image: url(./css/timg-10.jpeg);
    28.             /* 图片默认平铺，多个图片占满区域 */
    29.             background-size: 400px;
    30.             /* 不平铺 */
    31.             background-repeat: no-repeat;
    32.             /* 图片位置，默认上左 */
    33.             background-position: center;
    34.             /* 有复合属性 */
    35.             /* background:  no-repeat center; */
    36.         }
    37.     style>
    38. head>
    39. <body>
    40.     <input type="color">
    41.     <div>
    42.         <p>我是div里的pp>
    43.     div>
    44. body>
    45. html>

    列表、边界样式

    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.         div ul li{
    10.             /* 列表前的标识 */
    11.             /* 空心圆 */
    12.             list-style-type: circle;
    13.             /* 使用图片当做列表前的序号 */
    14.             list-style-image: url(./css/timg-10.jpeg);
    15.         }
    16.         .div1 {
    17.             width: 200px;
    18.             height: 200px;
    19.             background-color: yellow;
    20.             /* 圆角：像素为半径 */
    21.             border-radius: 50px;
    22.             border-bottom-left-radius: 100px;
    23.             /* 边界框样式：虚线 */
    24.             border-style: dashed;
    25.             /* 边界颜色 */
    26.             border-color: blueviolet;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31.     <div>
    32.         <ul>
    33.             <li>111li>
    34.             <li>222li>
    35.             <li>333li>
    36.             <li>444li>
    37.             <li>555li>
    38.             <li>666li>
    39.         ul>
    40.     div>
    41.     <div class="div1">div>
    42. body>
    43. html>

    结果

     

    练习

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 200px;
    12.             height: 200px;
    13.             /* display显示 */
    14.             display: inline-block;
    15.         }
    16.  
    17.         .div1,
    18.         .div4 {
    19.             border-bottom-left-radius: 50%;
    20.             border-top-right-radius: 50%;
    21.         }
    22.  
    23.         .div2,
    24.         .div3 {
    25.             border-bottom-right-radius: 50%;
    26.             border-top-left-radius: 50%;
    27.         }
    28.  
    29.         /* 区块属性：定义一个元素的显示方式 */
    30.         .div1 {
    31.             background-color: green;
    32.         }
    33.  
    34.         .div2 {
    35.             background-color: blue;
    36.         }
    37.  
    38.         .div3 {
    39.             background-color: yellow;
    40.         }
    41.  
    42.         .div4 {
    43.             background-color: red;
    44.         }
    45.  
    46.         .div5 {
    47.             background-color: orange;
    48.             /* 隐藏元素 */
    49.             display: none;
    50.         }
    51.     style>
    52. head>
    53.  
    54. <body>
    55.     <div class="div1"> div>
    56.     <div class="div2"> div>
    57.     <br>
    58.     <div class="div3"> div>
    59.     <div class="div4"> div>
    60.     <div class="div5">div>
    61. body>
    62.  
    63. html>

    结果： 

    盒子模型

    div、a、span都是盒子

    一个盒子中主要的属性有5个：width、height、padding、border、margin。

    1. width和height：内容的宽度、高度（不是盒子的宽度、高度）。
    2. padding：内边距。
    3. border：边框。
    4. margin：外边距。
    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.         .div1{
    10.             width: 300px;
    11.             height: 300px;
    12.             background-color: orange;
    13.             /* 外边距 */
    14.             margin-top: 100px;
    15.             margin-left: 100px;
    16.             /* 内边距 */
    17.             padding: 20px;
    18.             border: 10px solid red;
    19.             /* border-box：保证盒子的大小是300*300 ，不包括外边距*/
    20.             /* box-sizing: border-box; */
    21.             /* content-box保证div的大小为300*300，不包括内边距和边框线 */
    22.             box-sizing: content-box;
    23.             /* 
    24.             掌握：
    25.                 会算盒子的尺寸
    26.             */
    27.         }
    28.         .div2{
    29.             width: 300px;
    30.             height: 300px;
    31.             background-color: orange;
    32.             /* 可见性：隐藏盒子模型
    33.             display: none; */    
    34.             /* 溢出策略:例如：加滑动条、溢出部分隐藏等 */
    35.             overflow: scroll;
    36.         }
    37.     style>
    38. head>
    39. <body>
    40.     
    41.     <div class="div1">div>
    42.     <div class="div2">
    43.         <img src="../img/timg-10.jpeg" alt="">
    44.     div>
    45. body>
    46. html>

    定位

    文档流
            在网页中将窗体自上而下分为多个行
            并在每行从左到右的顺序排列元素，即为文档流


            定位position：让一些元素脱离文档流
            1.static：默认的文档流，自上而下，从左到右
            2.absolute：绝对定位
                相对一个父元素的绝对定位
                当设置了绝对定位之后，原来的元素会脱离文档流，在页面上浮起来
            3.relative：相对定位
                相当于上一个元素的位置进行定位，还是在文档流中，没有浮起来
            4.fixed：固定行为
                固定在页面的一个位置，不是网页的一个位置

    父相子绝
    父元素相对定位

    子元素绝对定位

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         .div1 {
    11.             width: 300px;
    12.             height: 300px;
    13.             background-color: orange;
    14.             /* 绝对定位 */
    15.             position: absolute;
    16.             left: 150px;
    17.             top: 50px;
    18.             /* 隐藏盒子模型
    19.             display: none; 
    20.             */
    21.         }
    22.  
    23.         .div2 {
    24.             width: 300px;
    25.             height: 300px;
    26.             background-color: skyblue;
    27.             /* 绝对定位 */
    28.             position: absolute;
    29.             /* 给一个类似于坐标的东西进行定位 */
    30.             left: 150px;
    31.             top: 400px;
    32.             /* 隐藏div2,但不隐藏盒子模型
    33.             visibility: hidden; 
    34.             */
    35.         }
    36.  
    37.         .container {
    38.             width: 800px;
    39.             height: 800px;
    40.             background-color: pink;
    41.             position: relative;
    42.             left: 200px;
    43.             top: 100px;
    44.         }
    45.         .nav{
    46.             width: 100%;
    47.             height: 100px;
    48.             background-color: red;
    49.             /* 水平居中 */
    50.             margin: auto;
    51.             /* 固定定位 */
    52.             position: fixed;
    53.             /* z轴的索引 */
    54.             z-index: 100;
    55.         }
    56.  
    57.     style>
    58. head>
    59.  
    60. <body>
    61.       <div class="nav">我是导航栏div>
    62.     <div class="container">
    63.         <div class="div1"> div>
    64.         <div class="div2"> div>
    65.     div>
    66. body>
    67.  
    68. html>


    定位的left、margin-left的区别

    用margin移动的位置是相对于它最开始的位置移动，margin是盒子的属性
    left等是相对于父元素的位置移动的，left是定位的属性

    开发中，用盒子模型就用margin，用定位就用left等
    使用定位之后不要用margin，

    图片隐藏及小动画

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 100px;
    12.             height: 1000px;
    13.             overflow: hidden;
    14.             /* 归于一行
    15.             float: left; */
    16.             display: inline-block;
    17.         }
    18.         div:hover{
    19.             overflow: unset;
    20.             width: 1694px;
    21.             height: 1000px;  
    22.         }
    23.     style>
    24. head>
    25.  
    26. <body>
    27.     <div>
    28.         <img src="../img/timg-10.jpeg" alt="">
    29.     div>
    30.     <div>
    31.         <img src="../img/timg-10.jpeg" alt="">
    32.     div>
    33.     <div>
    34.         <img src="../img/timg-10.jpeg" alt="">
    35.     div>
    36.     <div>
    37.         <img src="../img/timg-10.jpeg" alt="">
    38.     div>
    39.  
    40. body>
    41.  
    42. html>

    鼠标放在图片上之前

    鼠标放在图片上之后

    浮动

    使元素脱离文档流，（浮起来），进行重新排列，如果位置相同会覆盖文档流中元素

    div1、div2、div3浮动之前

    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.         .div1{
    10.             width: 300px;
    11.             height: 300px;
    12.             background-color: orange;
    13.             /* float: left; */
    14.         }
    15.         .div2{
    16.             width: 300px;
    17.             height: 300px;
    18.             background-color: skyblue;
    19.             /* float: left; */
    20.         }
    21.         .div3{
    22.             width: 300px;
    23.             height: 300px;
    24.             background-color: green;
    25.             /* float: left; */
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     
    31.      <div class="div1">div>
    32.      <div class="div2">div>
    33.      <div class="div3">div>
    34. body>
    35. html>

     div1浮动，在左上排序，div1覆盖div2，div3在div2下

    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.         .div1{
    10.             width: 300px;
    11.             height: 300px;
    12.             background-color: orange;
    13.             float: left;
    14.         }
    15.         .div2{
    16.             width: 300px;
    17.             height: 300px;
    18.             background-color: skyblue;
    19.             /* float: left; */
    20.         }
    21.         .div3{
    22.             width: 300px;
    23.             height: 300px;
    24.             background-color: green;
    25.             /* float: left; */
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     
    31.      <div class="div1">div>
    32.      <div class="div2">div>
    33.      <div class="div3">div>
    34. body>
    35. html>

     div1、div2浮动，在左上排列，div1覆盖div3

    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.         .div1{
    10.             width: 300px;
    11.             height: 300px;
    12.             background-color: orange;
    13.             float: left;
    14.         }
    15.         .div2{
    16.             width: 300px;
    17.             height: 300px;
    18.             background-color: skyblue;
    19.             float: left;
    20.         }
    21.         .div3{
    22.             width: 300px;
    23.             height: 300px;
    24.             background-color: green;
    25.             /* float: left; */
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     
    31.      <div class="div1">div>
    32.      <div class="div2">div>
    33.      <div class="div3">div>
    34. body>
    35. html>

     内容坍塌与清除浮

    例：

    当列表ul中的列都浮动之后，文档流中ul内容、大小为空，页面不显示ul的属性

    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.         li{
    10.             list-style: none;
    11.             height: 30px;
    12.             width: 100px;
    13.             float: left;
    14.             background-color: aqua;
    15.             margin-left: 20px;
    16.         }
    17.         ul{
    18.             background-color: pink;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     
    24.     <ul class="ulstyle">
    25.         <li>1111li>
    26.         <li>2222li>
    27.         <div style="clear:both">div>
    28.     ul>
    29. body>
    30. html>

     解决：清除列表ul中的浮动

    方法一

    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.         li{
    10.             list-style: none;
    11.             height: 30px;
    12.             width: 100px;
    13.             float: left;
    14.             background-color: aqua;
    15.             margin-left: 20px;
    16.         }
    17.         /* 如果不给ul尺寸---内容坍塌 */
    18.         ul{
    19.             background-color: pink;
    20.             /* 设置ul的尺寸随li的尺寸变化自动确定 :
    21.             在ul列表中加div块，清除浮动，解决内容坍塌
    22.             
    24.             */
    25.         }
    26.  
    27.     style>
    28. head>
    29. <body>
    30.     
    31.     <ul class="ulstyle">
    32.         <li>1111li>
    33.         <li>2222li>
    34.         <div style="clear:both">div>
    35.     ul>
    36. body>
    37. html>

     方法二

    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.         li{
    10.             list-style: none;
    11.             height: 30px;
    12.             width: 100px;
    13.             float: left;
    14.             background-color: aqua;
    15.             margin-left: 20px;
    16.         }
    17.         /* 如果不给ul尺寸---内容坍塌 */
    18.         ul{
    19.             background-color: pink;
    20.  
    21.         }
    22.         /* 
    23.         清除浮动方法二(推荐)：
    24.         通过CSS
    25.         伪类：after，在元素后加入内容。
    26.         */
    27.         .ulstyle:after{
    28.             content: '';
    29.             height: 0;
    30.             width: 0;
    31.             display: block;
    32.             visibility: hidden;
    33.             clear: both;
    34.         }
    35.     style>
    36. head>
    37. <body>
    38.     
    39.     <ul class="ulstyle">
    40.         <li>1111li>
    41.         <li>2222li>
    42.     ul>
    43. body>
    44. html>

    CSS3的动画：Transition

    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.         div{
    10.             /* Transition */
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: orange;
    14.             /* 动画变化 */
    15.             transition: width 2s ease-in 3s,height 3s,background-color ease-out 2s;
    16.         }
    17.         div:hover{
    18.             width: 500px;
    19.             height: 500px;
    20.             background-color: aqua;
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     
    26.      <div>div>
    27. body>
    28. html>

    CSS3的动画：anmiation

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         .div1 {
    11.             /* 引用自定义动画，延迟时间 */
    12.             animation: myAnim 5s;
    13.         }
    14.  
    15.         /* 先声明动画,再使用*/
    16.         @keyframes myAnim {
    17.             0% {
    18.                 width: 100px;
    19.                 height: 100px;
    20.                 background-color: orange;
    21.             }
    22.  
    23.             25% {
    24.                 width: 200px;
    25.                 height: 200px;
    26.                 background-color: blue;
    27.             }
    28.  
    29.             50% {
    30.                 width: 400px;
    31.                 height: 400px;
    32.                 background-color: red;
    33.                 transform: rotate(45deg);
    34.             }
    35.  
    36.             75% {
    37.                 width: 200px;
    38.                 height: 200px;
    39.                 background-color: blue;
    40.                 transform: rotateZ(180deg);
    41.             }
    42.  
    43.             100% {
    44.                 width: 100px;
    45.                 height: 100px;
    46.                 background-color: orange;
    47.                 transform: rotate3d(270deg);
    48.             }
    49.         }
    50.     style>
    51. head>
    52.  
    53. <body>
    54.     
    55.     
    56.     <div class="div1">123div>
    57. body>
    58.  
    59. html>

    flex（弹性）布局：了解

    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.         .container{
    10.             display: flex;
    11.             /* 排列方向 flex-direction:
    12.             row:从左到右
    13.             row-reverse：从右到左
    14.             */
    15.             flex-direction: row;
    16.             /* 
    17.             
    18.             如果一条轴线（一行)装不下，默认缩小排列在一行中
    19.             也可以选择方式换行：flex-wrap:
    20.             */
    21.             flex-wrap: wrap;
    22.             /* 设置主轴的排列策略（对齐方式） :例如居中*/
    23.             justify-content: center;
    24.             /* 交叉轴*/
    25.             align-items: center;
    26.             /* 父级div与父级div对齐方式 */
    27.             align-content: center;
    28.  
    29.             align-items:flex-start;
    30.             width: 900px;
    31.             height: 900px;
    32.             background-color: pink;
    33.         }
    34.         .flex1{
    35.             /* 
    36.             row:从左到右
    37.             row-reverse：从右到左
    38.             */
    39.             flex-direction: row;
    40.             width: 200px;
    41.             height: 200px;
    42.             background-color: green;
    43.             order: 1;
    44.                 /* 要将哪个项目放大，默认是0 */
    45.                 /* flex-grow: 2; */
    46.                 /* 要将哪个项目缩小,默认是0 */
    47.                 flex-shrink: 20;
    48.                 align-self: flex-end;
    49.         }
    50.         .flex2{
    51.             flex-direction: row;
    52.             width: 200px;
    53.             height: 200px;
    54.             background-color: yellow;
    55.             order: -2;
    56.         }
    57.     style>
    58. head>
    59. <body>
    60.     
    61.      <div class="container">
    62.         container
    63.         <div class="flex1">123div>
    64.         <div class="flex2">456div>
    65.         <div class="flex1">123div>
    66.         <div class="flex2">456div>
    67.         <div class="flex1">123div>
    68.         <div class="flex2">456div>
    69.         <div class="flex1">123div>
    70.         <div class="flex2">456div>
    71.      div>
    72. body>
    73. html>
  • 相关阅读:
    FreeRTOS学习笔记-软件定时器
    Python反复折磨斐波那契序列
    《Effective Objective-C 2.0》读书笔记——对象、消息、运行期
    “蔚来杯“2022牛客暑期多校训练营（加赛） E题: Everyone is bot
    在线打印资料的软件叫什么名字来着
    小程序富文本解析(mp-html组件)
    热像仪：使用 ESP32 和 MLX90640 传感器设计您自己的红外成像设备
    【毕业设计】基于javaEE+原生Servlet+MySql的企业员工信息管理系统设计与实现（毕业论文+程序源码）——企业员工信息管理系统
    Day38 性能测试理论
    17. map和set的模拟实现(也就是用红黑树封装map和set)
  • 原文地址：https://blog.csdn.net/weixin_71777094/article/details/126492537