css小结

1、css中的选择器

字符串匹配选择器

input[type="text"]{

backgorund-color:grey;

}

匹配开头的值：

input[type^="t"]{

}

匹配结尾的值：

input[type$="t"]{

}

匹配包含值：

input[type$*=""]{

}

应用多个class中的相同的class,用空格隔开的中的一个：

input[type~*=""]{

}

2、css中边框，字体，2D，3D变换

边框

border-radius   边框

border-image

阴影

box-shadow   盒子阴影

text-shadow   文字阴影

背景

backgroud-size 背景尺寸

background-origin 

变换2D/3D

transition

word-wrap  文字自动换行，布局

字体

<style type="css/text">

@font-face{

font-family:

src:url('')

}

div{

font-family:

}

</style>

3、css3中的结构性伪类

E：nth-child(n)条件：以父元素为单位，它指第你个元素，且这个元素为指定元素E；

E：first-child条件：以父元素为单位，它指第一个元素，且这个元素为指定元素E；

E：last-child条件；以父元素为单位，它指最后一个元素，且这个元素为指定元素E；

E:nth-last-child(n):以父元素为单位，它指打折书的第n个元素，且这个元素为指定元素E；

nth-of-type：

E：nth-of-type(n)条件：以父元素为单位，它指以E为类型的所有元素；

E：first-of-type条件：以父元素为单位，E类型的中第第一个。

E:last-of-type条件：以父元素为单位，E类型元素的最后一个。

E:nth-last-of-type条件：以父元素为单位，E类型的倒数第一个。

4、css3阴影

box-shadow:阴影；

text-shadow:文字阴影；

box-shadow:x轴 Y轴 模糊值 外延 颜色 默认向外，向内阴影用insert

上为负，左为负。

5、css3word-break

word-break：设置自动换行格式。

break-all:所有都换行，英文允许拆分，浏览器中无论字符还是文字都换行；

normal:英文不允许拆分，中文不允许以符号开头。

keep-all:以标点符号为断行。

word-wrap:长单词也换行。

6、css3媒体查询器

根据根据用户和浏览器的大小显示不同的css样式和布局

Bootstrap框架和布局。

@media  screen/print and (min-width:xxpx){

}

 表示>=xxpx;

@media screen/print and (mini-width:xxpx) and (max-width:xxpx) 

表示xxpx 到 xx-1px之内的媒体样式

7、css3弹性布局

布局的方向：

flex-direction:row;

布局是否换行：

flex-wrap:wrap;

布局中的内容是否翻转：

flex-flow:row-reverse

水平对齐方式：

justify-content:center;  flex-start ；flex-end 左为start，右为end;

垂直对齐方式：

align-items:center; flex-start; flex-end 

伸缩垂直对齐方式：

align-content：center；flex-start;flex-end 

8、css3字体应用

@font-face{

font-family:字体名称；

应用特定的字体样式时，应用.woff；应用特定的图标里的某一个图标时，在p{直接医用图标的 中的&#xe67f; }

src:url(    .ttf) //指整个图标的集合

src:url(    .woff)//指特定的字体样式

}

应用字体：

P{

font-family:字体名称；

font-style:字体样式；

}

应用字体：

p{

&#xe67f;

}

9.css3动画

动画与过度和变换的是：

1、动画要定义鼠标的四个伪类，love hate:link visited hover active;

2、动画可以定义次数。

3、动画可以定义在10% 20% ......

4、动画可以CSS选择器，伪类中。

变换可以应用在CSS选择器，动画中。

过度只能应用在CSS选择器中。

简单来说：动画包含了变换，动画可以设置状态和变换的规则，同时也可以应用在CSS选择器和伪类中。

缺点：

暂无

------------------------------------------------------------------- 动画代替原先的flash

定义动画规则

@keyframes 名字{

form{}

to{}

}

@keyframes 名字{

0%{}

10%{}

20%{}

100%{}

}

调用动画：

在CSS中调用，可以在类中也可以在伪类中。

animation:名字 完成过渡需要的时间 ilnear 何时开始时间 循环次数 动画模式(是否在下个周期开始逆向播放，默认是normal；forward:停止在最后的状态 ）

让动画停止在最后一帧：

var bsStop= document.querySelector("设置动画的类");
bsStop.addEventListener("webkitAnimationEnd", function(){ //动画停止时事务
bs.style.height=102+"px";
}, false);

JS调用动画：

10、css3画三角形

三角形：

width:0;height:0;border-bottom: 20px solid #B71C1C;border-left: 20px solid transparent;

11、css3元素居中

水平居中：

text-align:center和margin:0 auto;

只能水平居中，不能竖直居中；

并且子元素不能有float；

text-align:针对内部元素；

margin：0 auto:针对父元素；

垂直居中：

line-height:xxpx; 高度和要居中的元素的height一样；

vertical-align:middle; 

这种方法只能居中内部的文字，无法居中内部的元素；

万能的position：可以居中所有的内部元素；缺点是外边的元素应该宽和高都要设置过；

外部元素要设置relative，否则内部元素可能会飞出去；

方法：

内部元素设置

width：xxpx;

height:xxpx;

left：50%；

top：50%；

position：absolute；

margin-left：宽度一半的负数；

margin-top：高度一半的负数；

//相对于body的元素居中（这个居中外面没有设置relative，一般要设置）

#sec{
width: 1050px;
height: 680px;
left:50%;
top:50%;
position:absolute;
margin-left: -525px;
margin-top: -340px;
}

12、css3过度与变换

过度原理：从原始状态到最终状态。必须有开始和最终状态。（前提是必须有初始状态）

transition：all .2s linear/ease;

--------------------------------------------------

transition:

transition:

property:有none,all 查资料显示all代表所有的属性值改变时都会触发transition过度；

none：代表立即停止；

animation duration：过渡时间，指的是元素改变过程中的消耗的时间；包括before,和after;

animation type:过渡类型，指的是元素过度的过程中过度的类型；

linear：线性匀速过度；

ease：逐渐变慢；

ease-in-out:先变快再变慢；

ease-in:逐渐加速；

ease-out：逐渐减速；

animation delay：延迟时间，过渡效果延迟多长时间开始执行；

--------------------------------------------------

--------------------------------------------------

变换

css3 transform默认的都是顺时针旋转的，X轴，Z轴，Y轴下到上看顺时针；

transform：rotate scale skew translate matrix；//默认执行顺序；

                    旋转    缩放    倾斜    移动        矩阵

rotateX（xdeg）：延X轴3D旋转；正数代表默认右手在屏幕上顺时针旋转；

rotateY（xdeg）：沿Y轴3D旋转；正数代表默认右手在胳膊手在上顺时针旋转

rotateZ（xdeg）：沿Z轴3D旋转；正数代表对着屏幕的Z轴顺时针方向旋转

rotate（X,Y,Z,deg）：沿X,Y,Z轴进行3D旋转；

X代表横着，Y代表竖着；Z代表对着屏幕的方向；

scale：默认代表从中心点开始，扩大或者缩小；transform：scale（1）；

1代表：不缩放；

0-1代表：缩放；

1-无穷代表：扩大

改变中心点的位置，设置中心点位X,Y：transform-origin（距离X轴原点的坐标，距离Y轴原点的坐标）

skew：默认相对于X轴负方向进行倾斜；transform：skew（Xdeg）；

Xdeg：代表相对于X轴（负）方向倾斜Xdeg；

skewX(30deg) ：

skewY(10deg) ：

改变中心点的位置，设置中心点位X,Y：transform-origin（距离X轴原点的坐标，距离Y轴原点的坐标）

translateX：相对于X轴原点的像素；transform：translateX(100px)；

Xpx：偏移的像素；

translateY：相对于Y轴原点的像素；

改变中心点的位置，设置中心点位X,Y：transform-origin（距离X轴原点的坐标，距离Y轴原点的坐标）

matrix：

--------------------------------------------------

============================

变换和过度的区别是：

1、变换和以应用在所有变换中：

比如伪类或者动画中；

过度只能应用在css选择器当中。

13、css3定位

relative:(相对定位)：没有脱离标准文档流，以原来的位置定位。

如果父级设定了定位（无论是相对还是绝对）或者padding等css属性时，则以父级为原始点，

如果父级没有设置定位，则以设置了往上第一个设置了定位的元素为原始点；

relative：默认只是在原来的位置上进行移动，其原先的位置还保留着；

absolute:(绝对定位)：脱离了标准文档流，以最近的已经定位的祖先元素定位。

默认是以浏览器的左上角为坐标原点，

如果设置了TRBL并且父级已经定位（无论相对或者绝对），则以父级为原点；

如果父级没有定位，则以浏览器左上角为定位；

fixed:(固定定位):脱离了标准文档流，以相应的定位元素定位；

14、css3盒子模型

margin，padding:上 右 下 左。丢失的也不补。

margin-top:相对于外面的div的边距；如果没有div，就相对于最外层的边距；

margin-left：相对于外面的div的边距，如果没有div，就相对于最外层的边距；

margin-left;margin-top不是固定不变的，如果外层的div变化了，他相应的位置也会跟着改变；

relative:(相对定位)：没有脱离标准文档流，以原来的位置定位。

如果父级设定了定位（无论是相对还是绝对）或者padding等css属性时，则以父级为原始点，

如果父级没有设置定位，则以设置了往上第一个设置了定位的元素为原始点；

relative：默认只是在原来的位置上进行移动，其原先的位置还保留着；

absolute:(绝对定位)：脱离了标准文档流，以最近的已经定位的祖先元素定位。

默认是以浏览器的左上角为坐标原点，

如果设置了TRBL并且父级已经定位（无论相对或者绝对），则以父级为原点；

如果父级没有定位，则以浏览器左上角为定位；

fixed:(固定定位):脱离了标准文档流，以相应的定位元素定位；

全屏：width：1349px；height：667px；

盒子整体width:1349之后；

如果再设置内边距：50px；

盒子的width就会变为1449；内边距会加宽盒子的宽度

15、css3渐变背景

背景大小：

background-size:100% 100% 背景图片占盒子的比例 //宽度，高度;      一个值的时候为整个图片的百分比；

background-size:固定值 不管盒子多大背景图片大小固定//宽度，高度;

background-size:cover 背景图片保持不失真

background-size:contain 背景图片根据内容来决定，和内容的大小一致,包含在边框中，根据边框的宽度或高度来调整高度或宽度，使整张图片包含在边框中;

background-repeat：no-repeat；

background-position:xpx,ypx;//左上角为坐标的0,0;距左面xpx，距上面ypx;

背景图片相对于外层div来说出现的位置坐标；

背景渐变：

background-image:linear-gradient(top,black,white) 线性渐变，投从top开始

background-image：radial-gradient(center,red,yellow) 聚焦渐变，从center向四周

background-image:linear ,0 0,0 100%,yellow red;

线性渐变;x,y开始坐标;x,y终止坐标;开始颜色，结束颜色;

relative:(相对定位)：没有脱离标准文档流，以原来的位置定位。

如果父级设定了定位（无论是相对还是绝对）或者padding等css属性时，则以父级为原始点，

如果父级没有设置定位，则以设置了往上第一个设置了定位的元素为原始点；

relative：默认只是在原来的位置上进行移动，其原先的位置还保留着；

absolute:(绝对定位)：脱离了标准文档流，以最近的已经定位的祖先元素定位。

默认是以浏览器的左上角为坐标原点，

如果设置了TRBL并且父级已经定位（无论相对或者绝对），则以父级为原点；

如果父级没有定位，则以浏览器左上角为定位；

fixed:(固定定位):脱离了标准文档流，以相应的定位元素定位；