CSS基础

css基础

css的引入方式

内嵌式

css样式需要写在style标签中只在当前页面生效

<!DOCTYPE html>
<html lang="en">
<head>
    <title>内嵌式</title>
    <!-- style需要写在  head里面  title下面最好 -->
    <style>
        p {
            color: aquamarine;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>哈哈哈</p>
</body>
</html>

外联式

css样式单独写在css文件中，通过link标签引入可以再多个页面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <!-- link标签需要写在  head里面  title下面最好 -->
    <link rel="stylesheet" href="./css.css">
</head>
<body>
    <p>哈哈哈</p>
</body>
</html>

css页面

p {
    color: aquamarine;
    font-size: 20px;
}

行内式

CSS样式写在标签中的style属性只能在当前标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p style="color: aquamarine; font-size: 20px;">哈哈哈</p>
</body>
</html>

基础选择器

标签选择器

标签选择器是选择一类标签，不是单独一个

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
      /* 直接写标签名
      	 标签名 {
               属性名 : 属性值;
         }
      */
        span {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <span>标签选择器</span>
</body>
</html>

类选择器

类名不能以数字或中划线开头，一个类选择器可以同时被多个标签选中

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /*
      		.类名 {
                属性名 : 属性值;
            }
        */
        .lei-name {
            color: blue;
        }
        /*
      		一个标签可以同时有多个类名 ，类名之间以空格隔开
        */
      	.lei-name lei-name2 lei-name3 {
            color: blue;
        }
    </style>
</head>
<body>
    <span class="lei-name">类选择器</span>
</body>
</html>

ID选择器

一个标签只能有一个id属性值，不可重复使用，除非特殊情况，否者不要给id设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /*
      		#类名 {
                属性名 : 属性值;
            }
        */
        #span-id-name {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <span id="span-id-name">ID选择器</span>
</body>
</html>

类与ID选择器的区别

class类名可以重复一个标签可以有多个class类名
id属性值不可以重复一个标签只能有一个id属性值
class 以 . 开头
id 以 # 开头

通配符选择器

/*
	找到页面中所有标签，设置样式
     * {
         属性名 : 属性值;
     }
*/

字体和文本样式

字体样式

字体粗细

font-weight:关键字或纯数字;

/* 
正常
font-weight: normal;
font-weight: 400;
加粗
font-weight: bold;
font-weight: 700;
*/

字体样式（是否倾斜）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        i {
            /* 不倾斜 */
            font-style: normal;
            /* 倾斜 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- i标签通常用来包裹图标 -->
    <i>倾斜</i>
</body>
</html>

字体和文本样式

字体

尽量使用系统自带的字体，保证不同用户浏览时都可以显示

/* 如果第一个字体电脑没有，会执行第二个字体 */
font-family: '华文行楷' ,'宋体';

层叠问题

chengdie

font 连写属性

font: italic bold    30px/40px          '楷体';
	  style  weight  size/line-height   family
       样式   粗细     大小/行高          字体

注意：样式覆盖行高默认1.2左右

文本缩进

浏览器默认16px一个字还可以用全圆角（切换键shift+空格）空格

text-indent: 2em;

文本水平对齐

text-align需要给所在标签的父元素添加

/* 居中 */
text-align: center;
/* 左对齐 */
text-align: left;
/* 右对齐 */
text-align: right;

文本下划线

none 属性值可以去掉 a 标签的下划线

/* 默认没有下划线 */
text-decoration: none;   
/* 添加下划线 */
text-decoration: underline;
/* 添加删除线 */
text-decoration: line-through;
/* 添加上划线 */
text-decoration: overline;

块元素水平居中

块元素没有宽度默认占满父元素的宽度

margin: 0 auto;

margin和text-align的区别

margin 针对于块元素
text-align 针对于文本

line-height行高

line-height: 100px;

注意：line-height：文字父元素的高度，也可以给当前标签加

颜色取值

/*
    红色 绿色 蓝色
*/
color:rgb(255, 255, 255);
/*
	红色 绿色 蓝色  透明度
*/
color: rgba(255, 255, 255, 0.2)

复合选择器

后代选择器

后代选择器中选择器选择器之间分开

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /*
            选择器1 选择器1的后代 {   }
      		找到元素1
        */
        .father ul li a {
            color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <ul>
            <li><a href="#">元素1</a></li>
        </ul>
        <a href="#">元素2</a>
    </div>
</body>
</html>

子代选择器

选择器与选择器之间用 > 隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /*
            选择器1 > 选择器2 {   }
        */
        .father>a {
            color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <ul>
            <li><a href="#">元素1</a></li>
        </ul>
        <a href="#">元素2</a>
    </div>
    <div></div>
</body>
</html>

并集选择器

选择器与选择器之间用 , 隔开英文逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /*
            选择器1 , 选择器2 {   }
        */
        .father>a , p {
            color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <ul>
            <li><a href="#">元素1</a></li>
        </ul>
        <a href="#">元素2</a>
        <p>元素3</p>
    </div>
    <div></div>
</body>
</html>

交集选择器

选择器与选择器之间紧挨着任何其他被标注为dome1的元素也不会受影响

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
 	 /*
        选择器1选择器2 {   }
     */
    <style>
        div.dome1 {
            color: red;
        }

    </style>
</head>
<body>
    <div class="dome1">元素1</div>
    <div class="dome2">元素2</div>
    <p class="dome1">元素3</p>
</body>
</html>

hover伪类选择器

选择器:hover{css} 中间不能有空格鼠标悬停在元素上设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        a:hover  {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">hover</a>
</body>
</html>

背景相关属性

背景图片

盒子必须有宽高图片类似于背景不能撑开盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .img{
            width: 100px;
            height: 100px;
            background-image: url('./images/zm.jpg');
        }
    </style>
</head>
<body>
    <div class="img">123</div>
</body>
</html>

背景平铺

/* 不平铺 */
background-repeat: no-repeat;
/* 默认平铺 */
background-repeat: repeat;
/* 沿X轴平铺 */
background-repeat: repeat-x;
/* 沿y轴平铺 */
background-repeat: repeat-y;

背景位置

background-position: 水平方向 垂直方向;

水平方向 left center right / 数字px
垂直方向 top center bottom / 数字px

背景连写

background：color image repeat position ;

img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原尺寸显示
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

元素显示

块级元素

display: block;

特点：独占一行默认宽度是父元素的宽度默认高度由内容撑开 p和h标签不能放块元素

行内元素

display: inline;

特点：一行可以多个宽度和高度由内容撑开不可以设置宽高只能包含行内元素和文本

行内块元素

display: inline-block;

特点：一行可以显示多个可以设置宽高

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

CSS三大特性

继承性

层叠性

定义：一次一次覆盖

注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

!important > 行内选择器 > id样式选择器 > 类选择器 > 标签 > 通配符 > 浏览器默认 > 继承

注意：!important不能提升继承的优先级，只要是继承优先级最低！

权重

行内个数， id样式个数，类个数，标签个数

( 0 , 0 , 0 , 0)

盒子模型

盒子模型介绍

盒子模型一共有4部分组成

内容区域 content
边框区域 border
内边距 padding
外边距 margin

宽和高默认是内容大小

边框 border

/* 边框粗细 */
border-width: 1px;
/* 边框样式
     solid  实线
     dashed 虚线
     dotted 点线
*/
border-style: solid;
/* 边框颜色 */
border-color: darkblue;

border 连写属性

/*     粗细  样式    颜色*/
border:1px   dashed coral;

边框-单方向设置

/* 上边框宽度 */
border-top-width: 1px;
/* 上边框样式 */
border-top-style: dotted;
/* 上边框颜色 */
border-top-color: #000;
/* 上边框连写  粗细  样式    颜色 */
border-top:   1px   dashed black;

注意：border + 方位词

上边 top
下边 bottom
左边 left
右边 right

盒子模型实际大小计算公式

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

注意：设置盒子的宽高之后 border会撑大盒子

解决办法

计算多余大小，手动在内容中减去（手动内减）

设置 box-sizing 属性

/* 默认 */
box-sizing: content-box;
/* 宽高自动内减 */
box-sizing: border-box;

内边距 padding

/* 设置一个值上下左右都为10px */
padding: 10px;
/* 设置两个值前边的值 上下   后边的值 左右 */
padding: 10px 10px;
/* 设置三个值第一个值 上   第二个值  左右   第三个值  下 */
padding: 10px 10px 10px;
/* 设置四个值顺序为  上 右 下 左 */
padding: 10px 10px 10px 10px;

padding 单方向设置

/* 上 */
padding-top: 10px;
/* 右 */
padding-right: 10px;
/* 下 */
padding-bottom: 10px;
/* 左 */
padding-left: 10px;

外边距 margin

/* 设置一个值上下左右都为10px */
margin: 10px;
/* 设置两个值前边的值 上下   后边的值 左右 */
margin: 10px 10px;
/* 设置三个值第一个值 上   第二个值  左右   第三个值  下 */
margin: 10px 10px 10px;
/* 设置四个值顺序为  上 右 下 左 */
margin: 10px 10px 10px 10px;

margin 单方向设置

/* 上 */
margin-top: 10px;
/* 右 */
margin-right: 10px;
/* 下 */
margin-bottom: 10px;
/* 左 */
margin-left: 10px;

给行内元素设置margin和padding时

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

布局

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            display: inline-block;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            line-height: 100px;
            list-style: none;
            text-align: center;
        }

        /* 子元素的最后一个元素 */
        ul li:last-child {
            background-color: blue;
        }
        /* 子元素的第一个元素 */
        ul li:first-child {
            background-color: brown;
        }
        /* 子元素的第三个元素 */
        ul li:nth-child(3) {
            background-color: #000;
        }
        /* 子元素的倒数第三个元素 */
        ul li:nth-last-child(3) {
            background-color: blueviolet;
        }
        /* 偶数选择 */
        ul li:nth-child(even) {
            background-color: chartreuse;
        }
        /* 奇数选择 2n+1  2n-1 */
        ul li:nth-child(odd) {
            background-color: cornflowerblue;
        }
        /* 找到前5个 */
        ul li:nth-child(-n+5){
            background-color: crimson;
        }
        /* 找到后5个 */
        ul li:nth-child(n+6){
            background-color: cyan;
        }
        /* 选择后两个 */
        ul li:nth-last-child(-n+2) {
            background-color: darkgoldenrod;
        }
        /* 从3往后 从6往前 */
        ul li:nth-child(n+3):nth-child(-n+6){
            background-color: darkmagenta;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>

注意：父元素子元素:last-child 找子元素的最后一个

nth-of-type结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		/*选择子元素第一个p标签*/
        .big-box > p:first-of-type {
            color: aqua;
        }
		/*选择子元素最后一个p标签*/
		.big-box > p:last-of-type {
            color: aqua;
        }
		/*选择子元素第二个p标签*/
		.big-box > p:nth-of-type(2) {
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="box1">
            <p>元素孙1</p>
            <p>元素孙2</p>
        </div>
        <div class="box2"></div>
        <p>元素子1</p>
        <p>元素子2</p>
    </div>
</body>
</html>

区别：

:nth-of-type 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数
:nth-child 直接在所有子元素中数个数

伪元素

必须设置content属性才能生效默认是行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background: #000;
    }
	/*在父元素内容前添加伪元素*/
    .box1::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: rgb(162, 196, 14);
    }
	/*在父元素内容后添加伪元素*/
    .box1::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: rgb(133, 42, 42);
    }
</style>
<body>
    <div class="box1"></div>
</body>
</html>

浮动 float

早期作用于文字环绕图片
现在用于让垂直的元素水平布局

/* 左浮动 */
float: left;
/* 右浮动 */
float: right;

注意：

元素会脱离标准流 “脱标” 不占标准流位置
浮动之后可以覆盖标准流的元素但是覆盖不了内容
一行可以显示多个可以设置宽高

清除浮动

直接添加父元素高度
- 但有些布局不可以设高
额外标签法
- 给父元素最后添加块级元素
- 给块元素设置 clear : both
- 缺点：会让页面复杂

伪元素清除法

.clearfix::after {
 	/*设置内容为空*/
    content: "";
  	/*转换块级元素*/
    display: block;
  	/*清除浮动*/
    clear:  both;
  	/*将元素隐藏*/
    visibility: hidden;
  	/*高度为0*/
    height: 0px;
}

给父元素加 clearfix 类名
伪元素代替额外标签

双伪元素清除法

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

给父元素加 clearfix 类名
伪元素代替额外标签

给父元素设置
- ```
overflow : hidden ;
```

定位

网页常见布局方式

标准流
- 块元素独占一行垂直布局
- 行内元素一行显示多个水平布局
浮动
- 可以让原本垂直布局的块级元素水平布局
定位
- 可以让元素自由摆放网页的任何位置
- 一般用于盒子的层叠情况

定位的方式

/* 静态定位 */
position: static;
/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;
/* 粘性定位 */
position: sticky;

/* 偏移值 配合定位使用 */
left: 数字px;
right: 数字px;
top: 数字px;
bottom: 数字px;

静态方式 static

默认值
不能通过方位属性移动

相对定位 relative

需要配合方位属性移动
相对于自己原来位置移动
没有脱标页面中占位置

绝对定位 absolute

需要配合方位属性移动
相对非静态定位的父元素进行移动默认对于浏览器移动
页面中不占位置

子绝父相

子元素：绝对定位

父元素：相对定位
让子元素相对于父元素进行移动
父元素是相对定位对网页布局影响小

注意：如果父元素已经有绝对定位不用改成相对定位

让子元素水平垂直居中

三种方法水平垂直居中

/*第一种*/     
.box-box {
    position: absolute;
  	/*边距都为零 居中*/
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
  
    width: 100px;
    height: 100px;
    background: rgb(16, 84, 211);
} 
/*第二种*/
.box-box {
    position: absolute;
  	/*左上各退父元素的50% 在退自身的50%*/
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
  
    width: 100px;
    height: 100px;
    background: rgb(16, 84, 211);
}
/*第三种*/
.box-box {
  	position: absolute;
  	/*左上各退父元素的50% 在退自身的宽高*/
    left: 50%;
    top: 50%;
    margin-top: 50px;
    margin-left: 50px;
  
    width: 100px;
    height: 100px;
    background: rgb(16, 84, 211);
}

固定定位 fixed

需要配合方位属性移动
相对于浏览器可视区进行移动
不占位置脱标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 2000px;
            background: #000;
            margin: 0 auto;
        }
        .left {
            position: fixed;
          	/*靠侧上边固定*/
            top: 0px;
            right: 50%; /*移动主体的50%*/
            margin-right: 550px; /*在移动主体一半+自身宽度*/
            width: 100px;
            height: 200px;
            background: rgb(231, 0, 0);
        }
        .right {
            position: fixed;
            top: 0px;
            left: 50%;
            margin-left: 550px;
            width: 100px;
            height: 200px;
            background: rgb(231, 0, 0);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

粘性定位 sticky

像 relative + fixed
滚动变固定定位
必须设置 top , left , right , bottom 其中一个

元素层级

不同布局层级关系

标准流 < 浮动 < 定位
定位之间层级相同下面的元素层会覆盖
更改元素层级

z-index ：数字；//数字越大层级越高

CSS 进阶

垂直对齐方式 vertical-align

图片和文字一行显示时底部对不齐

基线问题
对齐方式
```
/* 默认值 */
vertical-align: baseline;
/* 顶部对齐 */
vertical-align: top;
/* 中部对齐 */
vertical-align: middle;
/* 底部对齐 */
vertical-align: bottom;
```
注意：vertical - align 可以解决
- 文本框和表单无法对齐
- input 和 img 无法对齐
- div的文本框无法贴顶
- 配合line-height 让img 垂直居中

光标类型 cursor

/* 默认值 箭头 */
cursor: default;
/* 小手提示 */
cursor: pointer;
/* 工字型 */
cursor: text;
/* 十字光标 */
cursor: move;
/*禁止*/
cursor: not-allowed;

圆角边框 border-radius

border-radius: 25px;

画圆 border-radius : 50%; 必须是正方形
胶囊盒子高度的一半

溢出部分显示效果 overflow

/* 默认值  可见 */
overflow: visible;
/* 溢出部分隐藏 */
overflow: hidden;
/* 无论是否溢出 都显示滚动条 */
overflow: scroll;
/* 根据是否溢出 自动显示隐藏滚动条 */
overflow: auto;

元素隐藏

visibility ：hidden 隐藏本身占位置 visibility : visible 显示
display ：none 隐藏本身不占位置
通常

display ：none （隐藏）

display ：block （显示）

注意：隐藏元素一定要和父元素紧贴不然对导致隐藏元素消失

元素整体透明度 opacity

opacity: 0.5；

注意：

1：表示不透明
0：表示完全透明

表格边框合并

/*给table设置 得到细线边框*/
border-collapse：collapse；

css画三角

设置一个盒子
设置边框
将宽度设为0 保留边框
设置剩余三个边框为透明

链接伪类选择器

/* 未访问状态 */
a:link{
}
/* 访问之后 */
a:visited {
}
/* 鼠标悬停 */
a:hover {
    
}
/* 鼠标按下 */
a:active {
}

input伪类选择器

input:focus {}

获取焦点
input:required {}

选中必填
input:optional {}

选中选填
input:in-range {}

选中min 和 max 之间

适用于带有 min 和 max 属性的 input 元素！
input:out-of-range {}

选中min 和 max 之外

适用于带有 min 和 max 属性的 input 元素！
input:valid {}

选中值有效的表单

仅适用带有 min 和 max 属性的输入元素，没有合法电子邮件的 email 字段或没有数值的 number 字段
input:invalid {}

选中值无效的表单

带有 min 和 max 属性的输入元素，没有合法电子邮件的 email 字段或没有数值的 number 字段
input:read-only {}

选中设置了 "readonly" 属性的元素
input:read-write {}

选中没设置了 "readonly" 属性的元素

"readonly" 属性用来定义元素只读

属性选择器

/*标签[属性="值"]{}*/
input[type="text"]{}
input[type]{}
p[class="p1"]
img[src="./1.jpg"]

精灵图的使用

background-position: -x -y ;

注意：需要填负值

精灵图

背景图片的大小

background-size: 宽度 高度；
/*数字加px*/
background-size: 数字px 数字px；
/*百分比*/
background-size: 100% 100%；
/*等比例缩放 不会超出盒子*/
background-size: contain；
/*等比例缩放 知道整个盒子没有空白*/
background-size: cover；

background连写拓展

background: color images repeat position/size;

文字阴影 text-shadow

text-shadow : 水平偏移值 垂直 偏移值 模糊度 颜色 ；

盒子阴影 box-shadow

box-shadow : 水平偏移值 垂直偏移值 模糊度 阴影扩大 颜色 内部阴影inset ；

过渡属性 transition

transition: all 2s linear 1s;
/*过渡属性 过渡时间 出入匀速属性 延迟时间*/

linear 以相同的速度开始至结束
ease 以慢速开始，然后快速结束默认值

版心

让不同大小的屏幕都能看到页面主体内容

版心常用类名

w
container
wrapper

css书写顺序

布局属性
- display ，position ，float，clear ，visibility，overflow
盒子模型+背景
- width ，height，margin，padding，border，background
文本内容属性
- color，font，text-decoration，text-align，line-heght
其余属性
- cursor ，border-radius，text-shadow ，box-shadow

2D转换

2D转换 transform 位移

transform: translate(100px,100px);

第一个值代表x轴可正可负对应translateX
第二个值代表y轴可正可负对应translateY
可以写百分比

位移和定位的区别

位移移动的是元素本身的宽度或高度
定位移动的是父元素的宽度或高度
c1,c2 是根据父元素移动
c3 基本上是根据自身移动

居中的几种方式

给父元素设置 text-align：center

设置高度=行高

子元素设置vertical-align：middle

注意：vertical-align：middle只能用于行内元素和行内块元素
给子元素定位 缺：必须设宽高

left:50%

top:50%

margin-left:子元素宽度一半

margin-top:子元素高度一半
给子元素定位 缺：必须设宽高

left:0px;

right:0px;

top:0px;

bottom:0px;

margin:auto;
给子元素定位 不用设宽高

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

旋转 rotate

transform: rotate(90deg);

正值顺时针
负值逆时针
deg 度

旋转原点 origin

transform-origin: left top ;

第一个值 X轴
第二个值 Y轴
只写一个值另一个值默认 center
可以%，px

复合属性写法

transform: translate(600px) rotate(1080deg);

需要给旋转元素加过渡否者rotate 直接旋转完

缩放 scale

transform: scale(1,2);

值比1大放大
值比1小缩小
可以填一个值等比例缩放
第一个值宽的倍数第二个值高度倍数

缩放和宽高的区别

缩放是和内容一起缩放宽高只改变宽高内容不变
缩放沿着中心点缩放宽高沿着上中位置变化

渐变 linear-gradient

background: linear-gradient(to top,red,green);

方位值（一个或两个 top left），颜色，颜色
用vh铺满视口宽度默认

3D转换

移动translate

transform: translateX(50px);
transform: translateY(50px);
transform: translateZ(50px); z轴位置与视线方向相同
取值可正负
% ，px

透视perspective

默认情况下无法观察Z轴移动
只有一个盒子的情况下有效
给父级添加perspective属性
取值一般在800-1200px
为元素添加近大远小，近实远虚的视觉效果

rotate 空间转换

transform:rotateZ(); //沿Z轴旋转
transform:rotateX(); //沿X轴旋转
transform:rotateY(); //沿y轴旋转

拓展

transform: rotate3d(1,0,0,60deg);
- 自定义旋转轴的位置
- xyz选值 0不选中 1选中

3D空间

transform-style:preserve-3d; //给父元素添加
设置元素让子元素处于3d空间

scale 空间缩放

transform: scaleX(倍数)；
transform: scaleY(倍数);
transform: scaleZ(倍数)；
连写

transform: scale3d(x,y,z);

动画 animation

添加动画

@keyframes 名字 {
    from {
    }
    to {
    }
}

再给元素添加 animation：动画名称时长

动画属性

/* 动画名称 */
animation-name: 名称;
/* 播放时长  1s=1000ms*/
animation-duration: 1s;
/* 动画延迟 */
animation-delay: 1s;
/* 动画停在那个状态
    backwards  开始一帧
    forwards   最后一帧 */
animation-fill-mode: backwards;
/* 播放次数 默认播放一次   infinite  */
animation-iteration-count: infinite;
/* 动画速度曲线  linear匀速*/
animation-timing-function: ease;
/* 反方向播放 */
animation-direction: alternate;
}
.box:hover {
/* 暂停动画 */
animation-play-state: paused;
}

连写属性

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完状态

动画名称和时长必须负值
不分先后顺序
如果有两个时间值第一个表示动画时长第二个表示延迟时间

逐帧动画steps

animat-timing-function:steps(份数)

将动画分成N份

多组动画

animation: dong 5s steps(12) infinite,
           yi 25s infinite linear;

animation :

动画1,

动画2；

posted @ 2021-10-31 21:17 rain_sparse 阅读(65) 评论(0) 收藏举报

刷新页面返回顶部

rain_sparse

CSS基础

css基础

css的引入方式

内嵌式

外联式

行内式

基础选择器

标签选择器

类选择器

ID选择器

类与ID选择器的区别

通配符选择器

字体和文本样式

字体样式

字体大小

字体粗细

字体样式（是否倾斜）

字体和文本样式

字体

层叠问题

font 连写属性

文本缩进

文本水平对齐

文本下划线

块元素水平居中

margin和text-align的区别

line-height行高

颜色取值

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

hover伪类选择器

背景相关属性

背景图片

背景平铺

背景位置

背景连写

img标签和背景图片的区别

元素显示

块级元素

行内元素

行内块元素

CSS三大特性

继承性

层叠性

优先级

权重

盒子模型

盒子模型介绍

边框 border

border 连写属性

边框-单方向设置

盒子模型实际大小计算公式

内边距 padding

padding 单方向设置

外边距 margin

margin 单方向设置

给行内元素设置margin和padding时

布局

结构伪类选择器

nth-of-type结构伪类选择器

伪元素

浮动 float

清除浮动

定位

网页常见布局方式

定位的方式

静态方式 static

相对定位 relative

绝对定位 absolute

子绝父相

固定定位 fixed

粘性定位 sticky

元素层级

CSS 进阶

垂直对齐方式 vertical-align

光标类型 cursor