-css3新增属性和css中一些属性(d)

一、新增属性

1、rgba()

• opacity(不透明度) 属性: 设置元素的不透明级别。从 0.0 （完全透明）到 1.0（完全不透明）。
  兼容性：所有浏览器都支持 opacity 属性。IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
• rgba: 同时设置颜色和不透明度。RGB即是代表红、绿、蓝。 a代表 alpha.用法：在background中设置前三个参数代表rgb值，第四个参数代表不透明度。所有浏览器都支持rgba属性。IE8不支持。
• rgba()和opacity的区别：(1)opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。(2)rgba()不能单独使用，而是要当作颜色值使用；而opacity为css中的一个属性。(3)opacity是设置整个元素的不透明度，而rgba()由于要和其它属相配合使用，所以可以设置边框的不透明度(如果边框设置为透明的话，会把元素内的背景露出来，即元素内的背景会显示到边框上)。

• 注: border的默认颜色为前景色(字体颜色)，且背景默认是会到border下面的，但是由于border的优先级要高些，会遮住背景(除非把border的颜色设置为透明)

div {
 filter: alpha(opacity=60);
 opacity:0.6; // 可以缩写为   .6 
 background-color: rgba(95,199,206,0.6);
 border: 20px solid rgba(235, 52, 61, 0); // 这个把border弄透明了，border的位置就显示的背景的颜色
}  

2、background-clip

这个属性规定背景的绘制区域。IE9+支持。

由于默认情况下背景（有图片的情况下）是填充到border的，所以如果设置的border是dotted或有透明度的那么通过border就可以看到设置的背景色(设置为dotted的话，由于border是点连起来的，所以在点的中间会出现背景色；设置为透明的话，整个border都是背景色了)。

// 值：
border-box	// 背景被裁剪到边框盒。（默认）
padding-box	// 背景被裁剪到内边距框。
content-box	// 背景被裁剪到内容框。
text // 背景被裁减到文本上。

// 关于text值的说明
// 这个值只有加上-webkit前缀的background-clip才能用，即从文本上面显示出来背景
// 不过只有文本颜色显示为透明或者用rgba设置了不透明度，才看的到图片
color: rgba(0,0,0,0.1);
background: url(images/boy.jpg) 0 0 no-repeat;
-webkit-background-clip: text;

3、background-origin

这个属性规定background-position 属性相对于什么位置来定位。IE9+支持。

如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

// 值：
border-box	// 背景图像相对于边框盒来定位。
padding-box	// 背景图像相对于内边距框来定位。(默认)
content-box	// 背景图像相对于内容框来定位。

4、box-sizing

这个属性允许以特定的方式定义匹配某个区域的特定元素。

// 值
content-box 宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框(默认，css2.1盒模型)
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。（IE6之前盒模型）

5、direction

这个属性设置文本流的方向。默认两个值：ltr、rtl。但是单独使用这个属性是会出问题的。所以这里需要和unicode-bidi属性一起使用。所有浏览器都支持

direction: rtl;
// bidi-override属性值表示，严格按照 <' direction '> 属性的值重排序
unicode-bidi: bidi-override; // 这样就连字符串的先后也是从右到左了。

6、pointer-events

这个属性算是黑科技了。设置为none，可以让元素永远不会成为鼠标事件的target，非常合适用来当做一个遮罩层，像雪花效果那种。

值：pointer-events：auto | none

7、background-size

规定背景图片的大小: cover的话相当于塞满容器，而contain是让整个图片包含在容器里面。

length: 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage: 以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover: 图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉
contain	图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

8、text-transform

这个属性用来控制文本中单词的大小写

none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	所有字母转换为大写。
lowercase	所有字母转换为小写。

9、position：sticky

• 可以认为 sticky 是 relative 及 fixed 两种 position 的混合,相当于sticky是在这两种值之间切换。
  • 默认情况是相当于relative的。然后页面滚动，sticky元素也会随着父元素以前滚动。
  • 当页面滚动到sticky元素和浏览器窗口的距离小于指定的阈值(即设置的position的top那些值)，这时候sticky就相当于fixed了，就不会再滚动了。
  • 阈值：即，设置的left、right、top、bottom值。比如，设置了top：20px;,当滚动到浏览器距离sticky元素距离为20px的时候，sticky元素就变为fixed了.这时候就相当于固定定位在那了，除非超出了父元素
  • sticky能够使用的条件：
    • (1)具有sticky属性的元素，其父级高度必须大于sticky元素的高度
    • (2)sticky元素的底部，不能和父级底部重叠
    • (3)ticky元素的父级不能含有overflow:hidden 和 overflow:auto 属性
    • (4)sticky元素仅在他父级容器内有效，超出容器范围则不再生效了
  • 兼容性：ios(Safari)、firefox、chrome 56之后

10、width属性新增的四个自适应关键字——fill-available、fit-content、max-content、min-content

• fit-available：表示自动撑满可用空间，很好用，不仅block可以用inline-block也可以用。因为这个关键字也可以用在高度上
• fit-content：表示将元素收缩为内容宽度,可以用来实现水平居中。这个关键字依然可以用在高度上
• max-content：表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行。
• min-content：表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。这个最小宽度值有最大什么意思，如果是图片的话最小宽度值就是图片所呈现的宽度，如果是汉字就是一个字的宽度，如果是英文就是单词的宽度

    div{
        background-color: #f00;
        width:-webkit-fit-content;
        margin: auto;
    }

11、calc计算属性

calc是css3中新增的计算属性，相当于就是一个表达式的功能,用于计算css属性的值，搭配vh或者vw来写，是很好的

width:calc(10% / 1rem);

// 下面这个是less的语法。~代表后面的部分不在less中进行编译，所以后面部分是需要加上引号的。因为calc在css3中是让浏览器去计算。
width: ~'calc(300 - 30)';

二、新增断字属性

• word-wrap: normal | break-word。

normal为默认值，
break-word允许长单词或 URL 地址换行到下一行。如果不设置这个，如果遇到一些长单词，那么他可能就会超出包含元素

• text-overflow: clip | ellipsis | string。这个属性规定当文本溢出包含元素时发生的事情。无继承

clip为修剪文本，
ellipsis为显示省略号来代表被修剪的文本，ellipsis：省略
string为使用给定字符来代表修剪的文本。

• white-space: normal | pre | nowrap | pre-wrap | pre-line

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。

注：text-overflow:ellipsis;这个属性不能单独使用，必须和overflow:hidden;white-space:nowrap;一起使用。但是，这样的话只能让它在一行，即只能存在一行文字。要实现多行文本溢出显示省略号的话，就用下列代码。

overflow : hidden;
text-overflow: ellipsis;
/* 下面三行代码是WebKit内核的浏览器实现的 */
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/
/*display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
/*-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;