长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

CSS 3的常用新特性总结

  • 时间:2016-11-25 17:50
  • 发布:长沙web培训
  • 来源:Csdn

CSS3有许多新特性值得我们注意,下面达内长沙web培训就带大家一起了解一下:

1:实现多行文本超出显示…(火狐浏览器不支持)

display:-webkit-box;

-webkit-line-camp:3;

-webkit-box-orient:vertical;

2:取消默认的高亮显示

-webkit-tap-highlight-color:rgba(0,0,0,0);

3:消除手机端默认样式

-webkit-apperance:none;

4:css的百分比padding-top和margin-top是相对于父元素的宽度定义。

5:css不显示滚动条

::-webkit-scrollbar{

width:0;

}

6:before和after元素不设置content时会不显示。

7:user-select:none|text|all|element

设置或检索是否允许用户选中文本

none:

文本不能被选择

text:

可以选择文本

all:

当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element:

可以选择文本,但选择范围受元素边界的约束

IE6-9不支持该属性,但支持使用标签属性onselectstart=”return false;” 来达到user-select:none的效果;Safari和Chrome也支持该标签属性;

直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性unselectable=”on” 来达到user-select:none的效果;unselectable的 另一个值是off;除Chrome和Safari外,在其它浏览器中,如果将文本设置为-ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过, 如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为-ms-user-select:none;的区域文本;

对应的脚本特性为userSelect。

8:实现图片自适应的方式

-使用picture元素(H5新增)

-使用img的srcset,sizes属性

在HTML5中新增了一个元素picture,用过<video>,<audio>的会觉得<picture>的用法很熟悉。

<picture>

<source  srcset="a.png" media="(max-width:750px)"/>

<source srcset="b.png"/>

<img srcset="b.png"/>

</picture>

这个元素是有兼容性的,需要添加额外的插件

<script src="picturefill.js"></script>

<img src="a.png" srcset="a.png,b.png" sizes="(max-width:500px) 128px,256px"/>

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。

属性的作用类似媒体查询,但是它只是支持部分媒体查询,比如:

(min-width: 400px)

(not (orientation: landscape) )

( (orientation: landscape) and (min-width:400px) )

( (orientation: portrait) or (max-width: 500px) )

但它不支持我们明确的定义媒体类型:比如screen或者print等等。

除了使用px外,我们还可以使用em、px、cm、vw…,甚至CSS3的calc,不能使用百分比。

sizes=”(max-width: 320px) calc(100vw–20px), 128px”

表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。

上一篇:Array类型的注意要点之重排序方法
下一篇:HTML5开发的原理与实现

马上预约三天免费体验课

姓名:

电话:

如何将url中的参数传递给iframe中的报表?

你需要这些能提高效率的CSS实用工具

关于html居中的一些问题

达内长沙web培训详解Web Storage

选择城市和中心
贵州省

广西省

海南省