link 与 import 引入有什么区别
- @import的引入方式在一些老版本的浏览器中可能不支持。
- link是浏览器在加载html文档时就开始加载的，而@import是在浏览器对html文件加载完成后才对css文件进行加载的；
- link引入支持除了css格式的其他文件的引入，而@import只支持css格式的文件的加载
- link引入的css文件样式，将来能够支持JS的DOM操作，而@import引入方式不支持相关的DOM操作，通常使用link的引入方式就能够解决所有的css引入问题
css整理
css的用法
内联样式：在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
优先级：递增顺序
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 优先
注：内联样式>内联样式表>外部引用，
各个样式中，如果出现同样的属性设置，靠后替换靠前的
css 类型
1，背景
background-color
background-image
background-repeat
background-attachment
background-position
渐变：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: linear-gradient(#e66465, #9198e5);从上到下渐变
background-image: linear-gradient(to right, red , yellow);从右到左渐变
background-image: linear-gradient(to bottom right, red, yellow)
从左上角到右下角的线性渐变
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
从左到右的线性渐变，带有透明度
background-image: radial-gradient(red, yellow, green);圆形渐变
2，文本样式
text-align:center; 中间对齐
text-align:right; 右对齐
text-align:left; 左对齐
text-transform:uppercase; 输出的英文 大写
text-transform:lowercase; 输出的英文 小写
text-transform:capitalize; 输出的英文 首字母大写
text-indent:50px; 文本首行缩进50px
letter-spacing:2px；设置文本的字母间距
text-shadow:2px 2px #FF0000; 设置文本的阴影
vertical-align:text-top；设置元素的对齐方式，垂直靠上对齐
文本效果：
text-shadow: 5px 5px 5px #FF0000; 文本阴影
box-shadow
text-overflow：clip；// 修剪文本。
ellipsis；//显示省略符号来代表被修剪的文本。
string；//使用给定的字符串来代表被修剪的文本。
word-wrap : break-word; //允许长单词换行到下一行
word-break : break-all; //在恰当的断字点进行换行
white-space: nowrap; //规定段落中的文本不进行换行
文本溢出，出现自动裁切：
{
overflow: hidden;
text-overflow:ellipsis;//裁切下去的部分，用...代表
white-space: nowrap; //强制文字不换行
}
input::-webkit-input-placeholder {
padding-left:30px;
ul li input[type="button"]:hover{
background: #d13a35;
cursor: pointer; //手指按钮设置
}
3，a 链接：去掉a链接删除属性
a {text-decoration:none;}
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
4，盒子模型
content
padding
border ：
border-radius：
border-top-left-radius：定义了左上角的弧度
border-top-right-radius：定义了右上角的弧度
border-bottom-right-radius：定义了右下角的弧度
border-bottom-left-radius：定义了左下角的弧度
box-shadow: 10px 10px 5px #888888;
border-image
margin
5，边框样式
dotted：点线边框
dashed：虚线边框
solid：实线边框
double：两个边框
outline：轮廓（button/input：一边设置边框为 none）
6，隐藏元素：隐藏
display:none；// 元素不仅被隐藏了，还不会影响布局
visibility:hidden；//元素虽然被隐藏了，但仍然会影响布局
注：把块元素变为内联元素：display:block;
7，定位：
position：static; //没有定位，遵循正常的文档流对象
fixed; // 元素的位置相对于浏览器窗口是固定位置
relative; // 移动相对定位元素，但它原本所占的空间不会改变
absolute; //相对于最近的已定位父元素，没有已定位的父元素，它的位置相<html>
sticky; //基于用户的滚动位置来定位
z-index：;//定位时候，判断元素定位的堆叠顺序
cursor：pointer；//光标移到到指定的手型
display:inline；//把块元素变为行内元素
display：block；//把行内元素变为块元素
8，文本溢出：
overflow：auto 自动
hidden 隐藏
scroll 滚动条
overflow-x： hidden；x轴隐藏
overflow-y： scroll；y轴出滚动条
float：left / right；浮动要清除浮动样式，否则会影响下面的布局
clear:both /left / right;清除两边浮动/左侧/右侧浮动
9，布局—水平 & 垂直
//水平居中：
margin：0 auto；
// flex 布局
display：flex；布局
justify-content: center;// 水平居中
align-items: center;;//垂直居中
// 用定位设置水平垂直居中
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
10， CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)：div p
子元素选择器(以大于号分隔）: div > p
相邻兄弟选择器（以加号分隔）: div+p
普通兄弟选择器（以破折号分隔）: div~p
11,css伪类
a:link {color:#FF0000;} //未访问的链接
a:visited {color:#00FF00;} // 已访问的链接
a:hover {color:#FF00FF;} // 鼠标划过链接
a:active {color:#0000FF;} // 已选中的链接
伪类
a:first-child 匹配第一个a链接的元素
div > a : first-child 匹配div下面的第一个a链接
p:first-child i 匹配第一个p标签下面所有的 i
p:empty 选择所有没有子元素的p元素
input:checked 选择所有选中的表单元素
p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
p:last-child 选择所有p元素的最后一个子元素
p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(p) 选择所有p以外的元素
p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
p:only-child选择所有仅有一个子元素的p元素
input:read-only选择只读属性的元素属性
p:first-letter 选择每个<p> 元素的第一个字母
:first-line选择每个<p> 元素的第一行
：before / ：after ---伪元素可以在元素的内容之钱/后插入新内容。
12，Tooltip：提示工具
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
// 左右选择一个
left: 100%; 提示工具右侧
right: 100%; 提示工具右侧
// 淡入淡出
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {//经过时候，显示出来
visibility: visible;
opacity: 1;//淡入淡出
}
13，@media 响应式
@media screen and (max-width: 600px){//当屏幕尺寸小于600px时，应用下面的CSS样式
.class { background: #ccc; }
}
@media (min-width: 768px){ //>=768的设备
}
14，属性 选择器
//属性选择器
[title] { color:blue; }
<h1 title="Hello world">Hello world</h1>
属性和值选择器
[title=runoob] { border:5px solid green; }
<a title="runoob" href="//www.runoob.com/">runoob</a>
属性和值的选择器 - 多值
input[type="text"]{}
input[type="button"]
15，网页布局
display: table;
//table 中 td 下面的属性rowspan与colspan
//rowspan 属性规定单元格可横跨的行数
//colspan 属性规定单元格可横跨的列数。
display: flex;
16，动画 可以对元素进行移动、缩放、转动、拉长或拉伸。
2D转换
translate(dx, dy) 为画布的变换矩阵添加水平的和垂直的偏移
rotate( angle ) 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。
transform：scale() 放大/缩小
skew()
transform：skewX(<angle>);表示只在X轴(水平方向)倾斜。
transform：skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
matrix() ；六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
3D 动画
@keyframes myfirst {
from {background: red;left:0px; top:0px;}
to {background: yellow;left:100px; top:90px;}
}
注：//鼠标经过是时，放大
.solve__item {
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.solve__item:hover {
transform: scale(1.2);
}
17， @font-face 规则
注：引用"自己的"的字体是在 CSS3 @font-face 规则中定义的
18，Window.getComputedStyle();测试版本，获取测试段的 样式
window.getComputedStyle(
document.querySelector('.search-btn'),null).getPropertyValue("line-height"
)
19，鼠标经过时候，放大倍数
transition: property duration timing-function delay;
/*property：执行过渡的属性
duration：执行过渡的持续时间
timing-function：执行过渡的速率模式
delay：延时多久执行*/
.solve__item {
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.solve__item:hover {
transform: scale(1.2);//放大1.2倍
}
- ease-in-out--- 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，(开始和结束都慢)两头慢)
- linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）;(匀速)
- ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）
- ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
- ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
- ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。* cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
20，页眉固定在头部，并且随着窗口左右大小做自适应调整
<a-layout-header style="height:64px;">
<app-layout-header style="padding: 0;width:100vw;position:fixed;left:0;top:0;"/>
</a-layout-header>
21，清除浮动的几种方法：
// 方法一：
clear：both；
// 方法二：此方法 IE6 不支持用，追加一条 _zoom:1;
overflow: hidden;
_zoom:1;
// 方法三：格局法，在浮动元素的下方加上
<div style="clear:both;"></div>
// 方法四：父级元素加一个 clearfix 属性
.clearfix{ zoom:1 }
// 方法五：用伪元素 :after 与 :before 消除元素浮动
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
22， [媒体查询特性] prefers-reduced-motion
- no-preference：用户未修改系统动画相关特性。
- reduce：意味着用户修改了系统设置，动画最小化，移除所有不必要的动画。
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
注：例如：360度旋转
如果有出错的，请大家指教，谢谢！
