css_css3新增属性

一、私有前缀

w3c提出的某个css属性，在被浏览器正式支持前，浏览器厂商会根据浏览器内核，使用私有前缀来测试该属性，浏览器正式支持改属性后，就不需要该前缀了，Chrome、Safari和Edge浏览器私有前缀-webkit-，Firefox浏览器私有前缀-moz-

查询css3兼容性网站:https://caniuse.com/

二、新增长度单位

单位	含义
vh	视口高度百分比，10vh就是视口高度10%
vw	视口宽百分比
vmin	视口宽高最小那个百分比
vmax	视口宽高最大那个百分比
rem	根元素字体大小倍数，只与根原素有关

三、新增颜色设置方式

rgba、hls、hlsa

四、新增选择器

动态伪类选择器、目标伪类选择器、UI伪类选择器、语言伪类选择器、结构伪类选择器、否定伪类选择器、伪原素选择器

五、新增盒子属性

1. box-sizing盒子模型

值	含义
content-box(默认值)	标准盒模型
border-box	怪异盒模型

2. resize原素可以伸缩，配合overflow

值	含义
horizontal	水平方向可以调整
vertical	垂直方向可以调整
both	水平垂直都可以调整

3. box-shadow阴影

  box-shadow:h-shadow v-shadow blur spread color inset；
  /*box-shadow:none表示没有阴影*/

值	含义
h-shadow	必写，水平阴影位置，可以为负
v-shadow	必写，垂直阴影位置，可以为负
blur	可选，模糊距离
spread	可选，阴影外延值
color	可选，阴影颜色
inset	可选，将外部阴影转为内部阴影

4. opacity为整个原素添加透明效果，取值0-1，0完全透明，1完全不透明

六、新增背景属性

1. background-origin背景图原点

值	含义
content-box	从content区左顶点显示图像
border-box	从border区左顶点显示图像
padding-box(默认值)	从padding区左顶点显示图像

2. background-clip设置背景剪裁方式

值	含义
border-box(默认值)	从border区向外剪裁背景
padding-box	从padding区向外剪裁背景
content-box	从content区向外剪裁背景
text	背景只呈现在文字上，文字颜色设置transport，需要加-webkit-前缀

3. background-size背景大小

值	含义
auto(默认值)	图片真实大小
contain	图片宽高等比例缩放，图片完整放入容器，超出部分平铺
cover	等比例缩放，图片占满容器，超出部分剪裁
像素	宽高两个值
百分比	宽高两个值

4. background复合属性

  background:颜色 url() 重复 位置 / 大小 原点 剪裁方式；
  /*origin和clip只设置一个值，origin和clip
  都设置，size值必须写在position后*/

5. 引入多个背景图片

  background:url() no-repeat left top,
             url() no-repeat right top,
             url() no-repeat left bottom,
             url() no-repeat right bottom,

七、新增边框属性

1. border-radius边框圆角，一般设置border-radius:50%，四个角可以分开设置，分开设置角复合写法border-radius:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y;

特性	含义
border-top-left-radius	上左角，一个值是圆半径，两个值设置椭圆
border-top-right-radius	上右角
border-bottom-right-radius	下右角
border-bottom-left-radius	下左角

2. outline外轮廓(了解)

属性	含义
outline-style	none(默认值，无轮廓) ，dotted(点线)，dashed(虚线)，solid(实线)，double(双实线)
outline-color	颜色
outline-width	宽
outline	上边三个简写，无顺序要求
outline-offset	外轮廓与边框距离

八、新增文本属性

1. text-shadow文本阴影

  text-shadow:h-shadow v-shadow blur color;
  /*text-shadow:none;默认值，没有阴影*/

值	含义
h-shadow	水平位置阴影，必写
v-shadow	垂直位置阴影 ，必写
blur	模糊值，可选
color	颜色，可写

2. white-space文本换行

值	含义
normal(默认值)	文本超出边界自动换行，文本中换行被当做空格
pre	原文输出
pre-wrap	pre基础上，超出边界换行
pre-line	pre基础上，超出边界换行，只识别文本中换行，空格忽略
no-wrap	强制不换行

3. text-overflow文本溢出

  text-overflow:ellipsis;
  overflow:hidden;/*不为visible*/
  white-space:nowarp;

值	含义
clip(默认值)	内容溢出剪裁
ellipsis	内容溢出，以省略号显示

4. text-decoration文本修饰

属性	含义
text-decoration-line	修饰线位置，none(默认值，无修饰线) ，underline(下划线)，overline(上划线) ，line-through(贯穿线)
text-decoration-style	修饰线样式，none(默认值，无样式) ，dotted(点线)，dashed(虚线)，solid(实线)，double(双实线)
text-decoration-color	颜色
text-decoration	上三个简写

5. -webkit-text-stroke文本描边，仅支持webkit内核浏览器

  -webkit-text-stroke:2px red;/*复合属性，设置宽度和颜色*/
  -webkit-text-stroke-color:red;/*设置颜色*/
  -webkit-text-stroke-width:2px;/*设置宽度*/

九、新增渐变

1. linear-gradient线性渐变

  background-image:linear-gradient(red,yellow,green);
  /*默认从左到右red，yellow，green*/
  background-image:linear-gradient(to top,red,yellow,green);
  background-image:linear-gradient(to top right,red,yellow,green);
  /*修改渐变方向*/
  background-image:linear-gradient(to 45deg,red,yellow,green);
  /*以角度设置渐变方向*/
  background-image:linear-gradient(red 10px,yellow 10px,green 10px);
  /*修改开始渐变位置*/

2. radial-gradient径向渐变

  background-image:radial-gradient(red,green,yellow);
  /*默认从圆心四散*/
  background-image:radial-gradient(at left,red,green,yellow);
  background-image:radial-gradient(at 100px 100px,red,green,yellow);
  /*设置渐变圆心*/
  background-image:radial-gradient(circle,red,green,yellow);
  /*渐变设置为圆形*/
  background-image:radial-gradient(100px 100px,red,green,yellow);
  /*渐变圆半径*/
  background-image:radial-gradient(red 50px,green 60px,yellow 80px);
  /*开始渐变位置*/

3. 重复渐变，在没有发生渐变区域，重新发生渐变

  background-image:repeating-radial-gradient(red 50px,green 60px,yellow 80px);
  background-image:repeating-linear-gradient(red 50px,green 60px,yellow 80px);

十、字体

1. web字体
   阿里定制字体网址

简写

 @font-face{
   font-family:'自定义字体名称';
   src:url(./xx.ttf);
 }

兼容性写法

@font-face {        
     font-family: 'YourWebFontName';        
     src: url('YourWebFontName.eot'); /* IE9 >Compat Modes */        
     src: url('YourWebFontName.eot?#iefix') >format('embedded-opentype'), /* IE6-IE8 */             
     url('YourWebFontName.woff') format('woff'), >/* Modern Browsers */             
     url('YourWebFontName.ttf')  >format('truetype'), /* Safari, Android, iOS */             
url('YourWebFontName.svg#YourWebFontName>') format('svg'); /* Legacy iOS */   
   }

2. 字体图标
   阿里字体图标网址

十一、2d变换

1. translate位移

  transform:translate(x,y);
  /*水平垂直位移，一个值代表水平方向，位移对行内原素无效*/
  transform:translateX(x);
  /*水平位移，正值向右，值为百分比，参考自身宽高*/
  transform:translateY(y);
  /*垂直位移，正值向下*/

2. scale缩放

  transform:scale(1);
  /*一个值代表水平垂直缩放，借助缩放可以实现小于12px字体*/
  transform:scaleX(1);
  /*水平方向缩放，1不缩放，大于1放大*/
  transform:scaleY(1);

3. rotate旋转

  transform:rotateZ(20deg);
  /*正值顺时针旋转*/
  transform:rotate(20deg);
  /*rotate只设置一个值，表示2d旋转*/

4. skew拉伸(了解)

  transform:skew(30deg,30deg);
  transform:skewX();
  transform:skewY();

5. 多重变换

  transform:translate() rotate();
  /*多重变换，建议最后设置旋转*/

6. origin变换原点

  transform-origin:left top;
  transform-origin:left;
  /*只写一个值，另一个默认中间*/
  transform-origin:50% 50%;
  transform-origin:50px 50px;

十二、3d变换

1. transform-style3d空间，原素进行3d变换，要开启3d空间

值	含义
flat(默认值)	让子元素位于此原素2d空间
preserve-3d	位于3d空间

2. perspective景深，指观察者与z=0距离，设置给发生3d变换父原素，默认值none，取值不能为负
3. perspective-origin透视点位置
4. translate3d平移

  transform:translateZ();
  /*只能写像素值*/
  transform:translate3d(x,y,z);

5. rotate3d旋转

  transform:rotateX();
  transform:rotateY();
  transform:rotate3d(1,0,0,30deg);

6. scale3d缩放

  transform:scaleZ();
  transform:scale3d(x,y,z)

7. backface-visibility:hidden背部不可见

十三、过渡

1. transition-property允许过渡的属性，值为数字或能转为数字的属性，常见的:颜色、长度值、z-index、opacity、百分比、2d变换、3d变换、阴影

值	含义
none	不过渡任何属性
all	所有能过渡的属性允许过渡
属性名	多个以逗号分隔

2. transition-duration过渡时间，默认值0，单位s或ms，只有一个值表示所有属性过渡时间，设置多个时间用逗号隔开
3. transition-delay过渡延时
4. transition-timing-function过渡类型

值
ease(默认值)	平滑过渡(慢-快-慢)
linear	匀速
ease-in	慢-快
ease-out	快-慢
ease-in-out	更慢-快-更慢
step-start	不考虑过渡时间，直接到达终点
step-end	与上一个相反
steps(10，start)	分步过渡
cubic-bezier()	贝塞尔曲线网址

5. 复合属性

  transition:1s 0.5s all linear;
  /*第二个时间值表示延迟时间，其他值*/

十四、动画

1. 定义关键帧

/*方式一*/
@keyframes xxx{
  from{},
  to{}
}
/*方式二*/
@keyframes xxx{
  0%{},
  100%{}
}

2. 给原素应用动画

属性	含义
animation-name	给原素指定具体动画
animation-duration	动画所需时间
animation-delay	动画延迟时间

3. 其他属性

属性	含义
animation-timing-function	动画类型，取值和transition-timing-function一样
animation-iteration-count	动画播放次数，infinite(无限播放)
animation-direction	动画播放的方向，normal(默认值)，reverse(反向)，alternate(先正向，再反向，并持续交替)，alternate-reverse(先反向，再正向，并持续交替)
animation-fill-mode	动画之外的状态，forwards(设置状态为结束时状态)，backwards(设置状态为开始时状态)
animation-play-state	设置动画播放状态，running(默认值，运动)，paused(暂停)

4. 复合属性

animation:动画名 1s 1s linear infinite reverse forwards;  
/*第二个时间表示延迟，其余顺序无要求*/
/*animation-play-state一般单独使用*/

5. 与过渡区别
   过渡需要触发条件，动画可以对每一帧设置

十五、多列布局

属性	含义
column-count	指定列数
column-width	指定列宽
columns	column-count与column-width简写
column-gap	设置列边距
column-rule	设置列边框，column-rule-style、column-rule-color、column-rule-width简写
column-span	设置是否跨列，要设置给具体原素上，上面几个属性是给容器设置的，取值 : none，all

十六、媒体查询

1. 媒体类型，并不会提高优先级，依旧后者覆盖前者

类型	含义
@media all {}	所有类型显示
@media print {}	打印机类型显示
@media screen {}	屏幕类型显示

2. 媒体特性

特性	含义
@media (width:100px) {}	视口宽
@media (height:100px) {}	视口高
@media (min-weight:100px) {}	视口宽大于等于100px
@media (max-weight:100px) {}	视口宽小于等于100px
@media (device-weight:100px) {}	设备宽等于100px
@media (max-device-weight:100px) {}	设备宽小于等于100px
@media (min-device-weigt:100px) {}	设备宽大于等于100px
@media (orientation:) {}	视口旋转方向，取值 : portrait(纵向，高度大于等于宽度)，landscape(横向，宽度大于高度)

3. 运算符

运算符	含义
@media screen and (min-width:100px) {}	且
or或逗号	或
not	非
only	肯定

十七、常用阈值

1. 屏幕分成几个区间，如:
   超小屏幕(0-768px)、
   中等屏幕(768px-992px)、
   大屏幕(992px-1200px)、
   超大屏幕(大于1200px)
2. 结合外部样式用法

  <link rel="stylesheet" media="only screen and (max-width:768px)" href="xx.css">

  @media only screen and (max-width:768px) {}

十八、BFC

1. 简介

BFCBlack Formatting Context(块级格式上下文)，可以理解为原素一个“特异功能”。默认情况下，该“特异功能”关闭，满足某些条件后，激活。 所谓“特异功能”，就是该原素创建了BFC(又称开启了BFC)

2. 特点

原素开启BFC后，子元素不会产生margin塌陷，自己不会被其他浮动元素覆盖，即使子原素设置浮动，自身高度也不会塌陷

3. 开启BFC

根元素、
浮动原素、
绝对定位、固定定位原素、
行内块原素、
表格单元格(table、thead、tbody、tfoot、th、td、tr、caption)、
overflow值不为visible原素、
伸缩项目、
多列容器、
column-span为all原素(即使该原素没有包裹在多列容器中)、
display值设置为float-root