一：复杂选择器
1.兄弟选择器
| 兄弟元素：具有相同父级元素的平级元素 兄弟选择器，只能找弟弟，不能找哥哥 |
① 相邻兄弟选择器
| 选择器1+选择器2{ } 获取紧紧挨在某元素后面的兄弟元素 |
②通用兄弟选择器
| 选择器1~选择器2{ } 获取某元素后所有符合要求的兄弟元素 |
2.属性选择器
| id class style title value iwdth.... 允许通过元素多附带的属性，及其值来匹配页面属性，很精准 |
①[attr] attr代表任意属性
| [id]{ } [id][title]{ } 匹配页面中所有带attr这个属性的元素 |
②elem[attr]
| p[title]{} p[id][title][class]....{ } 匹配元素中所有带attr属性的elem元素 |
③elem[attr=value]
| div[title="name"][classs="c"]{ } 匹配页面中带有attr属性。并且值为value的elem元素 |
④模糊属性值匹配
| [attr ^= value]{ } 匹配attr的值以value开头的元素 [attr $= value]{ } 匹配attr的值以value结尾的元素 [attr *= value]{ } 匹配属性值中，有value的元素 [attr ~= value]{ } 匹配属性值中，有value这个独立单词的元素 |
3.伪类选择器
| :link :visited :hover :active :focus 已经学过的伪类 |
①目标伪类（锚点）
| 选择器：target{ } 让被激活的锚点，应用样式 |
②结构伪类
| elem:first-child{ } 代表两个条件 匹配elem的父元素的第一个儿子（elem的大哥） 这个大哥必须是elem元素 elem:last-child{ } 匹配elem的父元素的最后一个儿子（elem的小弟）这个最小的弟弟必须是elem元素 elem:nth-child(n) 匹配elem的父元素的第n个儿子（n从1开始） 这个儿子也必须是elem |
③匹配空元素
| :empty{ } 空元素 空元素：没有文本，没有空格，没有其它子元素的元素 |
④ :only-child
| :only-child 匹配，当前元素是其父元素的唯一的子元素 |
⑤否定伪类
| :not(selector) a:not(:first-child){ color:#ff0;} /* 除了第一个a标签，其它a的字体都变成黄色 */ a:not(:nth-child(3)){color:#f0f;} /*除了第三个a标签，其它a的字体都变成蓝*/ |
4.伪元素选择器
①内容伪元素
| 1. ::first-letter{ } 或 :first-letter{ } 匹配首字符的样式 2. ::first-line{ } 或 :first-line{ } 匹配首行的样式， 当前行和首字符冲突时，以首字符未准 3. ::selection{ } 必须是两个 : 匹配选中部分的文字样式 注意：只能改变字体颜色和背景颜色 |
②伪元素选择器，内容生成
| 使用CSS，添加html元素，称之为伪元素内容生成 :before 或 ::before 匹配到某个元素的内容区域的最前面，添加一个内容 content：添加文本或者图片 display：是设置这个添加的内容的显示规则 :fater 或 ::after 匹配到某个元素的内容区域的最后面，添加一个内容 注意：content中，只能添加文本或者图片 我们可以理解为在内容区域中最前面或者最后面，添加一个元素，这个元素的显示方式，由display来设定 |
③伪元素内容添加，可以解决的问题
#parent::before{ content:""; display:table; } |
#d1:after{ content:""; display:block; clear:both; } |
二：弹性布局 （重点********）
1.什么是弹性布局
| 弹性布局是一种布局方式， 主要解决某个元素中子元素的布局方式，为布局提供很大灵活性 |
2.弹性布局相关的概念和名词解释
| 1.容器 要发生弹性布局的子元素，他们的父元素称之为容器 容器要设置属性 display:flex; |
| 2.项目 要发生弹性布局的子元素们，称之为项目 就是设置了 display:flex; 那个元素的，子元素们 |
| 3.主轴 项目们在容器中排列的方向，就是主轴 如果项目横向排列，x轴就是主轴； 如果项目纵向排列，y轴就是主轴 项目们的排列顺序，靠主轴的起点和主轴的终点来定义 |
| 4.交叉轴 与主轴垂直相交的一条轴，叫做交叉轴 项目们在交叉轴上的对齐方式，是交叉轴的起点和终点 |
3.语法
| display： 写在父元素中 取值：1. flex 将块级元素设置为容器 2. inline-flex 将行内元素设置为容器 特点： 1.弹性项目，默认x轴是主轴，主轴起点在左侧（块级元素横向排列的第二个解决方案） 2.项目的float/clear/text-align/vertical-align 属性失效 3.每个项目可以自由的设置尺寸 |
4.容器的属性
①主轴的方向
|
②设置项目换行
| flex-wrap 取值：
|
③主轴方向，项目换行的缩写
| flex-flow: 取值：direction wrap |
④定义项目在主轴上的对齐方式
| justify-content： 取值
|
⑤项目在交叉轴上的对齐
| align-items： 取值
|
5.项目的属性
| ①order 定义项目的排列顺序 取值：无单位整数，值越小，越靠近主轴起点 | ||||||||||||
| ②flex-grow 定义项目的放大比例 ，如果容器有足够大的剩余空间，项目将按比例放大 取值： 无单位的数字， 默认值 0 ，不放大 | ||||||||||||
| ③flex-shrink 定义项目缩小比例，容器空间不够时，项目该如何缩小 取值：无单位数字 默认值 1 ，取值越大，缩小比例越大 ， 0 不缩小 | ||||||||||||
| ④align-self 设置此项目在交叉轴上的对齐方式，不影响其他项目 取值：
|
三：CSS Hack
| div{ background:-webkit-linear-gradient(....); background:-o-linear-gradient(....); background:-ms-linear-gradient(....); background:-moz-linear-gradient(....); } 由于不同的浏览器对css的解析认知不同，会导致同一份css在不同浏览器中生成页面效果不同 面对这种情况，开发人员需要针对不同浏览器写不同的css 这个行为，就叫做css hack tmooc有css hack相关拓展视频 |
四：转换 （重点-********）
1.什么是转换
| 改变元素在页面中的位置，大小，角度以及形状 2D转换。只在x轴和y轴发生的转换效果 3D转换，增加了z轴的转换效果，3D是模拟出来的 |
2.转换的属性
| transform： 转换函数1 转换函数2...... 取值 1. none 默认值，无任何转换效果 2. transform-function 转换函数 表示1个或者多个转换函数，如果是多个转换函数，每个函数之间用空格分开 transform：tranlate（400px） rotate（90deg）； 学习转换就是学习转换函数 |
3. 转换原点
| transform-origin： 取值： 1. 以px为单位的数字 2. % 3. 关键字 x（left/center/right） y（top/center/bottom） 取值个数： 2个值，原点在x轴和y轴上的位置 3个值，原点在x轴，y轴，z轴上的位置 默认值： center center |
4. 2D转换
①位移（改变元素的位置）
| transform：translate(参数) 参数： 1. translate(x)等同于translateX(x) 指定元素在x轴上的位移距离 + 往右 - 往左 2. translate(x,y) 指定元素在x轴和y轴上的位移距离 x：+ 往右 - 往左 y：+ 往下 - 往上 3. translateX(x) 4. translateY(y) 取值： 1. 以px为单位的数字 2. % 百分比（自身宽度的百分比） |
面试题
| 一个div200px*200px。使用css操作，如何在浏览器窗口不断变化的情况下，让该div永远在窗口中心显示 解决方案: position:absolute;top:50%;left:50%;transform:reanslate(-100px,-100px); |
②缩放（改变元素的尺寸）
| transform：scale(value) 取值： 一个值，value >=1 x轴和y轴都放大的倍数 0 < value < 1 x轴和y轴都缩小 -1<value<0 x轴和y轴都缩小，并反转180度 value<=-1 x轴和y轴放大，并反转180度 两个值，scale(x,y) 分别设置x轴和y轴的放大比例 scaleX(x) 单独设置x轴 scaleY(y) 单独设置有轴 |
③旋转（改变元素的角度）
| transform：rotate(180deg) 取值： + 顺时针旋转 - 逆时针旋转 注意：旋转原点会影响效果，旋转是连同坐标轴一起旋转的，会影响旋转之后的移动方向 |
④倾斜
| 1.skew(x)等同于skewX(x) 让元素向着x轴发生倾斜，实际上改变的是y轴的角度 x：+ 逆时针倾斜 - 顺时针倾斜
2.skewY(y) 让元素向着y轴发生倾斜，实际上改变的是x轴的角度 y：+ x轴顺时针倾斜 - x轴逆时针倾斜 |
5. 3D转换----3d都是模拟的
①透视距离
| 模拟人的眼睛到3D转换元素之间的距离，透视距离不同，看到的效果不同 perspective：距离 设置透视距离 ，此属性要加载到3d转换元素的父元素上 |
②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 表示该轴参与旋转 |
五：过渡（重点*****）
1.什么是过渡
| 让css属性的值，在一段时间内平缓变化的效果 |
2.语法
①指定过渡的属性
| transition-property: 取值： 直接写css的属性，多个属性之间用空格分开 all 所有支持过渡的属性，都参与此次过渡效果 支持过渡的属性 |
②指定过渡时长
| transition-duration 指定用多长时间完成此次过渡操作 取值： s/ms 为单位的数字 1s=1000ms |
③过渡时间曲线函数
| transition-timing-function： 取值： 1. ease 默认值，慢速开始，中间变快，慢速结束 2. linear 匀速 3. ease-in 慢慢开始，快速结束 4. ease-out 快速开始，慢慢结束 5. ease-in-out 慢速开始，慢速结束，中间先加速后减速 |
④过渡的延迟时间
| transition-delay： 让过渡效果，延迟多少时间执行 取值： s/ms 为单位的数字 |
⑤过渡代码的编写位置
| 原始选择器中，过渡效果有去有回 :hover中,过渡效果有去无回 |
⑥简写方式
| transition：property duration timing-function delay； 最简方式： transition：duration； |
六：动画
1.什么是动画
| 元素从一种样式逐渐变为另外一种样式， 其实就是多个过渡效果放到一起 |
2.使用关键帧来控制动画的每一个状态
| 关键帧 1. 动画执行的时间点 2.在这个时间点上的样式 |
3.使用动画
①使用关键帧定义动画
| @keyframes 动画名称{ 0%{ 样式} ….50%{ 样式} …. 100%{样式} } eg： @keyframes liangjump{ 0%{transform:translate(0px,0px);} 20%{transform:translate(0px,200px);} 40%{transform:translate(0px,0px);} 60%{transform:translate(0px,150px);} 80%{transform:translate(0px,0px);} 100%{transform:translate(0px,110px);} } |
②调用动画
| 1. 调用动画名称 animation-name：动画名称 2. 设置动画执行时间 animation-duration：s/ms 3. 设置动画的时间曲线函数 animation-timing-function 4. 设置动画延迟播放 animation-delay：2s； |
③动画的其它属性
| animation-iteration-count： 设置动画的播放次数 取值： 1. 具体次数，无单位数字 |
| animation-direction： 设置动画的播放顺序 取值： 1. nomal 默认 0%~100% 2. reverse 100%~0% 3. alternate 轮流播放，第一遍正向，第二遍逆向，….. |
| 动画的简写方式 animation：name duration timing-function delay count direction |
| animation-fill-mode： 设置动画，播放前后的状态 取值： 1. backwards 动画播放之前的延迟时间内，显示第一帧 2. forwards 动画播放完成后，保持在最后一帧 3. both 同时使用backwards和forwards 4. none 默认值，不填充 |
| animation-play-state 设置动画的播放状态 取值： 1. paused 暂停 2. running 播放 |
5.动画的兼容性
| 如果要兼容低版本浏览器，需要在动画声明的时候加前缀 @keyframes 动画名称{} @-webkit-keyframes 动画名称{} @-o-keyframes 动画名称{} @-moz-keyframes 动画名称{} @-ms-keyframes 动画名称{} |
6.开发中使用的动画样式
| 使用animation.css中预定义好的动画 |
七：CSS优化
1.CSS优化的目的
| 1. 减少服务器的压力 2. 提升用户体验 |
2.CSS优化原则
| 尽量减少http的请求个数， .css .js .jpg 在页面顶部，引入css文件 将css和js文件放到外部独立文件中 |
2.CSS代码优化
| 1. 合并样式（能简写，就不分开写，能写群组，就不单写） 2. 缩小样式文件的大小，（能重用的样式，尽量重用） 3. 减少样式重写 4. 避免出现空的href和空的src 5. 选择更优的样式属性 6. 代码压缩 |
1081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
