前端知识点总结——C3
前端知识点总结——C3
1.复杂选择器
1.兄弟选择器
兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。
1.相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素
语法：选择器1+选择器2{}
注意：兄弟选择器，只能向后找，不能向前找
2.通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择器1~选择器2{}
2.属性选择器
<input type="text" name="uname" value="" placeholder="">
1.作用
允许通过元素所附带的属性及其值来匹配元素
type="text"
2.语法
1.基本语法
[attr] //属性
作用：匹配页面中所有附带attr属性的元素
ex：
1.[id] 匹配页面中所有附带id属性的元素
2.[class] 匹配页面中所有附带class属性的元素
2.elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素
ex:
div[id] 匹配页面中所有带有id属性的div元素
input[type] 匹配页面中所有带有type属性的input元素
.text[placeholder] 匹配页面中所有带有placeholder属性，并有text类选择器的元素
3.[attr1][attr2]
作用：匹配同时附带多个属性的元素
ex:
div[id][class]
4.[attr=value]
作用：匹配attr属性值为value的元素
ex:
<input type="text">
<input type="password">
//匹配的是第一个input元素(以下三种写法均可)
input[type="text"]
input[type=text]
input[type='text']
3.伪类选择器
1.已学过的伪类
链接伪类：
:link(尚未访问) :visited(访问过的)
动态伪类：
:hover(鼠标悬停)
:active(激活状态)
:focus(获取焦点)
2.目标伪类
作用：突出显示活动的HTML锚点元素，匹配被激活的锚点。
语法：
选择器:target{...}
div:target{...}
#d1:target{...}
3.结构伪类
作用：通过元素的结构关系来匹配元素（上下级嵌套结构）
1.:first-child
匹配的元素属于其父元素的第一个子元素
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
ex：
p:first-child{...} //找父元素的第一个子p元素(p1)
2.:last-child
匹配的元素是属于其父元素的最后一个子元素
ex:
p:last-child{...}//找父元素的最后一个子元素（p3）
3.:nth-child(n)
匹配的元素是属于其父元素中第n个子元素
table tr:nth-child(2) 匹配表格第二行数据
4.:empty
匹配没有子元素的元素
<div></div>
5.:only-child
匹配的元素是属于其父元素中的唯一子元素<div>
<p id="p1">ppppp1</p>
</div>
<div>
<p id="p2">ppppppppp2</p>
<span>ssssssss</span>
</div>
p:only-child{color:red;}//改变的是p1的颜色
4.否定伪类
将满足指定选择器的元素给排除出去（不要了，排除）
语法： :not(selector)
ex:
table tr:not(:first-child){
font-size:24px;
}
除第一行以外所有行的文字大小变为24px
4.伪元素选择器
1.:first-letter或::first-letter
作用：匹配某个元素的首字符
2.:first-line 或::first-line
作用：匹配某个元素的首行（第一行）
注意：首行与首字符冲突时，以首字符为准
3.::selection
匹配被用户选取的内容
注意：只能修改文本颜色或背景颜色
2.内容生成
1.什么是内容生成
使用CSS动态的向某元素中插入一段内容2.伪元素选择器
1.:before或::before
作用：匹配到某元素的内容区域之前
<p>(:before)鹅鹅鹅</p>
2.:after或::after
作用：匹配到某元素的内容区域之后
<p>锄禾日当午(:after)</p>
3.属性
属性：content
作用：向匹配到的位置处增加内容
取值：
1.字符串：用""引起来（普通文本）
2.url()：生成一副图像
4.解决问题
1.解决浮动问题
div:after{
content:"";
display:block;
clear:both;
}
2.子元素上外边距溢出问题
div:before{
content:"";
display:table;
}
3.弹性布局（Flexible Layout）
1.什么是弹性布局
弹性布局，是一种布局方式，注意解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。
2.弹性布局的相关概念
1.弹性布局的容器
弹性布局的容器 简称为"容器"（子元素的父元素，称为容器）
2.弹性布局的项目
弹性布局的项目 简称为"项目"(要实现布局效果的子元素，称"项目")
3.主轴
项目们排列方向的一根轴，就称为主轴
如果项目们按x轴排列（横向排列），那么x轴就是主轴
如果项目们按y轴排列（纵向排列），那么y轴就是主轴
4.交叉轴
与主轴交叉的一根轴就是交叉轴
如果主轴是x轴，那么y轴就是交叉轴
如果主轴是y轴，那么x轴就是交叉轴
3.语法
1.flex容器
将元素变为flex容器后，那么所有的子元素将变为flex项目，都允许按照弹性布局的方式排列
如何将元素变为flex容器？
属性：display
取值：
1.flex:将快级元素变为容器
2.inline-flex:将行内元素变为容器
注意：
1.元素设置为flex容器之后，子元素的float,vertical-align,clear将失效
2.容器的text-align将失效
2.容器的属性
1.flex-direction
作用：指定容器的主轴及其排列方向
取值：
1.row 默认值，即主轴为x轴，起点在左端
2.row-reverse 主轴为x轴，起点在有端
3.column 主轴为y轴，起点在顶端
4.column-reverse 主轴为y轴,起点在底端
2.flex-wrap
作用：当一个主轴排列不下所有项目时，指定子项目如何换行
取值：
1.nowrap 默认值，即空间不够时，也不换行，项目会自动缩小
2.wrap 换行
3.wrap-reverse 换行反转
3.flex-flow
作用：是flex-direction和flex-wrap的缩写形式
取值：
1.row nowrap 默认值
2.direction wrap
4.justify-content
作用：定义项目在主轴上的对齐方式
取值：
1.flex-start
在主轴的起点对齐
2.flex-end
在主轴的终点对齐
3.space-between
两端对齐（常用）
4.center
在主轴上居中对齐
5.space-around
每个项目两端间距相同
5.align-items
作用：定义项目在交叉轴上的对齐方式
取值：
1.flex-start
交叉轴的起点对齐
2.flex-end
交叉轴的终点对齐
3.center
交叉轴居中对齐
4.baseline
交叉轴上基线对齐
5.stretch
如果项目未设置尺寸，在交叉轴上将占满所有空间
3.项目的属性
该组属性只能设置在某一项目元素上，只控制一个项目，是不影响容器以其其它项目的效果。
1.order
作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0
取值：整数数字，无单位
2.flex-grow
作用：定义项目的放大比例，如果容器由足够的剩余空间，项目将放大
取值：
整数数字，无单位
默认值0，不放大
取值越大，占据的剩余空间就越多
3.flex-shrink
作用：定义项目的缩小比例，即容器空间不足时，项目该如何缩小
取值：
默认值为1，空间不足时，则等比缩小
取值为0，则不缩小（常用）
4.align-self
作用：定义当前项目在交叉轴上的对齐方式
取值：
1.flex-start
2.flex-end
3.center
4.baseline
5.stretch
6.auto (继承自父元素的align-items属性)
4.转换
1.什么是转换
改变元素在页面中的位置，大小，角度以及形状的一种方式。
2D转换:只在x轴和y轴上发生的转换效果
3D转换:增加在z轴的转换效果2.转换属性
1.转换属性
属性：transform
取值：
1.none 默认值，无任何转换效果
2.transform-function
表示1个或多个转换函数
如果是多个转换函数的话，中间用空格隔开
2.转换原点
属性：transform-origin
取值：数字/百分比/关键字
2个值：表示原点在x轴和y轴上的位置
3个值：表示原点在x轴,y轴,z轴上的位置
默认的原点在 元素的中心位置处
(center center)
(50% 50%)
3.2D转换
1.位移
1.什么是位移
改变元素在页面中的位置
2.语法
属性：transform
取值：
1.translate(x)
指定元素在x轴上的位移距离
取值为正，元素向右移
取值为负，元素向左移
2.translate(x,y)
指定元素在x轴和y轴的位移距离
x:同上
y:取值为正，元素向下移
取值为负，元素向上移
3.translateX(x)
在x轴上的位移
4.translateY(y)
在y轴上的位移
2.缩放
1.什么是缩放
改变元素在页面中的尺寸
2.语法
属性：transform
取值：
1.scale(value)
value:横向或纵向的缩放比例
value:默认值为1
>1: 放大
<1: 缩小
负数：放大（水平和垂直都翻转180度）
2.scale(x,y)
x:横向的缩放比例
y:纵向的缩放比例
3.单向缩放函数
scaleX(x)
scaleY(y)
3.旋转
1.什么是旋转
改变元素在页面上的角度
2.语法
属性：transform
取值：
rotate(ndeg)
n：取值为正，顺时针旋转
n：取值为负，逆时针旋转
注意：
1.转换原点会影响最后的转换效果
2.旋转是连同坐标轴一起旋转的，会影响旋转后的位移效果
2.语法
属性：transform
取值：
1.skewX(xdeg)
让元素向着x轴的方向产生倾斜效果，实际上改变的是y轴的倾斜角度值
x：取值为正，y轴逆时针倾斜
x：取值为负，y轴顺时针倾斜
2.skewY(ydeg)
让元素向着y轴的方向产生倾斜效果，实际上改变的x轴的倾斜角度值
y:取值为正，x轴顺时针倾斜
y:取值为负，x轴逆时针倾斜
3.skew(x)
等同于skewX(xdeg)
4.skew(x,y)
4.3D转换
1.透视距离
模拟人的眼睛到3D转换元素之间的距离（z轴）
属性：perspective
注意：该属性要加在3D转换元素的父元素上
2.3D旋转
属性：transform
取值：
1.rotateX(xdeg)
以x轴为中心轴，旋转元素的角度
取值为正，顺时针旋转
2.rotateY(ydeg)
以y轴为中心，旋转元素的角度
3.rotateZ(zdeg)
以z轴为中心，旋转元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值大于0的数字时，表示该轴要参与旋转，取值为0则不参与旋转
rotate3D(1,0,0,45deg)只在x轴旋转45度
roatate3d(1,1,1,0deg)
5.过渡
1.什么是过渡
使得css属性值，在一段时间内平缓变化的效果2.过渡语法
1.指定过渡属性
属性：transition-property
取值：
1.all 能使用过渡的属性，一律用过渡体现
2.具体属性名
ex:
transition-property:background
当背景的属性在发生变化时用过渡给体现出来
transition-property:border-radius;
当边框倒角在发生改变时用过渡体现出来
transition-property:all
允许设置过渡效果的属性：
1.颜色属性（背景,文字,边框颜色,阴影颜色）
2.取值为数字的属性（高宽，内外边距等）
3.转换属性（位移，旋转，缩放，倾斜）
4.阴影属性
5.渐变属性
6.visibility属性
2.指定过渡时长
作用：指定在多长时间内完成过渡操作
属性：transition-duration
取值：
以s或ms为单位的数值
1000ms=1s
3.指定过渡速度时间曲线函数
属性：transition-timing-function
取值：
1.ease 默认值，慢速开始，快速变快，慢速结束
2.linear 匀速
3.ease-in 慢速开始，加速结束
4.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始和结束，中间先加速后减速
4.指定过渡延迟时间
属性：transition-delay
取值：以s或ms为单位的数值
5.过渡属性的编写位置
1.将过渡放在元素声明的样式中
既管去，又管回
2.将过渡放在触发的操作中（hover）
只管去，不管回
6.过渡的简写形式
transition:property duration timing-function delay;
ex:
transition:background 2s ease,border-radius 2s;
transition:all 2s; //上面的简写
6.动画
1.什么是动画
使元素从一种样式逐渐变为另一种样式
即将多个过渡效果放下一起
动画是通过"关键帧"，来控制动画的每一步
关键帧：
1.定义动画执行的时间点
2.在该时间点上的样式是什么2.动画的使用步骤
1.声明动画
为动画起名
定义关键帧
2.为元素调用动画
指定元素调用的动画名称以及各个参数属性
3.定义动画（声明动画）
@keyframes 动画名称{
/*定义该动画中所有的关键帧*/
0%{
/*动画开始时元素时的样式*/
}
25%{
/*动画执行到1/4时的样式*/
}
50%{
/*动画执行到一半时的样式*/
}
75%{
/*动画执行到3/4时的样式*/
}
100%{
/*动画执行结束时的样式*/
}
}
4.动画调用（动画属性）
1.animation-name
作用：指定调用动画的名称
2.animation-duration
作用：指定动画执行一个周期的时长
取值：以s或ms为单位的数值
3.animation-timing-function
作用：指定动画的速度时间曲线函数
取值：ease,linear,ease-in,ease-out,ease-in-out
4.animation-dealy
作用：指定动画的延迟时间
取值：以s或ms为单位的数值
5.animation-iteration-count
作用：指定动画的播放次数
取值：
1.具体数字
2.infinite 无限次数播放
6.animation-diretion
作用：指定动画的播放方向
取值：
1.normal
默认值，正常播放0%-100%
2.reverse
逆向播放 100%-0%
3.alternate
轮播播放
奇数次数播放时，正向播放
偶数次数播放时，逆向播放
7.动画的简写方式
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
作用：规定动画在播放前或播放后的状态
取值：
1.none 默认值
2.forwards
动画播放完成后，将保持在最后一个帧状态
3.backwards
动画播放前，延迟时间内，动画保持在第一个帧的状态上
4.both
forwards与backwards的合体
9.animation-paly-state
作用：指定动画处于播放还是暂停的状态
取值：
1.paused 暂停
2.running 播放
7.CSS Hack
1.解决问题
解决IE浏览器兼容性问题
解决办法：针对不同浏览器编写不同CSS代码2.CSSHack 的原理
使用CSS样式的优先级解决兼容性问题3.CSSHack的实现方式
1.CSS类内部Hack
在样式属性名称前或属性值后增加前后缀，以便于识别不同浏览器
+:IE6,7的前缀
-:IE6的前缀
\0:IE8,9,10的后缀
\9\0:IE9,10的后缀
2.CSS选择器Hack
在选择器前增加前缀以便识别不同的浏览器
*:识别IE6
*+：识别IE7
div~div{}
*div~div{IE6识别}
*+div~div{IE7识别}
3.HTML头部引用Hack
使用IE条件注释来判断浏览器的版本，从而执行不同的代码
语法：
<!--[if 条件 IE 版本号]>
满足条件要执行的HTML代码
<![endif]-->
版本号：6-10
条件：
1.gt
只有在大于指定版本的浏览器中执行代码
ex:
<!--[if gt IE 6]>
该段内容只显示在IE6以上版本的浏览器中
<![endif]-->
2.gte
大于等于
3.lte
小于等于
4.lt
小于
5.！
在指定条件以外版本的浏览器中执行操作
6.省略条件
只在指定版本的浏览器中执行操作
判断是否为IE浏览器或IE的指定版本
