CSS3知识总结

什么是css3

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。
最需要注意的问题是各个浏览器的兼容性问题在编写CSS3样式时，不同的浏览器可能需要不同的前缀。

浏览器前缀

前缀	浏览器
-webkit-	chrome和safari （Webkit）
-moz-	Firefox （Gecko）
-ms-	IE （Trident）
-o-	Opera （Blink）

css3选择器

选择器	含义
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标移动到链接上
:active	选定的链接(鼠标点击未松开)
p~ul	通用兄弟选择器：
p+ul	和相邻兄弟选择器
selector[attribute=value]	选择 attribute 属性值为 "value"的元素
selector[attribute	=value]
selector[attribute^=value]	选择 attribute 属性值以 “value” 开头的所有元素
selector[attribute*=value]	选择attribute 属性值包含 “value” 的所有元素
selector[attribute$=value]	选择 attribute 属性值以 “value” 结尾的所有元素
selector[attribute~=value]	选择 attribute 属性值为一个词列表，并且以空格隔开，其中词列表中包含了一个value1或value2词
:first-child	匹配选择器的第一个子元素，此元素必须是父元素的第一个子元素
:last-child	匹配选择器的最后一个子元素，此元素必须是父元素的最后一个子元素
:nth-child()	匹配属于其父元素的第 N 个子元素，不论元素的类型。(odd 奇数序号的元素 even 偶数序号的元素)
:only-child	匹配属于其父元素的唯一子元素的每个元素。
:root	匹配根元素
:empty	匹配没有子元素的对应选择器的元素

边框圆角

长度单位：em,px,pt(点Points),%
  border-radius:20px;//四个角
border-radius:20px 40px 30px 40px;//左上 右上 右下 左下;

			.box1{
				border-radius: 50%;
			}
			.box2{
				height: 50px;
				width: 50px;
				border-radius:50px 0px 0px 0px;
			}
			.box3{
				height: 50px;
				border-radius:50px 50px 0px 0px;
			}

渐变

径向渐变

链接: C33渐变.

线性渐变

文本和盒子阴影

box-shadow:0px 0px 10px red insert;
text-shadow:0px 0px 10px red;

项目	Value
x	x轴偏移量
y	y轴偏移量
blur	模糊度
color	颜色
inset/outset	内阴影/外阴影

文字换行

/* 显示一行，省略号 */
 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;/*允许单词断点换行*/
/* 显示两行，省略号 */
 
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

CSS3字体

@font-face可以自定义字体。把我们想要使用的字体放到服务器上，使用时直接加载到本地就能使用了。

font-family:自定义字体的名字
src：字体的路径

css3 背景

项目	Value
background-color	指定背景颜色
background-image	指定背景图片
background-repeat	指定背景图片的显示范围
background-position	指定背景图片的位置
background-attachment	背景图片固定 ------- scroll(默认值)/fixed(固定到当前窗口)/local(随着内容走)
background-size	背景图片大小-------cover（扩大背景图，使背景图片铺满整个容器）/ contain（等比缩放到某一边紧贴容器边缘）/10% 10%/20px 20px
background-clip	背景图片裁切 ------content-box（内容区域）/border-box（边框区域）/padding-box（内边距区域）
background-origin	背景图片定位区域（右侧可超出，到边框区域后消失） ------content-box（内容区域）/border-box（边框区域）/padding-box（内边距区域）

倒影

box-reflect:below 10px;
倒影,火狐不支持

项目	Value
below	底部
above	顶部
left	左
right	右
none	无倒影

.box{
				height:100px;
				width: 200px;
				background-image:url(swiper/img/218746.jpg) ;				
				background-size:100% 100% ;
				-webkit-box-reflect:below 1px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3))

			}

滤镜

filter:blur(10px)

项目	Value
grayscale	灰度(取值：0-1数值)
sepia	褐色(取值0-1)
saturate	饱和度(1为正常饱和度，大于1饱和度越高)
hue-rotate	色相旋转(取值：角度0-360deg)
invert	反色　(取值0-1 )
opacity	透明度　(取值0-1)
brightness	亮度( 取值：数字 0亮度全黑，1为正常亮度，大于1时会增加元素的亮度)
contrast	对比度　( 取值：数字 0亮度全黑，1为正常亮度，大于1时会增加元素的亮度)
blur	模糊(取值：像素，越大越模糊)
drop-shadow	阴影(box-shadow类似。)

过渡

transition:all 1s ease;

项目	Value
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。 (linear：匀速)
transition-delay	规定过渡效果延迟时间。默认是 0。

当元素背部朝向屏幕时隐藏

backface-visibility: hidden;

2D装换

transform :translate(10px 10px);
1.同时使用多个转换，其格式为
transform:translate() rotate() scale()…..等用空格隔开
2.其顺序会影响转换的效果（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前面

项目	Value
translate	平移(x轴，y轴)
scale	缩放(1,2) 负数是缩小
rotate	旋转（30deg）可接受负数
skew	倾斜（20deg）
transform-origin	改变基准点（可以是数值，百分比，也可以是位置单词如：top，left等）

3D转换

//开启3D空间
transform-style: preserve-3d
//景深
 perspective：600px;

transform: rotateZ(20deg); //增加Z轴的旋转
transform: translateZ(20px); //增加Z轴的位移

动画

1.指定动画

@keyframes 动画名称{
				0%{}
				100%{}
			}

2.使用动画

animation:name 2s ease infinite;

项目	Value
animation-name	指定动画名称
animation-durantion	指定动画播放的时间
animation-timing-function	指定动画播放的速度
animation-delay	指定动画播放的延迟时间
animation-iteration-count	指定动画播放的次数
animation-direction	指定动画播放的顺序（normal alternate reverse）
animation-fill-mode	属性规定动画在播放之前或之后，其动画效果是否可见none backwards forwards both
animation-play-state	属性规定动画正在运行还是暂停paused running

用js控制动画暂停

div.style.animationPlayState = "paused";
div.style.animationPlayState = "running";

flex布局

链接: flex布局.

flex布局中flex:1和flex:auto的区别

在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。

所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

项目	Value
display	指定 HTML 元素盒子类型。（flex）
flex-direction	指定了弹性容器中子元素的排列方式（row,row-reverse,column,column-reverse）
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。(flex-start,flex-end,center,space-between,space-around)
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。(flex-start,flex-end,center,baseline)
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。(nowrap,wrap,wrap-reverse)
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(flex-start,flex-end,center,space-between,space-around)
flex-flow	flex-direction 和 flex-wrap 的简写
给子元素设置
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用,设置自身的对齐方式。覆盖容器的 align-items 属性。(flex-start,flex-end,center,baseline)
flex	设置弹性盒子的子元素如何分配空间。

多媒体查询

@media only screen and (min-width: 100px) and (max-width: 640px) {
				
			}
@media only screen and (orientation:landscape ) {
				
			}

orientation:landscape 横屏时
orientation:portrait 竖屏时

em/rem

1.当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。

例如，根元素的字体大小为16px，那么10rem就等同于10*16=160px。

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

移动端书写规范

<meta name="viewport" content="width=device-width, initial-scale=1.0">
//开头要写声明 内容宽度等于网页的宽度，不允许手指放大

使用媒体查询 使用rem/em

怪异盒子

解决：box-sizing:border-box;

多列布局

项目	Value

column-count:|设置列数，默认值auto。
column-width:|设置列宽。规定每列最大的宽度
column-gap：|定义列间距，配合line-height可以使文字更加美观。
column-rule:|定义列边框。用法和border一致。同样可以单独设置列边框的属性。如：column-rule-style:solid;
column-span:|定义跨列显示。多用于标题。默认是none,只在本列中显示，可选all跨列所有。

	.box{
				width: 600px;
				height: 200px;
				column-count: 3;
				column-gap:40px;
				column-rule:1px solid red;
			}
			.tit{
				column-span: all;
				text-align: center;
				font-size: 20px;
				color: red;
			}