vue项目系列报错(一)

CSS样式表组成：规则 + 选择器 + 声明块 + 声明（css属性+ css属性值组成的键值对）

1.基本选择器

通配符选择器 *{ }
元素选择器 body{ } 元素名
类选择器 .list{ }
ID选择器 #list{ }
后代选择器 .list li{ } 空格
分组 , html,body{}

基本选择器扩展：
子元素选择器 #wrap > .inner {}
也可称为直接后代选择器，此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
相邻兄弟选择器 #wrap #first + .inner{}
它只会匹配紧跟着的兄弟元素
通用兄弟选择器 #wrap #first ~div{}
它会匹配所有的兄弟元素（不需要紧跟）
选择器分组 h1,h2,h3{} 此处的逗号我们称之为结合符

2.属性选择器

①存在和值属性选择器
[attr]：该选择器选择包含attr属性的所有元素，不论attr的值为何
[attr=val]：该选择器仅选择attr属性被赋值为val的所有元素。
[attr~=val]：表示带有以attr命名的属性的元素
②子串值属性选择器
[attr|=val]：选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val]：选择attr属性的值以val开头（包括val）的元素。
[attr$=val]：选择attr属性的值以val结尾（包括val）的元素。
[attr*=val]：选择attr属性的值中包含字符串val的元素。

3.伪类与伪元素选择器

①链接伪类 注意：:link :visited :target 是作用于链接元素的
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
②动态伪类 注意：:hover :active 基本可以作用于所有元素
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
注意：由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link :visited :hover :active 在身上时，:link :visited不能放在最后
只有下列的属性才能被应用到已访问链接（:visited）
color background-color border-color
③表单相关伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
④结构性伪类
:nth-child(index)系列
:first-child :last-child :nth-last-child(index) :only-child
:nth-of-child(index)系列
:first-of-child :last-of-child :nth-last-type(index)
:only-of-child
index的值从1开始 index可以为变量n（只能是n）
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素

nth-child 和 nth-of-type有一个很重要的区别：
nth-of-type以元素为中心

4.css声明的优先级

选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如：0，0，0，0
一个选择器的具体特殊性如下确定：
①对于选择器中给定的ID属性值，加0，1，0，0
②对于选择器中给定的各个类属性，属性选择，或伪类加0，0，1，0
③对于选择器中的给定的各个元素和伪元素，加0，0，0，1
④通配符选择器的特殊性为0，0，0，0
⑤结合符对选择器特殊性没有一点贡献
⑥内联声明的特殊性都是1，0，0，0
⑦继承没有特殊性

5.自定义字体

@font-face:允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖
@font-face的两个属性：
font-family 所指定的字体名字将会被用于font或font-family属性
src 字体资源

注意： 不能在一个CSS选择器中定义@font-face

6.文字阴影

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边） 默认值：none 不可继承
text-shadow: <color> <offset-x> <offset-y> <blur-radius>
值：<color> 可选 在偏移量之前或之后指定。如果没有指定颜色，则使用UA(用户代理)选择的颜色
<offset-x> <\offset-y>
必选。这些长度值指定阴影相对文字的偏移量。
<offset-x> 指定水平偏移量。若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量。若是负值则阴影位于文字上面。
如果两者均为0，则阴影位于文字正后方
<blur-radius> 可选 这是<\length>值。如果没有指定，则默认为0.
值越大，模糊半径越大，阴影也就越大越淡

7.文字排版

direction：控制文字的方向
要配合unicode-bidi:bidi-override;来使用
怎么溢出显示省略号? 四个要点
①white-space: nowrap;
②overflow: hidden;
③text-overflow: ellipsis; 显示一个省略号
④包裹区域必须不能让子元素撑开，要有指定的宽高

8.盒模型阴影

box-shadow：以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了border-radius，阴影会有圆角效果。
默认值：none 不可继承
值：inset 默认阴影在边框外。使用inset后，阴影在边框内。
<offset-x> <\offset-y>
这是头两个<\length>值，用来设置阴影偏移量。
<offset-x> 指定水平偏移量。若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量。若是负值则阴影位于文字上面。
如果两者均为0，则阴影位于元素后面。
这时如果设置了<\blur-radius> 或 <\spread-radius>则有模糊效果
<blur-radius>这是第三个<\length>值。如果没有指定，则默认为0.
值越大，模糊面积越大，阴影也就越大越淡。不能为负值，此时阴影边缘锐利。
<spread-radius>这是第四个<\length>值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0.
<color>阴影颜色，如果没有指定，则由浏览器决定。

9.resize 允许控制一个元素的可调整大小性

（一定要配合overflow:auto使用）
默认值：none 不可继承
值：none 元素不能被用户缩放
both 允许用户在水平和垂直方向上调整元素的大小
horizontal 允许用户在水平方向上调整元素的大小vertical 允许用户在垂直方向上调整元素的大小

10.box-sizing

content-box 默认值，标准盒子模型。width与height只包括内容的宽和高，不包括边框，内边距，外边距。
border-box width和height属性包括内容，内边距和边距，但不包括外边距

11.边框图片

border-image-source 属性定义使用一张图片来代替边框样式
默认值：none 不可继承

12.css2背景

background-image 属性用于为一个元素设置一个或多个背景图像 默认值：none 不可继承
background-size 设置背景图片大小
默认值：auto auto 不可继承
值：百分比：指定背景图片相对背景区
auto：以背景图片的比例缩放背景图片。
注意：单值时，这个值指定图片的宽度，图片的高度隐式的为auto
两个值：第一个值指定图片的宽度，第二个值指定图片的高度

13.过渡

①transition-property 指定应用过渡属性的名称
默认值为all，表示所有可被动画的属性都表现出过渡动画
可以指定多个property
属性值： none 没有过渡动画
all 所有可被动画的属性都表现出过渡动画
②transition-duration
属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为0s，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
注意：如果时长是0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位（不能写0，一定要写0s）
③transition-timing-function
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
2、linear：（匀速），linear函数等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
3、ease-in：（加速），ease-in函数等同于贝塞尔曲线（0.42，0，1.0，1.0）
4、ease-out：（减速），ease-out函数等同于贝塞尔曲线（0，0，0.58，1.0）
5、ease-in-out：（加速然后减速），ease-in-out函数等同于贝塞尔曲线（0.42，0，0.58，1.0）
6、cubic-bezier：贝塞尔曲线
7、step-start：等同于steps(1，start)
step-end：等同于steps(1，end)
④transition-delay 属性规定了在过渡效果开始作用之前需要等待的时间。
默认值：0s
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁剪。两种情况下属性列表都保持不变
属性值以秒或毫秒为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时，会导致过渡立即开始。

检测过渡是否完成
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是transitonend（每一个拥有过渡的属性在其完成过渡时都会触发一次transitonend事件）
在transition完成前设置display:none，事件同样不会被触发

过渡的天坑：
①在元素首次渲染还没有完成的情况下,是不会触发过渡的
②在绝大部分变换样式切换时,如果变换函数的位置 个数不相同也不会触发过渡

14.2D变形

①transform
transform属性允许修改css视觉格式模型的坐标空间
transform属性，只对block级元素生效
②平移（translate）
X方向平移：transform：translateX(tx)
Y方向平移：transform：translateY(ty)
二维平移：transform：translate(tx[,ty]);如果ty没有指定，它的值默认为0
③倾斜（skew）
transform：skewX(45deg)
X方向倾斜：transform：skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜：transform：skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
正值：拉正斜杠方向的两个角
负值：拉反斜杠方向的两个角
④缩放（scale）
transform：scale(2)
X方向缩放：transform：scaleX(sx)
Y方向缩放：transform：scaleY(sy)
二维缩放：transform：scale(sx[,sy]);如果sy没有指定，它默认和sx的值相同
⑤基点的变换
transform-origin CSS属性更改一个元素变形的基点。

要点：transform变换组合，浏览器是从右向左渲染的
transform: translateX(100px) scale(.5)
底层原理是矩阵运算

top,height 百分比参照与包含快的高度
left,margin,padding,width 百分比参照与包含快的宽度
translate(-50%,-50%) 百分比参照于自身的宽高
background-position 百分比参照于（图片区域-图片的位图像素值）

15.3D变换

①景深
简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）
景深：让3D场景有近打远小的效果，是一个不可继承属性，可以作用于后代元素（不是作用于本身）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大
②3D缩放
transform:scaleZ(number)
transform:scale3d(scaleX,scaleY,scaleZ);
注意：如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿z轴移动的距离，从而使得感觉被扩大或压缩
③3D平移
transform:translateZ(length)是3D Transformaton特有的，其他两个2D中就有
translateZ 不能是百分比值；那样移动是没有意义的 。
transform:translate3d(translateX,translateY,translateZ);
translateZ 不能是百分比值；那样移动是没有意义的 。

16.动画（animation）

tranform与动画的区别：
tranform需要用户自己去触发，动画则不需要
①animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
值： none 特殊关键字，表示无关键帧。
keyframename 标识动画的字符串
②animation-duration
属性指定一个动画周期的时长。
默认值为0s，表示无动画。
值：一个动画周期的时长 ，单位为秒或者毫秒，无单位值无效
注意：负值无效，浏览器会忽略该声明，但是一些早期的带前缀的声明会将负值当作0s
③animation-timing-function
动画的默认效果：由慢变快再变慢
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
2、linear：（匀速），linear函数等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
3、ease-in：（加速），ease-in函数等同于贝塞尔曲线（0.42，0，1.0，1.0）
4、ease-out：（减速），ease-out函数等同于贝塞尔曲线（0，0，0.58，1.0）
5、ease-in-out：（加速然后减速），ease-in-out函数等同于贝塞尔曲线（0.42，0，0.58，1.0）
6、cubic-bezier：贝塞尔曲线
④animation-delay 定义动画开始前等待的时间，以秒或毫秒计（属于动画外的范畴）
⑤animation-iteration-count 定义了动画执行的次数（属于动画内的范畴） 重复的是关键帧
⑥animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
元素在动画外的状态
backwards：from之前的状态与from的状态保持一致
forwards：to之后的状态与to的状态保持一致
both：backwards+forwards
⑦animation-play-state 定义了动画执行的运行和暂停
animation-play-state: paused; //动画暂停
⑧关键帧（@keyframes）
语法：
@keyframes animationName{
keyframes-selector{
css-style;
}
}
animationName：必写项；定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比
from：0% to：100%
css-style：css声明

17.flex布局（弹性盒子布局）

①老版本
容器
容器的布局方向
-webkit-box-orient:horizontal/vertical
控制主轴是哪一根
horizontal：x轴
vertical：y轴
容器的排列方向
-webkit-box-direction:normal/reverse
控制主轴的方向
normal：从左往右/从上到下（正方向）
reverse：从右往左/从下到上（反方向）
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
-webkit-box-pack
主轴是x轴
start:在右边
end:在左边
center:在项目两边
justify:在项目之间
主轴是y轴
start:在下边
end:在上边
center:在项目两边
justify:在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start:在右边
end:在左边
center:在项目两边
侧轴是y轴
start:在下边
end:在上边
center:在项目两边
②新版本
容器
容器的布局方向
容器的排列方向
flex-direction
控制主轴是哪一根，控制主轴的方向
row：从左往右的x轴
row-reverse：从右往左的x轴
column：从上往下的y轴
column-reverse：从下往上的y轴
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
justify-content
flex-start:在主轴的正方向
flex-end:在主轴的反方向
center:在两边
space-between:在项目之间
space-around:在项目两边
侧轴
algin-items
flex-start:在侧轴的正方向
flex-end:在侧轴的反方向
center:在两边
baseline:基线对齐
stretch:等高布局（项目没有高度）
项目
弹性空间管理
flex-grow：弹性因子（默认值为0）
③新版本新增的
容器
flex-wrap：控制的是侧轴的方向
nowrap 不换行
wrap 侧轴方向由上而下 （flex-shrink失效）
nowrap 侧轴方向由下而上（flex-shrink失效）
align-content:多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）
flex-flow：flex-direction和flex-wrap的简写属性
本质上控制了主轴和侧轴分别是哪一根，以及它们的方向
项目
order：控制项目的排列顺序
align-self：项目自身富裕空间的管理
flex-shrink：收缩因子（默认值为1）
flex-basis：伸缩规则计算的基准值（默认拿width或height的值）

④伸缩规则
flex-basis
flex-grow
可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）
可扩展空间 = （可用空间/所有相邻项目flex-grow的总和）
每项伸缩大小 = （伸缩基准值flex-basis + （可扩展空间*flex-grow值））

⑤侧轴富裕空间的管理
单行单列
align-items
align-self (优先级高)
多行多列
align-content

18.媒体查询（@media）

(1)媒体类型
all 所有媒体（默认值）
screen 彩色屏幕
print 打印预览
(2)媒体属性
①width:浏览器窗口的尺寸（min max）
min-width:800px >=800px
max-width:800px <=800px
②device-width:设备独立像素（min max）
pc端：分辨率 移动端：具体看机器的参数
③device-pixel-ratio （必须加-webkit-前缀）
pc端：1 移动端：具体看机器的参数
(3)关键字
①and:代表与的意思，一般用and来连接媒体类型的媒体属性
②only：和浏览器兼容性有关
老版本的浏览器只支持媒体类型，不支持带媒体属性的查询
@media screen{} @media only{}
③（,）:代表或的意思
④not:取反

19.多列布局

(1)栏目宽度
column-width:指定每一栏的宽度
(2)栏目列数
column-count:指定要多少栏
(3)栏目距离
column-gap:xxpx;
(4)栏目间隔线
column-rule:指定栏目之间的间隔线样式

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 541143263@qq.com