css属性，运动，旋转，扭曲，3D_css 扭曲

一：css概述：
1:css:层叠样式表 Cascading Style Sheets 他是一种样式表语言，用来渲染html和xml文档的样式文件
二:规则和语法：
-选择器是负责找到元素，可以使用多种选择器来完成，但是没选中元素，css不会报错，只会不渲染样式
-样式声明可以是多个，没有声明个数限制。每一个声明后都加一个分号。
-css的空格，css书写中有些空格是没用的为了好看方便编写，有些空格是一定要写的，都在属性值上出现的空格是必要的。选择器中后代的空格必须要
-css顺序读取，从上向下依次渲染，遇到重复的样式会覆盖
3：css样式使用方法：
1：内联样式：把css样式写在标签中的style属性中，多样式用分号隔开，针对性较强，优先级高，当前标签更直接，影响阅读，显得代码更乱，不利于修改，复用性差，使用js修改的css样式都是内联样式，
2：内部样式：写在head标签中的style标签里
-没有多余的css文件向服务器发送请求
-只会影响当前html文件的大小，请求也是html页面没有多余请求
-只能渲染当前页面，复用性不强（其他html文件无法使用）
-一般用于学习和测试，为了减少强求，样式较为单一的使用在使用某个页面时可以使用内部。
-优先级低于内联样式
3：外部样式：
-单独创建一个css文件后缀名为xxx.css文件，在head标签中使用link标签引用到当前页面

-rel属性：引入文件和当前html文件的关系，css样式就是stylesheet
-href属性：可以是绝对路径也可以是相对路径，css文件在哪，文件的引入
-link标签可以写多个
-复用性高，便于维护
-向服务器增加了请求次数
-优先级小于内联样式
四：选择器：
选择器的作用就是在html中找到元素并且准备渲染他，利用的是元素的名字
1：基础选择器：
1）：通用选择器也叫通配符
所有元素都会被他选中*{}，让浏览器所有元素都应用相同样式，但是性能低，因为所有元素都要渲染一遍
2）：元素选择器，（标签选择器）
通过标签名直接选择元素
-好记，好写，直观
-所有该标签的标签名全部改变，无法定位精准元素，给与相同元素不同样式做不到
- 标签选择器的权重值：1
2）：id选择器
-通过元素的id属性当选择器，使用#id名作为选择器，该选择器具有唯一性，可以精准定位到一个元素
-id选择器的权重值是100
-权重值高话语权高，不容易被其他选择器覆盖，
-复用性差
-一般情况下，不使用id选择器渲染元素样式
3）：class类选择器
-具备相同class属性值的元素，可以通过类属性给与相同样式，这样复用性强
-那个元素需要该属性就可以使用相同类属性值，方便
-如果与其他类有不同样式时，可以加新的类进行新的渲染
-同一个元素可以增加多个属性值，分别分类渲染
-可以指定一个类名，需要的元素拿来使用
注意：点不要忘记写，点和类名之间不能有空格
类选择器权重值：10
4）：群组选择器：
多个选择器，使用共同样式，可以将这些选择器用逗号相连，使用相同样式
-从优化角度，群组比较好
5）：关系型选择器
1）：后代选择器：
在一个祖先中，选中其内部的后代选择器，可以由选择器一起搭配使用
6｝：子代选择器
子代选择器和后代选择器基本相同但是子代更加精准，效率更高
子代选择器是父级>子级{} 对于选择器没有要求，能选到即可
6）：兄弟选择器
兄弟元素只包含后面的兄弟，不包含前面的兄弟
7）：相邻兄弟选择器
性能比较低，因为越后面的元素渲染次数越多
相邻兄弟选择器与兄弟选择器用法相同，都是后面的兄弟可以被选中，相邻兄弟必须是紧挨着后面的兄弟，中间不能有其他元素相隔
兄弟元素+相邻第一元素
ol li~li{
color:gray;
};
伪类选择器：
Css的伪类是添加到选择器中的关键字，指的是被选中元素的特殊状态
div:active{} 当鼠标按住，div转换样式
Div:hover{} 当鼠标移到div范围 div转换样式
Div:active+span{} 当鼠标按住div，span转换样式

          a元素有自带的伪类
          a:link 未激活前的
          a:visited激活后的
         这就是a标签不能看到继承颜色的样式，因此伪类是a自身的优先级比继承要高
1
2
3
4

伪类是顺序的(特指a标签的伪类顺序)
:link>:visited>:hover>:active

   伪元素选择器：
       
      在：::before ::after的伪元素里可以单独给伪元素修饰
1
2
3

Css优先级
读取顺序：

三：尺寸和边框
1：宽度和高度
元素尺寸就是宽度和高度
width：宽度
height：高度
取值：值数字加单位(px,pt,%,rem,em…)
Px:像素，绝对单位
%：相对父级元素的尺寸

2：最大和最小宽度（响应式布局中细讲）

3：色值：
色值应用非常广泛，如背景色，边框色，阴影色，渐变色
1）：英文颜色
在编辑器中提供了一些：red,blue,green
元素的默认颜色：transparent 透明色
2）十六进制色值：
#rr gg dd 范围0~9 a~f
Rr:红色范围 #ff0000纯红 缩写：#f00 每两个色值范围必须都一样，大小写均可
Gg：绿色范围
Dd：蓝色范围
3）:rgb色值
Rgb() 色值是一个函数的写法，r代表红，g代表绿，b代表蓝
后面括号要写三个参数，取值范围是0~255之间的数字
Rbga() a指的是透明度范围：0~1；0完全透明，1完全不透明

3：边框：
边框在元素的外层，宽度和高度的外面，一般的元素没有边框，但个别元素自带边框 input,button
1):边框的组成
2)边框宽度：border - with
3)边框样式：border-style
4)边框颜色：border-color
简写：border: 宽度 样式 颜色
边框样式：border：solid 实线
Dotted 点状线
Dashed 虚线
Double 双线
边框的方向：
四个方向的边框可以分开写
border-top:上边框
Border-bottom 下边框
Border-left 左侧边框
Border-right 右边框

4:三角形

5去除边框
Border：0所有边框去掉
Input标签，button有可能去边框

四：元素的特性
1：元素的显示：

2：幽灵空白节点

3:其他的属性值：

4：显示和影藏属性；
在项目中常会出现元素的展现和消失
要和元素的状态改变(伪类) 一起使用

5：溢出：
元素里面的内容(子元素和文字)大于父级元素的宽高会溢出父元素的范围
想要内部内容溢出父元素，一定要给父级设置宽高，范围还要小于内部内容
Overflow-y: hidden;溢出部分隐藏
overflow: scroll;出现双方向的拖拽条
overflow: auto;溢出部分出现拖拽区域

6：overflow和BFC的关系

五：内外间距和盒子模型
1：内间距（内边距）
Padding 宽度，高度以外的边框以内的区域
（1）语法：padding:数字加单位;数字不能为负值，内间距占元素的颜色，内间距里不能存在文字
（2）方向: 内间距有四个方向，分别是：上，右，下，左内间距 padding:20px 10px 20px 10px;
(3)内间距和盒子
在标准盒子模型中，内间距是占据元素空间的，增加内边距会让元素变大

2：外边距：
Margin 指的是元素与其他相邻的兄弟元素之间的距离，位置在元素外边框以外，因为不属于元素本身，因此不属于
（3）语法：Margin:数字加单位;数字可以为负值，内间距占元素的颜色，内间距里不能存在文字
（4）方向: 内间距有四个方向，分别是：上，右，下，左内间距 Margin:20px 10px 20px 10px;
元素向左移动是-值
向右移动是+值
向上移动是-值
向下移动是+值
（5）四个方向的移动，被移动对象并不一样
Margin-top:20px; 上外间距移动的是当前元素
margin-bottom:50px;下外边距移动的是他相邻的下面的元素
margin-left:50px;元素左侧发生移动，正直向右侧移动，负值向左侧移动
margin-right:50px;当前元素右侧和相邻兄弟产生间距，会用自己右侧外间距将兄弟元素挤开
上左外边距移动自己，下右外边距挤兄弟

6：自带外边距
如：body自带上下左右8px外边距
Ul,ol,p,h1~h6都有外间距
在练习的时候按以下操作

将所有元素内外间距清零
7：margin的auto属性值
Margin:auto;指的是块级元素在其父元素中左右两侧外间距一样，就是在父元素中水平居中
8：外间距合并现象
当两个元素相邻，两个元素都有外间距，并且渲染的都是两个元素之间的距离，最大的值就是显示效果
9：外间距重叠效果(margin塌陷)
父级元素的第一个块级子元素和最后一个块级子元素都会和父元素的上下边贴合，因此，当第一个和最后一个子元素有上下外间距时，因为贴合导致父元素发生移动而子元素并未移动也没有和父元素产生距离
第一个子元素的margin-top会让父级元素y轴移动
最后一个子元素margin-bottom会让父元素y轴移动
解决方法：

9：元素分类
块级元素：可以设置4个方向的外间距，并且生效
内联元素：上下内，外间距设置不生效，左右生效
行内块：可以设置四个方向的外边距，并且生效

10:盒子模型：
1：重新计算盒子模型的宽度【怪异盒子模型】【弹性盒子模型】
标准盒子模型：设置的宽+内间距+内+边框=元素占位；
元素增加属性：box-sizing; 盒子模型计算方法
Box-sizing:content-box;默认值，标准盒模型计算
Box-sizing:border-box; 重新计算盒模型
怪异盒模型：重新计算的宽+内+边=设置的宽度

六：背景：
1：背景颜色
元素的背景颜色会出现在元素的最底层
背景图插入；
如果需要插入背景图，则必须元素有固定宽度
background-image: url(./背景图定位.png);
背景图的大小和设置元素的大小一般情况下比例相同，大小不同，所以插入背景图属性一般不会单独使用必须搭配其他背景属性一起使用
如果元素范围小于图片大小，会出现图片显示不全，
如果元素范围大于图片大小，会出现X轴和Y轴的重复显示
2：背景图平铺【背景图重复】
/不重复/
background-repeat: no-repeat; 背景图不重复
background-repeat: repeat-x; X轴重复；
background-repeat: repeat-y; Y轴重复
默认x，y轴都重复
2：背景图定位：
背景图定位需要X轴和Y轴的坐标

精灵图
![.d1{
width: 32px;
height: 32px;
background-color: red;
background-image: url(./sprite@2x.png);
background-position: 0 -32px;
}
.d1:hover{
background-color: #fff;
background-position: -32px 0;
}

](https://img-blog.csdnimg.cn/d4748bcc482f4feda6dcf770482e3270.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGlfZGluZ19kaW5n,size_13,color_FFFFFF,t_70,g_se,x_16)

背景图尺寸

背景简写：

最简方式：
Background：url();
Background：color;

7：背景渐变
背景渐变不是颜色，一个颜色过渡到另一个颜色的背景效果，渐变属于元素美化，一般情况下页面较为简单，多用线性渐变
（1）：线性渐变：在实际应用相对较多
background-image: linear-gradient(角度deg,颜色 起始位置 结束位置,颜色2 起始位置 结束位置);
第一个颜色的起始位置0%是默认的，最后一个颜色的结束位置100%默认的
（2）：径向渐变：
径向渐变，从元素的中心点作为起始点，向四周发散渐变
background-image: radial-gradient(280px 5px,rgb(219, 235, 4) 0% 30%,green 30% 100%);
background-image: radial-gradient(x轴半径 y轴半径 at x轴圆心 y轴圆心,颜色 起始位置 结束位置 ,颜色2 起始位置 结束位置);
（3）：重复的渐变
重复的渐变，可以有线向和径向两种，在渐变前加repeating- 让颜色具备范围，则可以显示重复的渐变效果，值不要过小，会让屏幕分辨率出现异常
.d8{
background-image: repeating-linear-gradient(45deg,red 0% 5%,#fff 5% 10%,blue 10% 15%);
}
.d9{
background-image: repeating-radial-gradient(rgb(0, 204, 255) 0% 5%,rgb(204, 238, 10) 5% 10%,rgb(19, 203, 228) 10% 15%,rgb(47, 0, 255) 15%);
}

8：文字文本的渲染
1：font:字体属性
文字的尺寸，可以设置的单位，px，pt，rem，em，vw，vh…

rem和em单位
相对的单位，用在移动端和响应式都可以

2：字体字重
主要渲染文字的粗体和细体，有些标签中的文字会被标签默认的自重渲染

3：字体系列：
一般情况下，字体系列，默认字号，颜色等有继承性，所以写给body标签的居多
能展示出来的，都是电脑里字库里存在的字体，字体的名字一般情况下是字库中的字体
字体按照书写顺序，从前向后读取，没有就向后读取，第一个成功就使用在页面上
凡遇到中文，多个单词组合的文字，用双引号包裹

4：字体样式
一般默认都是正常体，有特殊需要渲染成斜体字的
font-style: italic;
将字体变为斜体；

5：font简写属性：
可以把多个font相关的属性写在一起，但是注意，简写有顺序

6：字体颜色
Color：色值，字体颜色具有继承性，可以十六进制，rgb(),英文颜色等等
a标签，有一个link伪类，继承了祖先的字体颜色，任然会保持伪类的颜色，除非定义a的字体颜色

7：文本属性
1：文本的对其方式
Text-align:center; 文字居中
text-align:left； 文字左对齐
Text-align:right; 文字右对齐
有继承性
块级元素能让其中的文字以左中右方向对齐，因为内联元素（含行内块）和文字是同一级别的，因此也可以让内联元素和行内块元素在其父级中使用对齐方式
该属性只能写给块级元素！但不能让其中的块级元素居中
如果想要块级子元素居中，自己的margin auto居中；

2：文本的行高，行间距：
Line-height 是修饰文本的，可以上下扩开一定的行间距，行间距的撑开可能导致能有宽度的元素（块）打开一个高度
line-height: 16px;
如果块级父元素有宽高，需要让其中的“单行文字”垂直居中，也可以使用行高==高度，保证文字的垂直居中
取值：px，pt，%，rem，em…
可以使用倍数，直接写数字，不写单位，代表文字尺寸的多少倍；
line-height: 3;

3：文本的修饰线：

4：首行缩进

一般用于中文，段落的第一行前两个字向后缩进两个字符大小

5：文本的溢出省略
-必须先要让文字溢出，限制宽高
-文字溢出不能换行显示
-省略标记
-溢出内容隐藏

6:垂直对齐：
内联元素左侧和右侧的文字与内联，和自己的对齐方式

Img元素特殊，前后的内联元素样式默认为基线对齐，可以设置顶部居中

八：元素修饰
1：光标设置
光标的形态，当光标进入元素有默认形态，但可以改变为以下默认形态

2：input的轮廓线
Outline 轮廓线，他在边框线的外侧，当鼠标在input标签上获取焦点时自动触发轮廓线出现，
一般情况下不需要轮廓线
清空轮廓线：
outline:0; || outline:none;
3：列表标识符
Ul和li是列表标签，
https://www.wpsshop.cn/w/我家自动化/article/detail/266231