css 查漏补缺

css强制换行  多出来的文字用...来代替

word-break: break-all;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

  word-break: break-all;

box-sizing、transition、translate分别是什么？

• 1、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
• 2、transition:当前元素只要有"属性"发生变化时，可以平滑的进行过渡。通过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
• 3、translate：通过

  写一下audio标签中，如何实现音乐的暂停和播放

• play()开始,pause()暂停

• 写出video标签中预加载视频用到的属性是什么

• preload
• 移动改变元素的位置；有x,y,z三个属性

  css清除浮动的几种方法？

• 使用带clear属性的空标签；
• 使用css的overflow属性；
• 使用css的：after伪元素；

• 同时为了兼容 IE6，7 同样需要配合zoom使用

• link 与 @import 的区别

• link 是HTML方式， @import 是CSS方式
• link最大限度支持并行下载，@import 过多嵌套导致串行下载，出现FOUC
• link 可以通过 rel="alternate stylesheet" 指定候选样式
• 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
• @import 必须在样式规则之前，可以在css文件中引用其他文件
• 总体来说：link优于@import

• li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

• 行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

• 如何修改Chrome记住密码后自动填充表单的黄色背景？

• 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
• 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
• 解决方案2：input:-webkit-autofill { background-color: transparent; }

• px、em、rem的区别？

• 1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
• 2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
• 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem

•      .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
       .clear{zoom:1;}