• CSS详细汇总

    目录

    CSS概念

    理解

    CSS构成

    注意：

    CSS里面的注释

    CSS目的

    CSS分类

    属性相同时CSS优先级

    CSS选择器

    选择器优先级

    外部CSS

    外部CSS创建引入方式1

    引入外部样式表（放在哪里都可以）

    外部CSS创建引入方式2

    案例

    link和import之间的区别

    行内CSS

    内部CSS

    选择器

    标签名选择器

    类选择器

    交集选择器 

    格式：

    案例： 

    id选择器

    注意：

    通配符选择器

    分组选择器

    包含选择武器

    伪类选择器

    结构性伪类选择器

    目标伪类选择器

    UI元素状态伪类选择器

    否定伪类选择器

    动态伪类选择器

    层级选择器

    属性选择器

     模糊匹配的属性选择器

    伪元素（行内元素）

    CSS基本属性

    文本属性

    color属性写法

    text-transform属性值

    文本阴影案例

    列表属性

    list-style-position

    list-style合并属性

    背景属性

    background-repeat属性

    background-position属性 

    背景图片大小

    background-attachment属性

    背景复合属性

    设置内容可见性 

    visibility属性

    设置透明度

    opacity属性

    光标属性 

    cursor属性

    浮动属性

    浮动规则案例

    清浮动

    overflow属性让浮动父元素计算高度

    溢出属性 

    overflow属性值

    overflow属性分类

    空余空间

    属性值

    定位

    注意：

    粘性定位

    定位里的层级

    层级属性

    注意：

    绝对定位与浮动的区别

    宽高自适应

    宽度自适应

    自适应属性

    min-height属性

    窗口自适应

    CSS里面以%为单位

    cala函数

    注意：

    盒子模型

    边框

    border属性（复合属性）

    边框分类

    内边距

    内边距分类

    padding：复合内边距

    外边距

    外边距分类

    margin复合外边距

    注意：

    外边距的特性

    元素显示类型

    块元素

    行内元素

    行内块元素

    盒子阴影

    属性值

    圆角边框

    属性值

    两边值的个数对于值的分配遵循以下原则

    怪异盒模型

    标准盒模型

    怪异盒子模型·

    理解属性值

    弹性盒子

    功能：

    1.默认（说明可以改）让子元素（包括块级）横向排列

    2.子元素是行内元素则直接转化为块级元素 

    3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

    设置弹性盒子垂直排列方式

    主轴对齐方式

    属性值

    调整侧轴排列

    属性值

    调整是否挤压元素宽度（依然不会换行）

    属性值

    折行

    属性值

    调整折行之后的行间距

    属性值

    项目对齐方式

    属性值

    项目调整顺序

    剩余宽高

    网格布局

    flex与grid布局

    容器和项目

    网格布局中的属性

    容器属性

    触发网格布局

    行列划分

    属性值n的写法

    列间距（复合属性）

    指定区域

    网格布局对齐方式

    grid-auto-flow属性

    属性值

    单元格项目对齐

    单元格内容对齐

    网格布局项目属性

    网格线合并

    移动端

    模拟器上显示的分辨率

    移动端布局

    设置滚动条隐藏（全局生效）

    多列布局（瀑布流）

    属性

    响应式布局

    常见的布局方式

    响应式布局设计原则

    媒体查询

    媒体查询操作方式

    设备类型（默认为all）

    注意：

    常用媒体查询

    PC端或大屏幕设备

    通用断点

    字体引入

    语法规则

    rem布局开发

    px、em、rem单位

    基于375px宽度设计的网页在不同宽度客户端等比例缩放问题 

    vh与vm单位

     注意：

    精灵图

    图片整合的优势

    两栏布局与三栏布局 

    2种3栏布局方法

    第一种

    第二种 

    CSS渐变

    线性渐变

    direction属性

    direction也支持角度渐变

    径向渐变

    控制渐变

    注意：

    center属性改变渐变起点

    渐变起点：

    重复渐变

    重复线性渐变

    重复径向渐变

    过渡

    transition属性（复合属性）

    属性值

    transition-timing-function属性值

    逐帧动画 

    贝塞尔曲线

    transform（）属性（复合属性）

    属性值translate（值1，值2）

    属性值scale（）

    改变中心点位置为左上角（默认值为center）

    旋转

    rotate()属性

    多属性值的使用

    1.位移与缩放

    2.位移与旋转

    倾斜的

    属性：skew()

    关键帧动画

    animation与transition的区别

    animation属性 

    动画持续时间

    动画延迟时间

    动画过渡类型

    动画循环次数

    动画在循环中运行方向

    动画运行状态

    动画填充模式

    关键帧动画

    3D

    属性值

    3D位移动

    设置景深

    3D旋转

    3D缩放

    CSS概念

    定义：层叠样式表，用来修饰html的，目前遵循的W3C发布的CSS3.0

    理解

    1. 每个CSS样式由2部分组成，即选择符和声明，声明又分为属性和和属性值
    2. 属性必须发布放在花括号中，属性与属性值用：连接
    3. 每条声明用；结束
    4. 当一个属性有多个属性值时，属性与属性值不分先后顺序，用空格隔开
    5. 在书写样式过程中，空格，换行等操作不影响属性的显示

    CSS构成

    1. style>
    2.     h1{
    3.         color: rgb(239, 21, 21);
    4.         font-style: italic;
    5.     }
    6. </style>

    注意：

    • CSS选择器必须放在style标签内
    • style标签放在哪里都可以，并且可以写多个
    • CSS优先级body内style高于head内style
    • style标签是html提供的标签

    CSS里面的注释

    内容：/*注释内容*/

    CSS目的

    使用CSS属性来实现最终可以将CSS代码和HTML代码进行分离，同时也可以提高代码的复用性

    CSS分类

    1. 内部CSS：使用html提供的style标签把css代码包起来
    2. 外部CSS：从外部引入CSS
    3. 行内CSS：当前行有效，给标签内加一个style属性

    属性相同时CSS优先级

    行内CSS>内部CSS>外部CSS

    注意：加属性值后加!important 的所对应的属性优先级最高

    1.     h1{
    2.         color: rgb(228, 15, 33)!important;
    3.     }

    CSS选择器

    • 标签名选择器
    • class选择器
    • 交集选择器
    • id选择器
    • 属性选择器
    • 分组选择器
    • 通配符选择器
    • 包含选择器
    • 伪类选择器
    • 层级选择器

    选择器优先级

    外部CSS

    外部CSS创建引入方式1

    引入外部样式表（放在哪里都可以）

    <link rel="stylesheet" type="text/css" href="index.css"/>

    属性

    • link：本页面能和外部页面进行链接
    • href：表示本页面要链接的CSS文件的地址
    • type：表示本页面链接到的页面类型，这里链接的是CSS样式表（不写也可以）
    • rel：用来说明本页面与链接页面之间的关系

    注意：将内部样式表<style>……</style>里的资源剪切到css文件中（不包含style标签）并在表中引入<link rel="两表之间的关系" type="表的类型" href="css表的地址"/>

    外部CSS创建引入方式2

    1. <style type="text/css">
    2.         @import url("外部css的地址");
    3. </style>

    案例

    注意：css.html与index.css在同一个文件夹下

    1. <!-- css.html -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    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>外部css</title>
    9.     <style type="text/css">
    10.         @import url("index.css");
    11.     </style>
    12. </head>
    13. <body>
    14.     <h1>我是大神</h1>
    15. </body>
    16. </html>
    1. /* index.css */ 
    2.    h1{
    3.         color: aqua;
    4.     }

    link和import之间的区别

    行内CSS

    结构：<div style="width: 200px; height: 200px; color:blue">我是div</div>

    1. <!DOCTYPE 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>行内css</title>
    8. </head>
    9. <body>
    10.     <div style="width: 200px; height: 200px; color:blue">我是div</div><!--行内css-->
    11. </body>
    12. </html>

    内部CSS

    1. <!DOCTYPE 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>内部css</title>
    8. </head>
    9. <body>
    10.     <h1>实验</h1>
    11. </body>
    12. <style>
    13.     h1{
    14.         color: aqua;
    15.     }
    16. </style>
    17. </html>

    选择器

    目的：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制

    标签名选择器

    1. <body>
    2.     <h1>实验</h1>
    3. </body>
    4. <style>
    5.     /* 标签名选择器 */
    6.     h1{
    7.         color: aqua;
    8.     }
    9. </style>

    类选择器

    1. <body>
    2.     <div class="a">111111</div>
    3.     <div class="a">222222</div>
    4.     <div>333333</div>
    5. </body>
    6. <style>
    7.     /* 类选择器 */
    8.     .a{
    9.         color: aqua;
    10.     }
    11. </style>
    1. <body>
    2.     <div class="a">111111</div><!-- 绿色 -->
    3.     <!--可以出现属于2类的情况-->
    4.     <div class="a b">222222</div><!-- 绿色，以style标签靠后的类选择器为主，和啊a，b的标签内顺序无关（选择器加载覆盖） -->
    5.     <div>333333</div>
    6. </body>
    7. <style>
    8.     /* 类选择器 */
    9.     .b{
    10.         color: red;
    11.     }
    12.     .a{
    13.         color: green;
    14.     }
    15. </style>

    交集选择器 

    格式：

    选择器1选择器2{

                属性:属性值;

            }

    注意： 选择器和选择器之间没有任何连接符号

    案例： 

    1. <body>
    2.     <div class="a">我是div</div>
    3.     <p class="a">我是p</p>
    4. </body>
    5. <style>
    6.     /* 只选择div标签下的a类 */
    7.     div.a{
    8.         color: aquamarine;
    9.     }
    10. </style>
    1. <body>
    2.     <div>
    3.         <p name="a">一段话</p>
    4.         <div name="a">二段话</div>
    5.         <p name="b">三段话</p>
    6.     </div>
    7. </body>
    8. <style>
    9.     p[name="a"]{
    10.         color: blue;
    11.     }
    12. </style>

    id选择器

    1. <body>
    2.     <div id="a">111111</div>
    3.     <div>222222</div>
    4.     <div>333333</div>
    5. </body>
    6. <style>
    7.     /* id选择器 */
    8.     #a{
    9.         color: red;
    10.     }
    11. </style>

    注意：

    • 当我们使用id选择符时，应该为每个元素定义一个id属性
    • id选择符的语法格式是“#”加上自定义的id名
    • 起名是要取英文名，不能用关键字（所有标记和属性都是关键字）
    • 一个id名称只能对应文档中的一个具体元素对象（唯一性），和类不同

    通配符选择器

    1.  /* 通配符选择武器，不管什么都具有下面的属性 */
    2.     *{
    3.         color: aqua;
    4.     }

    分组选择器

    1. <body>
    2.     <div id="a">111111</div>
    3.     <div class="b">222222</div>
    4.     <div>333333</div>
    5. </body>
    6. <style>
    7.     /* 分组选择器,多个选择器之间用，连接 */
    8.     div,.b,#a{
    9.         color: red;
    10.     }
    11. </style>

    包含选择武器

    1. <body>
    2.     <div>
    3.         <p>我是一段话</p>
    4.     </div>
    5. </body>
    6. <style>
    7.     /* 包含选择器,下面表示选中div标签里的p标签，匹配原则：从右到左-由p到div */
    8.     div p{
    9.         color: red;
    10.     }
    11. </style>
    1. <body>
    2.     <div>
    3.         <p>我是一段话</p>
    4.     </div>
    5. </body>
    6. <style>
    7.     /* 相对于上面的空格，这种形式说明的是选择div下的一级p标签 */
    8.     div>p{
    9.         color: red;
    10.     }
    11. </style>

    伪类选择器

    结构性伪类选择器

    1. <body>
    2.    <div class="a">
    3.     <p>道生一</p>
    4.     <p>一生二</p>
    5.     <p>二生三</p>
    6.     <p>三生万物</p>
    7.    </div>
    8.    <div class="b"></div>
    9.    <div class="c"></div>
    10. </body>
    11. <style>
    12.     /* 匹配a类p标签下的最后一个标签 */
    13.    .a p:last-child{
    14.     color: red;
    15.    }
    16.    .a p:first-child{
    17.     color: blue;
    18.    }
    19.    /* 匹配a类p标签下的第二个标签 */
    20.    .a p:nth-child(2){
    21.     color: yellow;
    22.    }
    23.    /* 匹配a类p标签下的偶数位（even）标签奇数（odd）为2n+1/2n-1 */
    24.    .a p:nth-child(even){
    25.     color: pink;
    26.    }
    27. </style>
    1. <body>
    2.    <div class="a">
    3.     <p>道生一</p>
    4.     <p>一生二</p>
    5.    </div>
    6.    <div class="b">
    7.     <p>二生三</p>
    8.    </div>
    9.    <div class="c"></div>
    10. </body>
    11. <style>
    12.     /* 用:root代替html */
    13.     :root,body{
    14.         height: 100%;
    15.         background: yellow;
    16.     }
    17.     div{
    18.         width: 200px;
    19.         height: 200px;
    20.     }
    21.     /* 选出有且仅有一个孩子的标签 */
    22.    div p:only-child{
    23.     color: red;
    24.    }
    25.    /* 选出没有孩子的p元素,注意，空格和文字也算孩子 */
    26.    div:empty{
    27.     background: green;
    28.    }
    29. </style>

    目标伪类选择器

    1. <body>
    2.   <div class="a" id="a">a</div>
    3.   <div class="b" id="b">b</div>
    4.   <div class="c" id="c">c</div>
    5.     <ul>
    6.     <li><a href="#a">点我到a</a></li>
    7.     <li><a href="#b">点我到b</a></li>
    8.     <li><a href="#c">点我到c</a></li>
    9.     </ul>
    10. </body>
    11. <style>
    12.     div{
    13.         width: 1000px;
    14.         height: 1000px;
    15.     }
    16.     ul{
    17.         list-style: none;
    18.         position: fixed;
    19.         right: 0;
    20.         bottom: 300px;
    21.     }
    22.     a{
    23.         display: inline-block;
    24.         border: 1px solid blue;
    25.         text-decoration: none;
    26.     }
    27.     /* 选定div标签下锚点点到的div目标 */
    28.     div:target{
    29.         background: yellow;
    30.     }
    31. </style>

    UI元素状态伪类选择器

    E:focus：匹配获取焦点的元素E

    1. <body>
    2.   <form action="#">
    3.     用户名：<input type="text"><br>
    4.     密码：<input type="password" disabled><br>
    5.     记住用户名：<input type="checkbox"><br>
    6.     <input type="submit" value="提交">
    7.   </form>
    8.   <div>总有一天，我会改变世界</div>
    9. </body>
    10. <style>
    11.     /* 选中input标签可用状态的元素 */
    12.    input:enabled{
    13.     background: red;
    14.    }
    15.    /* 选中input标签不可用状态的元素 */
    16.    input:disabled{
    17.     background: yellow;
    18.    }
    19.    /* 选中input标签获取焦点的元素 */
    20.    input:focus{
    21.     background: green;
    22.    }
    23.    input:checked{
    24.     background: blue;
    25.    }
    26.    /* checked生效的条件，去掉默认样式，外观表现不生效(有个性) */
    27.    input[type=checkbox]{
    28.     /* 外观表现不生效 */
    29.     appearance: none;
    30.     /* 加样式 */
    31.     width: 20px;
    32.     height: 20px;
    33.     border: 1px solid pink;
    34.    }
    35.    /* 匹配div中被用户选中的部分 */
    36.    div::selection{
    37.     background: red;
    38.     color: aqua;
    39.    }
    40. </style>

    否定伪类选择器

    1. <body>
    2. <ul>
    3.     <li>111</li>
    4.     <li>222</li>
    5.     <li>333</li>
    6. </ul>
    7. </body>
    8. <style>
    9.     /* 否定伪类选择器，不选择第一个li */
    10.     li:not(:first-child){
    11.         background: red;
    12.     }
    13. </style>

    动态伪类选择器

    语法（style里面有顺序如下）

    层级选择器

    1. <body>
    2.     <ul>
    3.         <li>111</li>
    4.         <li class="a">222</li>
    5.         <li>333</li>
    6.         <li>444</li>
    7.         <li>555</li>
    8.     </ul>
    9. </body>
    10. <style>
    11.     /* 将a类后的第二个li标签进行选择 */
    12.     .a+li+li{
    13.         background: yellow;
    14.     }
    15. </style>
    1. <body>
    2.     <ul>
    3.         <li>111</li>
    4.         <li class="a">222</li>
    5.         <li>333</li>
    6.         <li>444</li>
    7.         <li>555</li>
    8.     </ul>
    9. </body>
    10. <style>
    11.     /* 将a类后所有的li标签进行选择 */
    12.     .a~li{
    13.         background: yellow;
    14.     }
    15. </style>

    注意：以上两种选择器生效于兄弟节点

    属性选择器

    1. <body>
    2.     <input type="text"/>
    3. </body>
    4. <style>
    5.     /* 属性选择器3种 */
    6.     [type]{
    7.         background-color: aquamarine;
    8.     }
    9.     /*完全匹配，如果类有2个值其中有一个值符合则不生效*/
    10.     [class="text"]{
    11.         height: 200px;
    12.     }
    13.     /*同上*/
    14.     input[type="text"]{
    15.         color: blue;
    16.     }
    17.     /* 类中有一个包含box1则生效 */
    18.     div[class~=box1]{
    19.         border: 1px solid blue;
    20.     }
    21. </style>

     模糊匹配的属性选择器

    • class^="b"：查找以b开头的
    • class$="b"：查找以b结尾的
    • class*="b"：查找包含b的
    1. <body>
    2.    <div class="bcc"></div>
    3.    <div class="cbc"></div>
    4.    <div class="ccb"></div>
    5. </body>
    6. <style>
    7.     /* 选择以b开头的 */
    8.     div[class^="b"]{
    9.         width: 20px;
    10.         height: 20px;
    11.         background: red;
    12.     }
    13.     /* 选择以b结尾的 */
    14.     div[class$="b"]{
    15.         width: 20px;
    16.         height: 20px;
    17.         background: green;
    18.     }
    19.     /* 选择包含b的 */
    20.     div[class*="b"]{
    21.         width: 20px;
    22.         height: 20px;
    23.         border: 1px solid blue;
    24.     }
    25. </style>

    伪元素（行内元素）

    1. <body>
    2.     <div>i am a dog</div>
    3. </body>
    4. <style> 
    5.    div::before{
    6.     /* 在div的前面加为元素，内容如下 */
    7.     content: "hello world";
    8.    }
    9.    div::after{
    10.     content: "haha";
    11.    }
    12. </style>
    1. <style> 
    2.    div::before{
    3.     /* 在div的前面加为元素，内容如下 */
    4.     content: "hello world";
    5.    }
    6.    /* 不占宽高的伪元素 */
    7.    div::after{
    8.     content: "我是个大字";
    9.     clear: both;
    10.     display: block;
    11.     width: 0;
    12.     height: 0;
    13.     visibility: hidden;/* 设置内容的可见性为隐藏 */
    14.    }
    15. </style>

    CSS基本属性

    文本属性

    word-spacling：词间距

    color：字体颜色

    text-transform: capitalize;

    text-overflow：ellipsis；（溢出并隐藏后的文本用…显示）

    text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——单）

    text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色，水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——多）

    注意：多阴影之间的多个阴影用，隔开 

    color属性写法

    • 直接写英文字母
    • rgb形式写灰度值，有4个参数，前3个为rgb灰度值，最后一个为透明度
    • #加6个16进制数，其中每2个16进制代表rgb的每个灰度值

    text-transform属性值

    • capitalize： 每一个单词首字母转大写
    • uppercase：每一个字母均转大写
    1. body>
    2.     <p class="a">我是一段话</p>
    3. </body>
    4. <style>
    5.    .a{/* 首行缩进2个汉字 */
    6.     text-indent: 2em;
    7.    }
    8. </style>
    1. <body>
    2.     <p class="a">hello world</p>
    3. </body>
    4. <style>
    5.    p{
    6.     /* 每一个单词首字母大写，如果是uppercase表示每一个字母均转大写 */
    7.     text-transform: capitalize;
    8.    }
    9. </style>

    文本阴影案例

    1. <body>
    2. <div>只要学不死，就往死里学</div>
    3. </body>
    4. <style>
    5.     div{
    6.         text-shadow: 10px 10px 2px red,-10px -10px 2px yellow;
    7.     }
    8. </style>

    列表属性

    1. <body>
    2.     <ul>
    3.         <li>11111</li>
    4.         <li>22222</li>
    5.         <li>33333</li>
    6.     </ul>
    7. </body>
    8. <style>
    9.     ul{
    10.         list-style-type: disc;
    11.     }
    12. </style>
    1. <body>
    2.     <ul>
    3.         <li>11111</li>
    4.         <li>22222</li>
    5.         <li>33333</li>
    6.     </ul>
    7. </body>
    8. <style>
    9.     ul{
    10.         /* 图片作为图标方式 */
    11.         list-style-image: url(../HTML/timg.jpg);
    12.     }
    13. </style>

    list-style-position

    作用：将标记放到盒子的里面还是外面

    1. <body>
    2.     <ul>
    3.         <li>11111</li>
    4.         <li>22222</li>
    5.         <li>33333</li>
    6.     </ul>
    7. </body>
    8. <style>
    9.     li{
    10.         border: 1px solid red;
    11.         list-style-position: outside;/* 外面 */
    12.     }
    13. </style>

    list-style合并属性

    相当于把list-style-type,list-style-image,list-style-position合并在一起

    1. <body>
    2.     <ul>
    3.         <li>11111</li>
    4.         <li>22222</li>
    5.         <li>33333</li>
    6.     </ul>
    7. </body>
    8. <style>
    9.     li{
    10.         border: 1px solid red;
    11.         list-style:disc none inside;/* 里面 */
    12.     }
    13. </style>

    背景属性

    background-size——背景图片大小(复合属性——宽 高） 

    1. <body>
    2.     <div>我是一段话</div>
    3. </body>
    4. <style>
    5.     div{
    6.         /* 背景颜色红色，半透明 */
    7.         background-color: rgba(255,0,0,0.5);
    8.     }
    9. </style>

    background-repeat属性

    注意：背景图片默认为平铺（当背景图片大小小于盒子大小时）

    属性

    • repeat：默认x、y轴都平铺
    • repeat-x：只在x轴进行平铺
    • repeat-y：只在y轴进行平铺
    • no-repeat：不平铺

    background-position属性 

    1. <body>
    2.     <div>我是一段话</div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 300px;
    7.         height: 300px;
    8.         background-image: url(../HTML/图片.jpg);
    9.         background-position: 20px 20px;/* 当然里面也可以写百分数,也可以写英文（left、center、right，top、center、bottom） */
    10.         opacity: 0.6;/* 设置图片透明度 */
    11.     }
    12. </style>

    背景图片大小

    属性：background-size(复合属性——宽 高）

    cover：把背景图片（等比例）扩展至足够大，使背景图片完全覆盖整个区域，但可能会丢失图片部分

    contion：会把图片（等比例）扩展，但会将图片完完整整显示在墙上

    1. <body>
    2.     <div>我是一段话</div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 300px;
    7.         height: 300px;
    8.         background-image: url(../HTML/图片.jpg);
    9.         background-size: 300px 300px;/* 宽 高（当然也可以用百分数） */
    10.     }
    11. </style>

    background-attachment属性

    • fixed：相对于浏览器窗口（屏幕）固定（不是页面）

    • scroll：相对于盒子固定（默认值）

    背景复合属性

    background属性

    1. <body>
    2.     <div>我是一段话</div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 300px;
    7.         height: 300px;
    8.         /*这里看不到图片，因为盒子大小不够*/
    9.         background:yellow url(../HTML/图片.jpg) no-repeat center fixed;
    10.     }
    11. </style>

    注意：会有覆盖现象        

    1. <style>
    2.     div{
    3.         width: 300px;
    4.         height: 300px;
    5.         background-color: yellow;
    6.         background:url(../HTML/图片.jpg) no-repeat;/* 因为这里没写属性，会把上面的颜色属性覆盖，认为没有颜色 */
    7.     }
    8. </style>

    设置内容可见性 

    visibility属性

    语法：visibility: 属性值;

    属性值

    • visible：定义元素内容可见（默认值）
    • hidden：定义元素内容不可见，但会占据原有位置
    • collapse：用在表格元素时会删除一行或一列，用在非表格元素上时和hidden效果一样
    • inherit：子元素的visibility属性从父元素继承

    display：none；与visibility：hidden；区别

    • display：none；：不占位的隐藏（看不见，摸不着）
    • visibility：hidden；：占位置的隐藏（看不见，摸得着）

    设置透明度

    opacity属性

    语法：opacity:0;

    当其值为0时表示透明，值为1时表示不透明

    1. <body>
    2.     <div></div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: blue;  
    9.     }
    10.     div:hover{
    11.         opacity:0;
    12.     }
    13. </style>

    光标属性 

    cursor属性

    语法：cursor:属性值；

    表示鼠标放在被cursor属性修饰的块内光标的显示结果 

    属性值

    • default：默认光标（通常是一个箭头）
    • auto：默认，浏览器设置的光标
    • crosshair：光标呈现为十字线
    • pointer：光标呈现为一只手
    • move：光标呈现表示某对象可移动的十字架型光标
    • text：光标指示可以对文本进行书写的I型光标
    • wait：光标指示程序正在忙（通常为一只表或一个沙漏）

    浮动属性

    注意：多个div如果都浮动那么他们就会按照先后浮动顺序依次排成一行，一行不够那么就开第二行，浮动的元素和不浮动的元素在一起则浮动的会把不浮动的元素盖住，但是文字不会被盖住

    1. <body>
    2.     <div class="red">我是一段</div>
    3.     <div class="green">我是二段</div>
    4.     <div class="blue">我是三段</div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 300px;
    9.         height: 300px;
    10.     }
    11.    .red{
    12.     background: red;
    13.     float: left;
    14.    }
    15.    .green{
    16.     background: green;
    17.     float: left;
    18.    }
    19.    .blue{
    20.     height: 400px;
    21.     background: blue;
    22.    }
    23. </style>

    注意：蓝色的部分虽然被红色覆盖，但是文字依然看得见 

    浮动规则：见缝插针

    1. <body>
    2.     <div class="red">我是一段</div>
    3.     <div class="green">我是二段</div>
    4.     <div class="blue">我是三段</div>
    5. </body>
    6. <style>
    7.    .red{
    8.     width: 1000px;
    9.     height: 900px;
    10.     background: red;
    11.     float: left;
    12.    }
    13.    .green{
    14.     width: 800px;
    15.     height: 800px;
    16.     background: green;
    17.     float: left;
    18.    }
    19.    .blue{
    20.     width: 600px;
    21.     height: 100px;
    22.     background: blue;
    23.     float: left;
    24.    }
    25. </style>

    浮动规则案例

    清浮动

    含义：清除浮动元素盖住不浮动元素的效果

    1. <body>
    2.     <div class="red">我是一段</div>
    3.     <div class="green">我是二段</div>
    4.     <div class="blue">我是三段</div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 300px;
    9.         height: 300px;
    10.     }
    11.    .red{
    12.     background: red;
    13.     float: left;
    14.    }
    15.    .green{
    16.     width: 600px;
    17.     background: green;
    18.     clear:left;/* 清浮动 */
    19.    }
    20.    .blue{
    21.     background: blue;
    22.    }
    23. </style>

    overflow属性让浮动父元素计算高度

    1. <body>
    2.     <div class="contain">
    3.         <div class="red">我是一段</div>
    4.     </div>
    5.     <div class="blue">我是三段</div>
    6. </body>
    7. <style>
    8.     .contain{
    9.         overflow: hidden;
    10.     }
    11.    .red{
    12.     width: 300px;
    13.     height: 300px;
    14.     background: red;
    15.     float: left;
    16.    }
    17.    .blue{
    18.     width: 300px;
    19.     height: 300px;
    20.     background: blue;
    21.    }
    22. </style>

    溢出属性 

    overflow属性值

    • visible：默认值，溢出内容会显示在元素之外
    • hidden：溢出内容隐藏
    • scroll：溢出内容以滚动方式显示，没有溢出也显示滚动条，只是不能用
    • auto：如果有溢出会添加滚动条，没有溢出则正常显示（没滚动条）
    • inherit：规定应该遵循父元素继承overflow属性

    overflow属性分类

    • overflow-x：x轴溢出
    • overflow-y：y轴溢出
    • overflow：x，y轴均能溢出
    1. <body>
    2. <div class="box1"><img src="../HTML/图片.jpg"/></div>
    3. </body>
    4. <style>
    5.    .box1{
    6.     width:200px ;
    7.     height: 200px;
    8.     background: yellow;
    9.     overflow-x: auto;
    10.     overflow-y: hidden;
    11.    }
    12. </style>

    空余空间

    white-space属性

    属性值

    • normal：默认值，空白（超出盒子范围）会被浏览器忽略
    • nowrap：文本不会换行，不管盒子范围，文本会在同一行上继续，直到遇到<br/>为止
    • pre：预格式化文本，文本不会折行
    • pre-wrap：预格式化文本，会折行
    • pre-line：显示回车，不显示空格，会换行

    定位

    static：默认按照文档流的顺序，从左到右，从上到下将网页填满（和行内与块级元素有关）

    注意：

    • 是否脱离文档流指是否脱离文档流的控制
    • 除了static定位之后的都可以设置属性（top、bottom、left、right）
    • 粘性定位也是脱离文档流的
    1. <body>
    2.     <div class="box1"></div>
    3.     <div class="box2"></div>
    4.     <div class="box3"></div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 200px;
    9.         height: 200px;
    10.     }
    11.     .box1{
    12.         background:red ;
    13.     }
    14.     .box2{
    15.         background:blue ;
    16.         position: relative;
    17.         top: 100px;
    18.         left: 100px;
    19.     }
    20.     .box3{
    21.         background: yellow;
    22.     }
    23. </style>

    粘性定位

    1. <body>
    2.     <div class="box1"></div>
    3.     <div class="box2"></div>
    4.     <div class="box3"></div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 200px;
    9.         height: 200px;
    10.     }
    11.     .box1{
    12.         height: 600px;
    13.         background:red ;
    14.     }
    15.     .box2{
    16.         background:blue ;
    17.         position: sticky;
    18.         top: 0px;
    19.     }
    20.     .box3{
    21.         height: 800px;
    22.         background: yellow;
    23.     }
    24. </style>

    定位里的层级

    如果两个兄弟块级元素定位到相同位置，那么后面定位的块会把前面定位的块盖住（后来居上），如果想要让之前的块级元素盖住后面定位的块级元素，那么需要设置层级，并且需要前面块级元素的层级大于后面块级元素的层级

    层级属性

    层级为10

    z-index：10；

    1. <body>
    2.     <div class="box1"></div>
    3.     <div class="box2"></div>
    4. </body>
    5. <style>
    6.     div{
    7.         width: 200px;
    8.         height: 200px;
    9.     }
    10.     .box1{
    11.         background:red ;
    12.         position: relative;
    13.         top: 10px;
    14.         right: 10px;
    15.         z-index: 10;/* 设置层级为10 */
    16.  
    17.     }
    18.     .box2{
    19.         background:blue ;
    20.         position: relative;
    21.         z-index: 1;
    22.     }
    23. </style>

    注意：

    • 层级可以设置为负值，值越大层级越大
    • 两个兄弟块级元素下生效，父级元素不能盖住子级元素，如果想要父级元素盖住子级元素，那么不需要父级元素设置层级，子级元素设置层级为负数即可
    • 绝对定位可以将行级元素直接转化为块级元素

    绝对定位与浮动的区别

    • float：半脱离文档流，文字环绕效果实现
    • absolute：全脱离，不会实现文字环绕效果

    宽高自适应

    宽度自适应

    width：auto；

    width/height属性不写或者auto都为宽/高自适应（自适应窗口大小，不会出滚动条——窗口盒子大小不变）

    自适应属性

    • min-height：最小高度
    • max-height：最大高度
    • min-width：最小宽度
    • max-width：最大宽度

    min-height属性

    min-height：500px；

    如果被修饰的块没内容，那么他会占高度500px，有内容则高度大于500px

    窗口自适应

    定义：盒子根据窗口大小进行改变

    /* 窗口自适应设定 */
    html,body{height: 100%;}

    1. <body>
    2.     <div>i am a pig</div>
    3. </body>
    4. <style> 
    5.     div{
    6.         width: 100%;
    7.         height: 100%;
    8.         background:red;
    9.     }
    10.     /* 窗口自适应设定 */
    11.     html,body{
    12.         height: 100%;
    13.     }
    14. </style>

    CSS里面以%为单位

    • 一个元素如果有父级元素，那么该子类元素设置宽高的百分数，以及定位的百分数是以父级元素的宽高为参考对象
    • 一个元素如果已经设置了宽高（包括以父级为参考对象的百分数形式以及固定像素），那么该元素如果进行位移（x/y轴）等操作是以子身宽（x轴）高（y轴）为参照

    cala函数

    用途：用于动态计算长度值

    注意：

    • 运算符的前后都需要保留一个空格
    • 任何长度都可以使用calc()函数进行计算
    • 该函数支持“+”、“-”、“*”、“/”运算
    • 该函数支持运算符优先级规则
    1. <body>
    2.     <div class="box1"></div>
    3.     <div class="box2"></div>
    4. </body>
    5. <style> 
    6.     .box1{
    7.         width: 200px;
    8.         height: 100%;
    9.         background:red;
    10.         float: left;
    11.     }
    12.     .box2{
    13.         /* calc函数使用场景 */
    14.         width: calc(100% - 200px);
    15.         height: 100%;
    16.         background:rgb(16, 195, 64);
    17.         float: left;
    18.     }
    19.     /* 窗口自适应设定 */
    20.     html,body{
    21.         height: 100%;
    22.     }
    23. </style>

    盒子模型

    盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素间的关系。CSS定义所有元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区。

    边框

    border属性（复合属性）

    内部包含3种属性

    • 线的宽度：border-width
    • 线的样式：border-style
    • 线的颜色：border-color

    线的样式

    • solid：实线
    • double：双实线
    • dashed：虚线
    • dotted：点状线
    1. <body>
    2.    <div class="box1">
    3.     我是个大神
    4.    </div>
    5. </body>
    6. <style>
    7.     .box1{
    8.        width: 100px;
    9.        height: 100px;
    10.        background: yellow;
    11.        border: 10px dashed transparent;/* 各个方向的边框均为此属性，透明边框 */
    12.     }
    13. </style>

    注意：背景颜色也能蔓延到边框中，但是边框不在盒子（宽高）范围内

    边框分类

    • border-top
    • border-bottom
    • border-left
    • border-right

    内边距

    padding：相对于自己的内部边距

    1. <body>
    2.    <div>
    3.     我是个大神
    4.    </div>
    5. </body>
    6. <style>
    7.     div{
    8.         width: 500px;
    9.         height: 500px;
    10.         background: yellow;
    11.         padding: 20px;/* div盒子内部各个方向内边距20px */
    12.     }
    13. </style>

    内边距分类

    • padding-left：左内边距
    • padding-right：右内边距
    • padding-top：上内边距
    • padding-bottom：下内边距

    padding：复合内边距

    • 1个值，4个方向一样
    • 2个值，上下，左右
    • 3个值，上，左右，下
    • 4个值，上，右，下，左 

    外边距

    margin：相对于自己的外部边距

    1. <body>
    2. <div class="box1">我是一个方块</div>
    3. <div class="box2">我也是一个方块</div>
    4. </body>
    5. <style>
    6.     div{
    7.         width: 100px;
    8.         height: 100px;
    9.     }
    10.     .box1{
    11.       background: red;
    12.       margin: 10px;/* box的四周外边距均为10px */
    13.     }
    14.     .box2{
    15.       background: yellow;
    16.     }
    17. </style>

    外边距分类

    • margin-left：左外边距
    • margin-right：右外边距
    • margin-top：上外边距
    • margin-bottom：下外边距

    margin复合外边距

    • 1个值，4个方向一样
    • 2个值，上下，左右
    • 3个值，上，左右，下
    • 4个值，上，右，下，左 

    注意：

    • 内边距不支持负数，但外边距支持负值
    • 设置盒子屏幕水平居中：margin:0 auto;（前面的0代表距离上面的像素）

    外边距的特性

    两个盒子垂直外边距与水平外边距问题

    • 垂直方向：外边距取最大值
    • 水平方向：外边距会进行合并叠加 

    给子盒子加外边距

    最终外边距作用在子盒子身上以父盒子为外 ，前提是设置边框，不设置边框的话那么就会外边距直接作用于父盒子身上

    元素显示类型

    块元素

    独占一行，可以设置宽高，遵循盒子模型（内外边距，边框均可设置）

    display：block；

    display：list-item；

    注意：p标签放文本可以，不能放块级元素 

    行内元素

    多个行内元素处于同一行，不能设置宽高，左右内外边距，边框均可设置，上下内外边距设置无效

    display：inline；

    行内块元素

    兼具行内元素和块级元素特征，支持盒子模型

    display：inline-block；

    隐藏属性

    display：none；

    盒子阴影

    box-shadow属性（复合属性）

    属性值

    1. <body>
    2. <div>只要学不死，就往死里学</div>
    3. </body>
    4. <style>
    5.    div{
    6.     width: 100px;
    7.     height: 100px;
    8.     background: yellow;
    9.     margin: 0 auto;
    10.     box-shadow: 10px 10px 10px 10px red,-10px -10px 10px blue inset;
    11.    }
    12. </style>

    注意：如果不加insert属性，那么默认是外阴影，加了insert属性就变内阴影,内外阴影如下

    圆角边框

    border-radius属性（复合属性）

    border-radius：圆角效果；

    注意：圆角效果的大小等于从矩形的顶点开始向两边延申的距离，到达指定距离的两个点之间用来形成圆角

    属性值

    • 一个值：四个角一样
    • 二个值：左上右下，左下右上
    • 三个值：左上，左下右上，右下
    • 四个值：左上，右上，右下，左下
    1. <body>
    2. <div></div>
    3. </body>
    4. <style>
    5.    div{
    6.     width: 200px;
    7.     height: 200px;
    8.     background: yellow;
    9.     margin: 0 auto;
    10.     /* 设置左下角为圆角 */
    11.     border-bottom-left-radius: 10px;
    12.    }
    13. </style>

    border-radius：水平距离/竖直距离；

    注意：这里的圆角效果的大小等于从矩形的顶点向水平延申的距离，以及竖直延申的距离，之后到达指定距离的两个点之间用来形成圆角，并且，这种写法只支持border-radius属性

    用来自定义多个角的话写法如下

    1. <body>
    2. <div></div>
    3. </body>
    4. <style>
    5.    div{
    6.     width: 200px;
    7.     height: 200px;
    8.     background: yellow;
    9.     margin: 0 auto;
    10.     border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
    11.    }
    12. </style>

    两边值的个数对于值的分配遵循以下原则

    • 一个值：四个角一样
    • 二个值：左上右下，左下右上
    • 三个值：左上，左下右上，右下
    • 四个值：左上，右上，右下，左下

    怪异盒模型

    含义：更改原盒子模型的计算方式通过box-sizing属性的取值进行更改

    属性：box-sizing——默认值是content-box（标准盒子模型）

    该属性允许您以特定的方式定义匹配某个区域的特定元素

    这是由CSS2.1规定的高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框

    标准盒模型

    属性值：content-box 

    怪异盒子模型·

    属性值：border-box

    为元素设定的宽度和高度决定了元素的边框盒子

    就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过已设定的宽度和高度分别减去边框和内边距才得到内容的宽度和高度

    理解属性值

    • border-box：盒子宽高以盒子大小为中心
    • content-box：盒子宽高以内容为中心
    1. <body>
    2.     <div class="box1"></div>
    3.     <div class="box2"></div>
    4. </body>
    5. <style>
    6.     /* 怪异盒子模型 */
    7.     .box1{
    8.         width: 200px;
    9.         height: 200px;
    10.         background: green;
    11.         padding: 30px;
    12.         border: 10 solid black;
    13.         box-sizing: border-box;
    14.     }
    15.     /* 普通盒子模型 */
    16.     .box2{
    17.         width: 200px;
    18.         height: 200px;
    19.         background: red;
    20.         margin-top: 100px;
    21.         padding: 30px;
    22.         border: 10 solid black;
    23.         box-sizing: content-box;
    24.     }
    25. </style>

    弹性盒子

    display：flex；

    功能：

    1.默认（说明可以改）让子元素（包括块级）横向排列

    1. <body>
    2.     <div class="box">
    3.         <div class="box1"></div>
    4.         <div class="box2"></div>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         background: green;
    12.     }
    13.     .box2{
    14.         width: 200px;
    15.         height: 200px;
    16.         background: red;
    17.     }
    18.     /*设置弹性盒子*/
    19.     .box{
    20.         display: flex;
    21.     }
    22. </style>

    2.子元素是行内元素则直接转化为块级元素 

    1. <body>
    2.     <div class="box">
    3.         <span class="box1">毁灭吧！</span>
    4.         <span class="box2">颤抖吧！</span>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         background: green;
    12.     }
    13.     .box2{
    14.         width: 200px;
    15.         height: 200px;
    16.         background: red;
    17.     }
    18.     /* 设置弹性盒子 */
    19.     .box{
    20.         display: flex;
    21.     }
    22. </style>

    3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

    1. <body>
    2.     <div class="box">
    3.         <span class="box1">毁灭吧！</span>
    4.     </div>
    5. </body>
    6. <style>
    7.     .box1{
    8.         width: 200px;
    9.         height: 200px;
    10.         background: green;
    11.         /* 只有1个元素的时候设置此元素水平垂直居中 */
    12.         margin: auto;
    13.     }
    14.     /* 设置弹性盒子 */
    15.     .box{
    16.         width: 600px;
    17.         height: 600px;
    18.         border: 1px solid black;
    19.         display: flex;
    20.     }
    21. </style>

    设置弹性盒子垂直排列方式

    属性：flex-direction

    属性值

    • row：正向横向排列（默认）
    • row-reverse：反向横向排列
    • column：正向垂直排列
    • column-reverse：反向垂直排列
    1. <body>
    2.     <div class="box">
    3.         <span class="box1">毁灭吧！</span>
    4.         <span class="box2">颤抖吧！</span>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         background: green;
    12.     }
    13.     .box2{
    14.         width: 200px;
    15.         height: 200px;
    16.         background: red;
    17.     }
    18.     /* 设置弹性盒子 */
    19.     .box{
    20.         width: 600px;
    21.         height: 600px;
    22.         border: 1px solid black;
    23.         display: flex;
    24.         /* 设置垂直拍列方式 */
    25.         flex-direction: column;
    26.     }
    27. </style>

    主轴对齐方式

    属性名：justify-content

    属性值

    • flex-start：左对齐
    • center：居中对齐
    • flex-end：右对齐
    • space-between：两端对齐
    • space-around：距离环绕（两端流出空隙为npx，每个块之间流出空隙为2npx）
    1. <body>
    2.     <div class="box">
    3.         <span class="box1">毁灭吧！</span>
    4.         <span class="box2">颤抖吧！</span>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         background: green;
    12.     }
    13.     .box2{
    14.         width: 200px;
    15.         height: 200px;
    16.         background: red;
    17.     }
    18.     /* 设置弹性盒子 */
    19.     .box{
    20.         width: 600px;
    21.         height: 600px;
    22.         border: 1px solid black;
    23.         display: flex;
    24.         /* 调整主轴对齐方式——居中 */
    25.         justify-content: center;
    26.     }
    27. </style>

    调整侧轴排列

    属性名：aline-items

    属性值

    • flex-start：左对齐（默认值）
    • center：居中对齐
    • flex-end：右对齐

    注意：在主轴上排列始终会在主轴排列，不会换行，不管块总宽度是否大于盒子宽度，如果大于则块宽度会被挤压变小

    调整是否挤压元素宽度（依然不会换行）

    属性：flex-shrink

    属性值

    • 0：禁止挤压
    • 1：允许挤压

    折行

    折行属性：flex-wrap

    作用：如果主轴显示不下就会直接折行，但是会行与行之间进行等间距排列

    属性值

    • wrap：折行
    • nowrap：不折行
    1. <body>
    2.     <div class="box">
    3.         <span class="box1">毁灭吧！</span>
    4.         <span class="box2">颤抖吧！</span>
    5.         <span class="box2">恐惧吧！</span>
    6.         <span class="box2">颤栗吧！</span>
    7.     </div>
    8. </body>
    9. <style>
    10.     span{
    11.         width: 200px;
    12.         height: 200px;
    13.         border: 1px solid red;
    14.     }
    15.     /* 设置弹性盒子 */
    16.     .box{
    17.         width: 600px;
    18.         height: 600px;
    19.         border: 1px solid black;
    20.         display: flex;
    21.         /* 调整主轴对齐方式——居中 */
    22.         justify-content: center;
    23.         /* 主轴显示不下会折行 */
    24.         flex-wrap: wrap;
    25.     }
    26. </style>

    调整折行之后的行间距

    属性名：align-content

    属性值

    • flex-start：左对齐
    • center：居中对齐
    • flex-end：右对齐
    • space-between：两端对齐
    • space-around：距离环绕

    项目对齐方式

    理解：设置弹性盒子的盒子为容器，容器里面的块级元素被称为项目，这是为弹性盒子每个项目设置的属性

    注意：可以脱离折行控制

    属性名：align-self

    属性值

    • flex-start：左对齐
    • center：居中对齐
    • flex-end：右对齐
    • baseline：和flex-start类似
    • stretch：拉伸，如果该项目盒子不设置高度那么该项目会默认占满弹性盒子高度（弹性盒子设置高度）的高度——这是相对横向为主轴来说，纵向为主轴，该项目会默认占满弹性盒子宽度
    1. <body>
    2.     <div class="box">
    3.         <div class="box1">毁灭吧！</div>
    4.         <div class="box2">颤抖吧！</div>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         border: 1px solid red;
    12.         align-self: center;
    13.     }
    14.     .box2{
    15.         width: 200px;
    16.         height: 200px;
    17.         border: 1px solid red;
    18.     }
    19.     /* 设置弹性盒子 */
    20.     .box{
    21.         width: 600px;
    22.         height: 600px;
    23.         border: 1px solid black;
    24.         display: flex;
    25.         /* 调整主轴对齐方式——居中 */
    26.         justify-content: center;
    27.     }
    28. </style>

    项目调整顺序

    order：0；

    注意：order值默认为0，order值越大，顺序越靠后，如果多个order值一样，那么就按正常顺序排列（order可以为负数）。

    剩余宽高

    flex：1；

    给项目加上此属性意思为占满剩余空间，如果多个项目flex属性相同，那么就会出现空间均分的情况，如果不同，则按比例换算自己占总的几份空间就占总的几份

    网格布局

    含义：将网页划分成一个个网格，可以任意组合成不同的网络，做出各种各样的布局

    flex与grid布局

    • flex布局是轴线布局，只能指定而且根据轴线位置，可以看作是一维布局
    • grid布局是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局

    容器和项目

    容器：一个案例中最大的盒子，可以理解成父元素

    项目：一个案例中，最大盒子里面的内容，可以理解成子元素

    行和列：容器里面水平区域称为行，垂直区域称为列

    单元格：行和列交叉的区域

    网格布局中的属性

    含义：网格布局中的属性和flex中的布局类似，分成了两类，一类容器属性，一类项目属性

    容器属性

    触发网格布局

    给父元素添加：display：grid；

    display关于网格的取值分为两个，grid（块网格）和inline-grid（行内块网格）

    • grid==容器从上向下排列
    • inline-grid==容器从左向右排列

    注意：给行内元素加display：grid；就可以将其变成块元素

    行列划分

    规定行属性：grid-template-row：n；

    规定列属性：grid-template-column：n；

    后面的取值数量代表多少行，多少列

    属性值n的写法

    绝对大小：npx

    百分比：n%

    注意：行或列百分比总和为100% 

    功能函数repeat（）

    auto-fill关键字（功能填充）配合功能函数使用 

    fr关键字 （列宽片段）

    为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意味片段）如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

    注意：以上5fr=表格列宽 

    1. <body>
    2.     <div class="box">
    3.         <div>1</div>
    4.         <div>2</div>
    5.         <div>3</div>
    6.         <div>4</div>
    7.         <div>5</div>
    8.         <div>6</div>
    9.         <div>7</div>
    10.         <div>8</div>
    11.         <div>9</div>
    12.     </div>
    13. </body>
    14. <style>
    15.     .box{
    16.         width: 600px;
    17.         height: 600px;
    18.         background: rgb(159, 12, 12,0.7);
    19.         display: grid;
    20.         /* 划分为3行3列网格 */
    21.         grid-template-rows: repeat(auto-fill,200px);
    22.         grid-template-columns: 1fr 1fr 1fr;
    23.     }
    24. </style>

    设置最小/最大值

    grid-template-rows: minmax(100px,200px) 200px 300px;

    minmax(100px,200px)：最小100px最高200px

    1. <body>
    2.     <div class="box">
    3.         <div>1</div>
    4.         <div>2</div>
    5.         <div>3</div>
    6.         <div>4</div>
    7.         <div>5</div>
    8.         <div>6</div>
    9.         <div>7</div>
    10.         <div>8</div>
    11.         <div>9</div>
    12.     </div>
    13. </body>
    14. <style>
    15.     .box{
    16.         width: 600px;
    17.         height: 600px;
    18.         background: rgb(159, 12, 12,0.7);
    19.         display: grid;
    20.         /* 划分为3行3列网格 */
    21.         grid-template-rows: minmax(100px,200px) 200px 300px;
    22.         grid-template-columns: repeat(3,200px);
    23.     }
    24. </style>

    列间距（复合属性）

    grid-gap：30px 30px；

    第一个值表示行间距，第二个值表示列间距

    指定区域

    合并网格的时候使用“grid-area：网格名字；”进行合并

    设置子元素区域名字

    grid-area: 区域名字；

    结果图

    1. <body>
    2.     <div class="box">
    3.         <div>1</div>
    4.         <div>2</div>
    5.         <div>3</div>
    6.         <div>4</div>
    7.         <div>5</div>
    8.         <div>6</div>
    9.         <div>7</div>
    10.         <div>8</div>
    11.         <!-- <div>9</div> -->
    12.     </div>
    13. </body>
    14. <style>
    15.     *{
    16.         margin: 0;
    17.         padding: 0;
    18.     }
    19.     .box{
    20.         width: 646px;
    21.         height: 646px;
    22.         border: 5px solid green;
    23.         display: grid;
    24.         grid-template-rows: repeat(3,200px);
    25.         grid-template-columns: 200px 200px 200px;
    26.         grid-row-gap: 20px;
    27.         grid-column-gap: 20px;
    28.         grid-template-areas:'a b c'
    29.                             'd e e'
    30.                             'g h i';
    31.     }
    32.     .box div{
    33.         /* 单元格边框 */
    34.         border: 1px solid red;
    35.     }
    36.     .box div:nth-child(1){
    37.         /* 设置第一个div子元素名字为a */
    38.         grid-area: e;
    39.         border: 1px solid blue;
    40.     }
    41. </style>

    注意：每个块占的位置只能是个矩形

    网格布局对齐方式

    grid-auto-flow属性

    设置子盒子排列方式为纵向排列

    grid-auto-flow: column;

    属性值

    • row：横向排列，默认值
    • column：纵向排列

    单元格项目对齐

    单元格内容对齐

     注意：单元格对齐方式默认为stretch，不加宽高才好用

    1. <body>
    2.     <div class="box">
    3.         <div>1</div>
    4.         <div>2</div>
    5.         <div>3</div>
    6.         <div>4</div>
    7.         <div>5</div>
    8.         <div>6</div>
    9.         <div>7</div>
    10.         <div>8</div>
    11.         <div>9</div>
    12.     </div>
    13. </body>
    14. <style>
    15.     *{
    16.         margin: 0;
    17.         padding: 0;
    18.     }
    19.     .box{
    20.         width: 600px;
    21.         height: 600px;
    22.         border: 5px solid green;
    23.         display: grid;
    24.         grid-template-rows: repeat(3,100px);
    25.         grid-template-columns: repeat(3,100px);
    26.         grid-auto-flow: column;       
    27.         /* 调整主元素水平对齐 */
    28.         justify-content:center;
    29.         /* 调整主元素竖直对齐 */
    30.         align-content: center;
    31.         /* 调整子元素水平对齐 */
    32.         justify-items: center;
    33.         /* 调整子元素竖直对齐 */
    34.         align-items: center;
    35.     }
    36.     .box div{
    37.         /* 单元格边框 */
    38.         border: 1px solid red;
    39.         width: 50px;
    40.         height: 50px;
    41.     }
    42. </style>

    网格布局项目属性

    网格线合并

    1. <body>
    2.     <div class="box">
    3.         <div>1</div>
    4.         <div>2</div>
    5.         <div>3</div>
    6.         <div>4</div>
    7.         <div>5</div>
    8.         <div>6</div>
    9.     </div>
    10. </body>
    11. <style>
    12.     *{
    13.         margin: 0;
    14.         padding: 0;
    15.     }
    16.     .box{
    17.         width: 600px;
    18.         height: 600px;
    19.         border: 5px solid green;
    20.         display: grid;
    21.         grid-template-rows: repeat(3,200px);
    22.         grid-template-columns: repeat(3,200px);
    23.     }
    24.     .box div{
    25.         /* 单元格边框 */
    26.         border: 1px solid red;
    27.     }
    28.     .box div:nth-child(1){
    29.         /* 起始列网格线是1 */
    30.         grid-column-start: 1;
    31.         /* 结束列网格线是3 */
    32.         grid-column-end: 3;
    33.         /* 起始行网格线是1 */
    34.         grid-row-start: 1;
    35.         /* 结束行网格线是3 */
    36.         grid-row-end: 3;
    37.         /* 因此1占2行共4个单元格 */
    38.     }
    39. </style>
    1.     .box div:nth-child(1){
    2.         /* 简写方式 */
    3.         grid-column: 1/3;
    4.         grid-row: 1/3;
    5.         /* 因此1占2行共4个单元格 */
    6.     }
    1.     .box div:nth-child(1){
    2.         /* 简写方式 */
    3.         grid-column: 2/4;
    4.         grid-row: 2/4;
    5.         /* 通过网格线改变块的位置与大小 */
    6.     }

    移动端

    模拟器上显示的分辨率

    • CSS像素：设备的独立像素
    • 物理分辨率：设备的像素

    设备像素比（dpr）=物理像素/CSS像素

    移动端布局

    布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

    视觉视口：视觉视口是指用户正在看到网页的区域，这个区域的宽度等同于移动设备浏览器窗口的宽度。

    理想视口：理想窗口是指对设备来讲最理想的视口尺寸，采用理想视觉窗口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    • width=device-width：宽度为设备宽度
    • initial-scale=1.0：设备初始值，1.0表示不缩放
    • user-scalable=no：用户不允许双击和捏放

    设置滚动条隐藏（全局生效）

    1.     /* 定制滚动条消失 */
    2.     ::-webkit-scrollbar{
    3.         display: none;
    4.     }

    多列布局（瀑布流）

    属性

    column-count：规定元素被分割的列数

    column-gap：规定列之间的间隔大小

    column-rule：调整列边框（复合属性）

    column-fill：设置或检索对象所有列的高度是否统一

    • auto：列高度自适应内容
    • balance：所有列的高度以其中最高的一列统一

    column-width：设置或检索对象每列的宽度 

    column-span：该元素是否横跨父级元素所有列

    • none：不跨列
    • all：横跨所有列

    break-inside：是否允许该盒子内部折行

    • auto：允许
    • avoid：不允许 
    1. <body>
    2.     <div>
    3.         <h1 class="a">hello world</h1>
    4.         <h1>hello world</h1>
    5.         <h1>hello world</h1>
    6.         <h1>hello world</h1>
    7.         <h1>hello world</h1>
    8.     </div>
    9. </body>
    10. <style>
    11.     div{
    12.         height: 300px;
    13.         background: pink;
    14.         /* div内容显示5列 */
    15.         column-count: 5;
    16.         /* 调整列间距 */
    17.         column-gap: 50px;
    18.         /* 调整列边框 */
    19.         column-rule: 2px solid red;
    20.         /* 列高度统一属性,会先占满列高度,可能达不到5列 */
    21.         column-fill:auto;
    22.         /*调整列宽 */
    23.         column-width: 100px;
    24.     }
    25.     .a{
    26.         /* 横跨所有的列 */
    27.         column-span: all;
    28.         text-align:center;
    29.     }
    30.     h1{
    31.         /* 不允许盒子内部进行折行 */
    32.         break-inside: avoid;
    33.     }
    34. </style>

    响应式布局

    定义：按照屏幕的大小进行动态的响应，快速的反应，快速的处理让每个屏幕都能在这套网页中很好的展示，这就叫响应式布局

    常见的布局方式

    固定布局：以像素作为页面的基本单位，不管设备屏幕以及浏览器宽度，只设计一套尺寸

    可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同的宽度布局。通过识别的屏幕尺寸以及浏览器宽度，选择最合适的那套宽度布局

    弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕以及浏览器宽度，并能完美的利用有效空间展现最佳效果

    混合布局：同弹性布局类似，可适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面的基本单位

    布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有2种方式

    • PC优先：从PC端开始向下设计
    • 移动优先：从移动端向上设计

    无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称为布局断点）

    响应式布局设计原则

    • 模块内容挤压拉伸——布局不变
    • 模块中内容换行平铺——布局不变
    • 模块中内容删减增加——布局不变
    • 模块位置改变——布局改变
    • 模块展示方式改变：隐藏-展开——布局改变

    媒体查询

    媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设置CSS样式，媒体查询由媒体类型和一个或者多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height、color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备制定显示效果。

    媒体查询操作方式

    对设备提出询问（表达书）开始，如果表达式为真，媒体查询中的CSS被应用，若为假则忽略

    媒体查询结构

    1.     @media all and(min-width:320px){
    2.         body{
    3.             background: red;
    4.         }
    5.     }

    理解：对于所有的媒体，若宽度>=320px则使用如下样式

    设备类型（默认为all）

    注意：

    • and被称为关键字，其他关键字还包括not（排除某种设备），only（仅限某种设备）
    • （min-width：400px）就是媒体特性，其被放置在一对圆括号中

    常用媒体查询

    PC端或大屏幕设备

    @media only screen and (min-width:1029px){}

    orientation属性

    • portration：竖屏
    • landscape：横屏 

    竖屏时执行后面操作

    @media screen and (orientation:portrait) and (max-width:720px){}

    横屏时执行后面操作

    @media screen and (orientation:landscape){}

    注意：当宽度比高度大的时候浏览器认为是横屏，否则为竖屏 

    通用断点

    1. <style>
    2.     *{
    3.         margin: 0;
    4.         padding: 0;
    5.     }
    6.     html,body{
    7.         height: 100%;
    8.     }
    9.     /* width>1000px */
    10.     @media screen and (min-width:1000px) {
    11.         body{
    12.             background: blue;
    13.         }
    14.     }
    15.     /* width<500 */
    16.     @media screen and (max-width:500px) {
    17.         body{
    18.             background: red;
    19.         }
    20.     }
    21.     /* 500px<width<1000px */
    22.     @media screen and (max-width:1000px) and (min-width:500px) {
    23.         body{
    24.             background: green;
    25.         }
    26.     }
    27. </style>

    字体引入

    字体模块：@font-face

    语法规则

    @font-face{

    font-family:<YourWebFontName>;

    src:<source>[<format>][,<soure>[format>]]*;

    [font-weight:<weight>];

    [font-style:<style>];

    }

    • font-family：自定义字体名字
    • src：字体文件路径
    • font-weight：字体加粗
    • font-style：字体样式改变
    1. <body>
    2.     <div>赵钱孙礼</div>
    3. </body>
    4. <style>
    5.     @font-face {
    6.         font-family: hello;
    7.         src: url("字体样式路径");
    8.     }
    9.     div{
    10.         font-family: hello;
    11.         font-size: 50px;
    12.     }
    13. </style>

    rem布局开发

    目的：解决移动端等比例缩放问题

    px、em、rem单位

    • px：像素单位
    • em：相对于父元素字体大小的单位，如父元素字体大小为16px则1em=16px
    • rem：相对于根元素（html）的字体大小
    1. <body>
    2.     <div class="div1">
    3.         <p>div1</p>
    4.     </div>
    5.     <div class="div2">
    6.         <p>div2</p>
    7.     </div>
    8. </body>
    9. <style>
    10.     html{
    11.         font-size: 32px;
    12.     }
    13.     .div1,.div2{
    14.         border: 1px solid red;
    15.         font-size: 16px;
    16.     }
    17.     .div1 p{
    18.         font-size: 1rem;
    19.     }
    20.     .div2 p{
    21.         font-size: 2em;
    22.     }
    23. </style>

    基于375px宽度设计的网页在不同宽度客户端等比例缩放问题 

    1. <body>
    2.     <div class="box">
    3.         hello
    4.     </div>
    5. </body>
    6. <style>
    7.     .box{
    8.         width: 3.75rem;
    9.         height: 100px;
    10.         background: red;
    11.     }
    12. </style>
    13. <script>
    14. /* html标签的fontSize随着clientWidth动态改变 */
    15. document.documentElement.style.fontSize=document.documentElement.clientWidth/375 * 100 +'px'
    16. </script>

    vh与vm单位

    • vh：view-height，100vh等于视口的高度
    • vw：view-width，100vw等于视口的宽度

     注意：

    • 不同终端的视口不同，vh与vw也不同
    • 没有滚动条时100vw等于100%，如果有滚动条时100vw包含滚动条其为窗口大小，而100%为刨除滚动条后的窗口大小

    精灵图

    功能：将导航背景图片，按钮背景图片等有规则的合成一张背景图，即多张图片合为一整图，然后用background-position来实现背景图片的定位技术

    图片整合的优势

    • 通过图片整合来减少对服务器的请求次数，从而提高加载速度
    • 通过整合图片来减少图片体积

    两栏布局与三栏布局 

    两栏布局：左边固定，右边块自适应

    三栏布局：两边固定，中间块自适应

    2种3栏布局方法

    第一种

    1. <body>
    2.     <div class="left"></div>
    3.     <div class="right"></div><!-- 在不浮动块的前面 -->
    4.     <div class="center"></div><!--因为其是块级元素独占一行-->
    5. </body>
    6. <style> 
    7.     .left,.right{
    8.         width: 200px;
    9.         height: 100%;
    10.     }
    11.     .left{
    12.         background: red;
    13.         float: left;
    14.     }
    15.     .right{
    16.         background: blue;
    17.         float: right;
    18.     }
    19.     .center{
    20.         height: 100%;
    21.         background: pink;
    22.         margin-left: 200px;
    23.         margin-right: 200px;
    24.     }
    25.     /* 窗口自适应设定 */
    26.     html,body{
    27.         height: 100%;
    28.     }
    29. </style>

    第二种 

    1. <body>
    2.     <div class="left"></div>
    3.     <div class="center"></div>
    4.     <div class="right"></div>
    5. </body>
    6. <style> 
    7.     .left,.right{
    8.         width: 200px;
    9.         height: 100%;
    10.     }
    11.     .left{
    12.         background: red;
    13.         float: left;
    14.     }
    15.     .right{
    16.         background: blue;
    17.         float: right;
    18.     }
    19.     .center{
    20.         width: calc(100% - 400px);
    21.         height: 100%;
    22.         background: pink;
    23.         float: left;
    24.     }
    25.     /* 窗口自适应设定 */
    26.     html,body{
    27.         height: 100%;
    28.     }
    29. </style>

    CSS渐变

    定义：用CSS方式实现的一个颜色到另一个颜色之间的平稳的过渡

    线性渐变

    background: linear-gradient(direction,color1,color2);

    direction属性

    • to bottom：从上向下渐变（默认）
    • to top：从下向上渐变
    • to left：从右向左渐变
    • to right：从左向右渐变

    direction也支持角度渐变

    background: linear-gradient(90deg,red,blue); 

    理解：red在下面，blue在上面，随着度数的增加顺时针旋转 

    注意：颜色可以写多个值，支持多颜色渐变 ，颜色后面也可以加百分比来控制渐变

    1. <body>
    2.     <div class="box">
    3.         hello world
    4.     </div>
    5. </body>
    6. <style>
    7.     html,body{
    8.         width: 100%;
    9.         height: 100%;
    10.     }
    11.     div{
    12.         height: 100%;
    13.         background: linear-gradient(to top left,red,blue);
    14.     }
    15. </style>

    径向渐变

    径向渐变不同于线性渐变，线性渐变是从一个方向向另一个方向的渐变，而径向渐变是从一个点向四周的渐变

    background: radial-gradient(center,shape,size,color1,color2);

    center：渐变起点位置

    shape：渐变的形状

    • ellipse：椭圆形（默认）
    • circle：圆形

    size：渐变的大小，即渐变到哪里停止

    • closest-side：最近边
    • farthest-side：最远边
    • closest-corner：最近角
    • farthest-corner：最远角

    控制渐变

     background: radial-gradient(red 5%,green 20%,blue 30%);

    理解：5%的前面全为红色，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后不需要渐变剩下区域全为蓝色

    注意：

    • 颜色可以写多个
    • color1为最内侧颜色，之后的颜色逐渐往外侧延申

    center属性改变渐变起点

    background: -webkit-radial-gradient(20% 40%,red,green,blue);

    -webkit-radial-gradient解决浏览器兼容问题，从浏览器内核的角度支持一下此属性的设置 

    渐变起点：

    • 20%：从左向右为x轴的20%
    • 40%：从上到下为y轴的40%

    重复渐变

    重复线性渐变

    background: repeating-linear-gradient(red 5%,green 20%,blue 30%);

    理解：5%的前面承接100%后面，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后又开始重复上述过程，直到到达100%

    重复径向渐变

    background: repeating-radial-gradient(red 5%,green 20%,blue 30%);

    过渡

    含义：CSS3的transition允许CSS的属性值在一定时间区间内平滑的过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性值

    transition属性（复合属性）

    transition: all 5s 3s linear;

    属性值

    all：单一属性-transition-property：检索或设置对象中参与过渡的属性（all表示所有属性均变）

    5s：单一属性-transition-duration：检索或设置对象过渡的持续时间

    3s：单一属性-transition-dely：检索或设置对象延迟过渡的时间（什么时候开始过渡）

    linear：单一属性-transition-timing-function：检索或设置对象中过渡的动画类型

    简写：transition：all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

    注意：单一属性transition-property写属性值可以写多个，中间用空格隔开 

    1. <body>
    2.     <div class="box"></div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: red;
    9.         transition: all 5s 3s linear;
    10.     }
    11.     div:hover{
    12.         width: 600px;
    13.         height: 600px;
    14.     }
    15. </style>

    transition-timing-function属性值

    逐帧动画 

    steps（n）：动画执行的步数——8步

    transition: all 5s 1s steps(8);

    贝塞尔曲线

    transition: all 5s 1s cubic-bezier(值1，值2，值3，值4)；

    其可以自定义变速动画

    transform（）属性（复合属性）

    属性值translate（值1，值2）

    含义：将元素向指定方向移动

    • 水平移动：向右移动translate（npx，0）向左移动translate（-npx，0）
    • 垂直移动：向上移动translate（0，-npx）向下移动translate（0，npx）
    • 双角移动：右下角移动translate（npx，npx），右上角移动translate（npx，-npx），左上角移动translate（-npx，-npx），左下角移动translate（-npx，npx）

    translateX（npx）：水平方向移动一个对象，对象只在x轴上进行移动npx，若内部为正值，则对象右移，反之左移

    translateY（npx）：竖直方向移动一个对象，对象只在y轴上进行移动npx，若内部为正值，则对象下移，反之上移

    属性值scale（）

    含义：让元素根据中心圆点进行缩放，默认值为1.因此0.01-0.99之间任何值是一个元素缩小，任何大于1的值使元素显得更大

    该函数可以接受1个值也可以接受2个值，若只有一个值时，其第二个值默认与第一个值相等

    • scaleX(n)：元素在水平方向上缩放元素
    • scaleY(n)：元素在竖直方向上缩放元素
    • scale(n)：元素在整个平面上缩放元素

    注意：该放大为中心点放大，里面的值为负数时会出现倒像

    1. <body>
    2.     <div></div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: blue;
    9.         border: 1px solid red;
    10.         transition: all 2s;
    11.         margin: 0 auto;
    12.     }
    13.     div:hover{
    14.         /* xy轴放大1.5倍 */
    15.         transform: scale(1.5);
    16.     }
    17. </style>

    改变中心点位置为左上角（默认值为center）

    transform-origin: left top;

    旋转

    rotate()属性

    rotate(n)方法：通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对于原点中心顺时针旋转；若为负，则逆时针旋转。

    rotateX(n)方法，元素围绕其x轴以给定的度数进行旋转，它主要在三维空间内进行操作

    rotateY(n)方法，元素围绕其y轴以给定的度数进行旋转，它主要在三维空间内进行操作

    注意rotate(n)等价于rotateZ(n)

    多属性值的使用

    1.位移与缩放

    1. <body>
    2.     <div class="box">
    3.         <div></div>
    4.         <div></div>
    5.         <div></div>
    6.     </div>
    7. </body>
    8. <style>
    9.     .box{
    10.         width: 600px;
    11.         height: 600px;
    12.         border: 2px solid gray;
    13.     }
    14.     .box div{
    15.         width: 200px;
    16.         height: 200px;
    17.         background: red;
    18.         border: 1px solid black;
    19.     }
    20.     .box div:nth-child(1){
    21.         transform: translateX(400px);
    22.     }
    23.     .box div:nth-child(2){
    24.         transform: translateX(400px) scale(0.5);
    25.     }
    26.     .box div:nth-child(3){
    27.         transform: scale(0.5) translateX(400px);
    28.     }
    29.     /* 2，3产生不同情况的原因，盒子缩放时位移的距离也跟着缩放，进而导致结果不同 */
    30. </style>

    2.位移与旋转

    1. <body>
    2.     <div class="box">
    3.         <div></div>
    4.         <div></div>
    5.         <div></div>
    6.     </div>
    7. </body>
    8. <style>
    9.     .box{
    10.         width: 600px;
    11.         height: 600px;
    12.         border: 2px solid gray;
    13.     }
    14.     .box div{
    15.         width: 100px;
    16.         height: 100px;
    17.         background: red;
    18.         border: 1px solid black;
    19.     }
    20.     .box div:nth-child(1){
    21.         transform: translateX(400px);
    22.     }
    23.     .box div:nth-child(2){
    24.         transform: translateX(400px) rotate(45deg);
    25.     }
    26.     .box div:nth-child(3){
    27.         transform: rotate(45deg) translateX(400px);
    28.     }
    29.     /* 2，3产生不同情况的原因，盒子旋转时导致坐标轴旋转，进而位置不同 */
    30. </style>

    注意：transform内可以写多个属性，但是掌握好先后顺序，不可以在一个块中写多个transform，因为会出现覆盖导致生效的只有最后一个

    倾斜的

    属性：skew()

    该函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕x轴和y轴按照一定的角度倾斜

    • 一个参数：表示水平方向倾斜的角度
    • 二个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
    1. <body>
    2.     <div>hello</div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: red;
    9.         line-height: 200px;
    10.         text-align: center;
    11.         border: 1px solid black;
    12.         font-size: 50px;
    13.         margin: 0 auto;
    14.         transform: skewX(30deg);
    15.         /* 正值表示抓着右下角往右拉动，直至把上面的角拉的多出对应度数
    16.            负值表示抓着左下角往左拉动，直至把上面的角拉的多出对应度数*/
    17.     }
    1. <body>
    2.     <div>hello</div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: red;
    9.         line-height: 200px;
    10.         text-align: center;
    11.         border: 1px solid black;
    12.         font-size: 50px;
    13.         margin: 0 auto;
    14.         transform: skew(30deg,30deg);
    15.         /* 抓着右下角往右下分别拉动 */
    16.     }
    17. </style>

    关键帧动画

    animation与transition的区别

    相同点：都是随着时间改变元素的属性值

    不同点：transition需要触发一个事件（hover事件或click事件）才会随着时间改变CSS属性；而animation在不需要触发任何事件的情况下也可以显示的随着时间的变化来改变元素的属性值从而达到一个动画的效果，css3的animation就需要明确的动画属性值

    animation: ppt2 2s linear 1s 10 alternate;

    animation属性 

    动画持续时间

    animation-duration: 2s; 

    动画延迟时间

    animation-delay: 5s; 

    动画过渡类型

    animation-timing-function: linear; 

    动画循环次数

    animation-iteration-count: infinite;

    • 数字：代表循环一定次数
    • infinite：代表循环无限次

    动画在循环中运行方向

    animation-direction: alternate;

    • alternate：正常方向交替运行
    • alternate-reverse：反方向交替运行
    • normal：默认正常状态，不支持反向
    • reverse：从结果开始反向运动

    动画运行状态

    animation-play-state: running; 

    • running：运行中，默认
    • paused：暂停 
    1. <body>
    2.     <div></div>
    3. </body>
    4. <style>
    5.     div{
    6.         width: 200px;
    7.         height: 200px;
    8.         background: red;  
    9.         animation: ppt2 2s linear 1s 10 alternate-reverse;
    10.     }
    11. /* 声明动画第一种写法 */
    12. @keyframes ppt1 {
    13.     from{
    14.         width: 200px;
    15.         height: 200px;
    16.         background: red;
    17.     }
    18.     to{
    19.         width: 400px;
    20.         height: 600px;
    21.         background: blue;
    22.     }
    23. }
    24. /* 第二种写法，可以支持多种状态 */
    25. @keyframes ppt2 {
    26.     0%{
    27.         width: 200px;
    28.         height: 200px;
    29.         background: red;
    30.     }
    31.     50%{
    32.         width: 400px;
    33.         height: 600px;
    34.         background: blue;
    35.     }
    36.     100%{
    37.         width: 800px;
    38.         height: 800px;
    39.         background: pink;
    40.     }
    41. }
    42. </style>

    动画填充模式

    animation-fill-mode: forwards;

    属性值

    • none：默认值，没有动画填充
    • forwards：保留最后一帧状态
    • backwards：保留第一帧的初始状态

    注意：动画填充模式不是无限循环时使用 

    关键帧动画

    animation: run 3s steps(1,start);

     这里的1表示从第一帧到第二帧只需要1步，没有多余过渡 

    • end（保留当前帧，看不到最后一帧，动画结束看不见）
    • start(保留下一帧，看不到第一帧，从第一帧很快跳到下一帧) 因为从第一帧开始

    注意：

    • step-start等于steps(1,start);
    • step-end等于steps(1,end);

    3D

    transform-style: preserve-3d;

    属性值

    • flat：2D舞台（默认）
    • preserve-3d：3D舞台

    3D位移动

    transform:translateZ(100px);

    transform: translate3d(0,0,100px);

    3个参数分别为x，y，z轴移动

    设置景深

    perspective:900px; 

    设置景深——视觉感受：近大远小,上面的意思是对象距离我们900px 

    向z轴移动100px

    1. <body>
    2. <div class="box">
    3.     <div class="center">
    4.     </div>
    5. </div>
    6. </body>
    7. <style>
    8.     .box{
    9.         width: 500px;
    10.         height: 500px;
    11.         border: 5px solid black;
    12.         transform-style: preserve-3d;
    13.         position: relative;
    14.         margin: 0 auto;
    15.         perspective:900px;
    16.     }
    17.     .center{
    18.         position: absolute;
    19.         width: 200px;
    20.         height: 200px;
    21.         background: red;
    22.         left: 50%;
    23.         top: 50%;
    24.         margin-left: -100px;
    25.         margin-top: -100px;
    26.         transform: translate3d(0,0,700px);
    27.     }
    28. </style>

    注意：z轴上物体离我们越来越近，视觉感受就是物体越来越大 

    3D旋转

    • rotateX()：以x轴旋转对应角度
    • rotateY()：以y轴旋转对应角度
    • rotateZ()：以z轴旋转对应角度
    • rotate3d()：以x，y，z轴旋转对应角度

     transform: rotate3d(1,0,0,90deg);

    注意：前面3个值为0/1分别对应x，y，z轴，后面跟个角度，代表每个轴旋转多少度 

    1. <body>
    2.     <div class="box">
    3.         <div class="center">
    4.         </div>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box{
    9.         width: 500px;
    10.         height: 500px;
    11.         border: 5px solid gray;
    12.         display: flex;
    13.         transform-style:preserve-3d ;
    14.         transition: all 2s linear;
    15.         background: pink;
    16.     }
    17.     .center{
    18.         margin: auto;
    19.         width: 200px;
    20.         height: 200px;
    21.         background: red;
    22.         transition: all 2s linear;
    23.     }
    24.     div .center:hover{
    25.         transform: rotate3d(1,0,0,90deg);
    26.     }
    27.     div:hover{
    28.         transform: rotateY(90deg);
    29.     }
    30. </style>

    3D缩放

    • scaleZ()：沿着z轴进行缩放
    • scale3d()： 沿着x，y，z轴放大对应倍数

    transform: scale3d(1,1,10)；

    里面有3个值分别对应x，y，z轴放大对应的倍数

    1. <body>
    2.     <div class="box">
    3.         <div class="center">
    4.         </div>
    5.     </div>
    6. </body>
    7. <style>
    8.     .box{
    9.         width: 500px;
    10.         height: 500px;
    11.         border: 5px solid gray;
    12.         display: flex;
    13.         transform-style:preserve-3d ;
    14.         perspective: 900px;
    15.     }
    16.     .center{
    17.         margin: auto;
    18.         width: 200px;
    19.         height: 200px;
    20.         background: red;
    21.         transition: all 2s linear;
    22.     }
    23.     div .center:hover{
    24.         transform: scale3d(1,1,10) rotateX(90deg);
    25.     }
    26. </style>

  • 相关阅读:
    Backtrader官方中文文档
    用友NC Cloud自由报表的首次设计体验（图文）
    免费IP代理-如何更改自己的IP做到匿名浏览
    HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
    在linux虚拟机上安装docker（我的实践）
    dolphinscheduler-data-quality-3.1.0 部署
    TNZ5TSC OSN1800V全新板卡100G支路业务处理板
    机器学习-学习率：从理论到实战，探索学习率的调整策略
    CSS 长度单位
    Geth无法获取早期block的transaction信息
  • 原文地址：https://blog.csdn.net/m0_60027772/article/details/125441993