CSS3重点总结_html/css_WEB-ITnose

CSS3重点总结
(1)兄弟选择器：2种：+、 ~
1.相邻兄弟选择器（+）：选择器1+选择器2
选择"选择器1"相邻的后一个兄弟"选择器2"
强调：选中的是自己相邻的下一个元素，不是自己

2.通用兄弟选择器（~）：选择器1~选择器2
选择"选择器1"之后的所有兄弟"选择器2"
+ 和~的区别：
（1）+只选相邻一个，~选之后所有
（2）+要求必须相邻，如果相邻元素不满足+后选择器要求则不选
（3）~跳过之后所有不满足选择器条件的元素。

何时使用兄弟选择器：只要选兄弟元素，就用兄弟选择器

(2)属性选择器：根据元素现有的属性和属性值特征，选择元素
何时使用属性选择器：如果现有属性已经可以区分元素
语法：只要使用属性选择器，必须用[]
1.元素[属性] : 匹配具备 属性的 指定元素
例如： p[id] : 匹配具备id属性的p元素

2.元素[属性1][属性2] :
p[id][class] : 匹配出所有即具备id属性，又具备class属性的p元素

3.元素[属性=值] :
input[type="text"] : 匹配type的值为text的input元素

4.元素[属性~=值] :选择属性名中包含指定单词的元素
input[class ~= second] :
选中

~= : 包含指定的数据（独立）
= : 只有指定的数据

5.[属性名^="关键字"]：选择以"关键字"开头的属性值

6.[属性名*="关键字"]：选择包含"关键字"的属性值

7.[属性名$="关键字"]：选择以"关键字"结尾的属性值

(3)伪类选择器：
(1)元素状态伪类(多数应用在表单元素上):主要匹配元素的禁用、启用、选中状态
:disabled 匹配每个被禁用的元素
:enabled 匹配每个已启用的元素
:checked 匹配每个被选中的元素(只用于单选按钮和复选框)

(2)目标伪类:突出显示活动的HTML锚，用于选取当前活动的目标元素
:target
何时使用:需要跳转到的锚点位置元素发生样式变化

(3)结构伪类:主要从元素的结构(层级结构)上来进行划分的
:first-child 匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素(包含文本、换行、空格)的元素

这是一个段落

非empty

empty
:only-child 匹配属于其父元素的唯一子元素
:nth-child(n) 选择器匹配属于其父元素的第 n个子元素

(4)否定伪类:选择所有不满足条件的元素
:not(selecotr)

(5)伪元素选择器:主要针对元素中的文本内容进行匹配的(一般用于 排版、首字符突出等操作)
:first-letter:选取指定选择器的首字母
:first-line:选取指定选择器的首行
::selection:匹配用户选取的部分

(4)内容生成:通过css 向元素的前面或后面增加一部分内容
:before :当前元素内容的开始位置之前
:after ：当前元素内容的结束位置之后

如何使用(2步)：
1.先使用:before或:after 选择要生成内容的位置
2. 使用content属性在选中位置生成内容
content属性后，可跟3种内容：文字，图片，计数器
普通文字： content:"提示"
图片： content:url(路径)
计数器： content:counter(计数器名)
例如：
选择器:before{content:内容}——在原内容开头生成
选择器:after{content:内容}——在原内容结尾生成
选择器:before/after{content:counter(计数器名)}

(5)计数器:能按规律生成序号的属性
如何使用(3步)：
1. 创建计数器属性：在使用计数器范围的父元素上
父元素{counter-reset:计数器名}
2. 设置计数器步进：在使用计数器的元素上
当前元素{counter-increment:计数器名 步进数}
3. 使用计数器生成序号：
选择器:before/after{content:counter(计数器名)}

计数器的执行：默认从0开始，先加一次步进，再取号

厂商前缀：特定浏览器厂商对特定属性增加的与本厂商对应的前缀。
-moz- Firefox
-webkit- Chrome Safari
-ms- IE

(6)多列
1.分隔列:把一段文本拆分成几列
column-count:规定元素被分隔的列数
2.列间隔：设置列与列之间的距离
column-gap:间隔
3.列规则：可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细
column-rule:大小 样式 颜色;
column-rule-width:
column-rule-style:
column-rule-color:
4.浏览器兼容
1、IE10 以及 Opera 浏览器支持多列属性
2、FireFox 需使用前缀 -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:

(7)CSS Hack:针对不同浏览器书写的css代码 (浏览器兼容性所引发的问题)
浏览器都有两种解析网页的模式：
1.标准模式：严格按照XHTML或HTML4.0标准，解析网页
只要符合标准的网页，在不同浏览器显示效果应该是一致的。
2.混杂模式：按照浏览器自带的规则，解析网页
没有标准可循，同一网页在不同浏览器的加载效果可能不一致

如何规定浏览器使用标准模式解析：DOCTYPE

浏览器兼容问题
1、margin和padding
ie6中 默认的 maring 偏大
解决方案:body{margin:0px;}
2、居中布局
ie6以及低版本浏览器:通过父元素的text-align:center;完成居中
高版本浏览器(ie6,ie7+,chrome,firefox,opera,safari):通过当前元素的margin实现即 margin:0 auto;
3、元素高度与内容
ie6 : 元素的高度至少包括内容
其他:元素高度会超出容器
解决方案:overflow属性
4、子元素设置上外边距时
ie6:正常显示
其他版本:子元素的上外边距会认为是父元素的上外边距
解决方案:
1、给父元素设置边框
2、设置父元素的 padding-top

5、HTML头部引用Hack
通过HTML条件注释完成

IE6:

大于IE6的版本:

 

 

1.变形（transform）:迅速变化
2d
(1)旋转:围绕一个参照原点(transform-origin),旋转指定角度，默认为顺时针
语法：transform:rotate(ndeg)
n为正 则按顺时针旋转
n为负 则按逆时针旋转

参照原点:默认在元素的中心点，坐标(width/2,height/2)
坐标原点:在元素的左上角，坐标为(0,0)

修改参照原点(3种方法):
1.transform-origin:x坐标 y坐标 （x向右为正；y向下为正）
2.transform-origin: right bottom
3.transform-origin:100% 100%

注意：rotate不但旋转元素，而且同时旋转绘图坐标系的方向。如果配合着其他的变形一起来做的话，rotate在前的话，会影响之后延坐标轴的其他变形。
解决方案:如果配合变形一起来做，最好将rotate放在最后一个函数上
比如：transform:translate(50px,0px) rotate(30deg);
translate不受影响,水平移动
transform:rotate(30deg) translate(50px,0px);
translate受影响，延旋转后的x轴向右下移动50px

(2)位移:延 坐标方向 移动指定的距离
语法:translate(x轴移动距离,y轴的移动距离);
x : 正为右，负为左
y : 正为下，负为上

transform:translate(50px,50px);
注意:位移不会影响其他元素位置,但可能会盖住周围元素
其他两个单方向位移:
translateX(距离);
translateY(距离);

(3)缩放：将指定 坐标轴 上的坐标缩放指定 倍数
语法：transform:scale(倍数)——等比例缩放
倍数：0-1之间，缩小；>1，放大。
transform:scale(x轴缩放倍数，y轴缩放倍数)
强调：缩放同样受参照原点影响！
其他两个单向缩放：scaleX(倍数);
scaleY(倍数);

(4)倾斜：延 坐标轴方向 ，倾斜指定 角度
语法：transform:skew(ndeg);——仅延x轴倾斜
transform:skew(ndeg,ndeg);——延x轴，y轴同时倾斜

x轴方向：正角度向左倒，负角度向右倒
y轴方向：正角度左侧向上斜，负角度左侧向下斜

强调：倾斜受参照原点影响。默认参照原点在元素中心点。
其它两个单向倾斜：skewX(ndeg)
skewY(ndeg)

 

 

3d
perspective属性：设置假定的人眼位置到投影平面的距离
如何使用:设置在父元素上
浏览器兼容性:
Chrom,Safari : -webkit-perspective
Firefox : -moz-perspective

坐标轴：3个x轴，y轴，z轴
x轴向右为正，y轴向下为正，z轴靠近观察者的方向为正
(1)3d旋转：以指定*坐标轴*为圆心旋转指定角度
语法：transform:rotateX(ndeg)
transform:rotateY(ndeg)
transform:rotateZ(ndeg)
n为正，顺时针；n为负，则逆时针

(2)3d位移：特指延z轴移动
语法：transform:translate3d(x,y,z)——三个方向的位移
translateZ(z)——仅延z位移

(3)3d缩放：特指延任意坐标轴缩放
语法：transform:scaleZ(倍数)——将z坐标x指定倍数
强调：如果scale与其他变形函数连用，应放前边。

x y z
正 向右 向下 向前
负 向左 向上 向后

 

2.过渡（transition）：从*开始样式*，经过指定*时间*后，缓慢过渡到*结束样式*
过渡四要素
(1) 专门用于设置要过渡的属性名
语法： transition-property:属性名1,属性名2 ...;

(2)专门用于设置持续时间
语法：transition-duration:n1s,n2s ...;

(3)专门用于设置速度变化类型
语法：transition-timing-function:
备选值：ease: 先加速后减速（默认值）
linear: 匀速变化
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速后减速

(4)专门用于设置延迟开始时间
语法：transition-delay:n1s,n2s ...;

简版transition也可以同时设置多个属性的过渡
transition: 属性名1 持续时间 速度类型 [延迟],
属性名2 持续时间 速度类型 [延迟],
...

3.动画（animation） - 关键帧动画
关键帧：动画执行过程中，物体在某一位置上的特殊状态
关键帧动画：使用连续的关键帧，控制物体连续的状态变化
何时使用关键帧动画：
连续，有规律的过渡——过渡transition
无规律的连续变化——动画animation

如何实现：2步：
1. 定义关键帧：
@keyframes 动画名{
from{开始样式}
n%{当动画进度播放到n%时的样式}
...
to{结束样式}
}
2. 触发动画：
animation:动画名 持续时间 速度类型

如何使用：写在非伪类的选择器，页面加载后自动触发
写在伪类中，伪类触发时才播放

浏览器兼容性：@keyframes animation Firefox IE
@-webkit-keyframes -webkit-animation Chrome Safari
@-o-keyframes -o-animation Opera

动画子属性：
1、animation-name : @keyframes(动画)名称
2、animation-duration : 动画时长
3、animation-timing-function:动画速度函数
4、animation-delay:动画的延迟时间
5、animation-iteration-count : 播放次数
取值:
1、具体数值
2、infinite(无限次播放)
6、animation-direction : 动画播放方向
取值:
1、normal 正常播放
2、alternate 轮流播放
奇数次数：正向播放
偶数次数：反向播放
7、animation-fill-mode：动画播放前后的效果
备选值:
1、none:不改变默认行为
2、forwards:动画完成后保证最后一个属性状态
3、backwards:动画播放前，显示开始属性值
4、both
8、animation-play-state：控制动画播放与暂停
备选值:
1、paused : 暂停动画
2、running : 播放动画
使用场合:
1、配合伪类选择器
2、结合Javascript使用

animation:动画名称 持续时间 动画方式 延迟时间 重复次数 是否交替执行 结束状态
交替执行：alternate：单次正向执行，偶数次反向返回
结束状态：forwards：当动画完成时保持最后一帧状态