CSS_CORE

一：复杂选择器

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来设定

③伪元素内容添加，可以解决的问题

外边距溢出（添加空table）  #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-direction： 取值： row（默认值） 主轴是x轴，主轴起点是左侧 row-reverse 主轴是x轴，主轴起点是右侧 column 主轴是y轴，主轴起点是顶端 column-reverse 主轴是y轴，主轴起点是底部

②设置项目换行

flex-wrap 取值： nowrap （默认值） 容器空间不够，也不换行，项目自动缩小 wrap 空间不够就换行 wrap-reverse 换行并反转

③主轴方向，项目换行的缩写

flex-flow:      取值：direction wrap

④定义项目在主轴上的对齐方式

justify-content： 取值 flex-start（默认值） 以主轴为起点对齐 flex-end 以主轴为终点对齐 center 在主轴上居中对齐 space-between 主轴两端对齐，两端无空白 space-around 每个间距大小相同

⑤项目在交叉轴上的对齐

align-items： 取值 flex-start 交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴居中对齐 baseline 交叉轴基线对齐（主轴起点） stretch 前提，项目不写高，占满交叉轴上所有的空间

5.项目的属性

①order     定义项目的排列顺序     取值：无单位整数，值越小，越靠近主轴起点

②flex-grow  定义项目的放大比例 ，如果容器有足够大的剩余空间，项目将按比例放大   取值：  无单位的数字，  默认值 0  ，不放大

③flex-shrink   定义项目缩小比例，容器空间不够时，项目该如何缩小   取值：无单位数字  默认值 1  ，取值越大，缩小比例越大 ，  0 不缩小

④align-self  设置此项目在交叉轴上的对齐方式，不影响其他项目   取值： flex-start 交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴居中对齐 baseline 交叉轴基线对齐 stretch 前提，项目不写高，占满交叉轴上所有的空间 auto 使用容器定义的align-items的值

三：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  所有支持过渡的属性，都参与此次过渡效果 支持过渡的属性     1.颜色值  2.大多数取值为数字的属性   3.阴影  4. 转换 transform  5. 显示visibility

②指定过渡时长

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. 具体次数，无单位数字           2. infinite 无限

animation-direction：          设置动画的播放顺序 取值：  1. nomal 默认 0%~100%         2. reverse   100%~0%         3. alternate  轮流播放，第一遍正向，第二遍逆向，…..

动画的简写方式 animation：name duration timing-function delay count direction 最简方式： animation：name duration;

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. 代码压缩