CSS/CSS3常用样式小结_html/css_WEB-ITnose

1.强制文本单行显示：

white-space:nowrap;

多行文本最后省略号：

display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis;

2.设置溢出文本显示为省略标记：

text-overflow:ellipsis;

(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）
其中clip表示直接裁切溢出的文本；
值ellipsis表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；
值ellipsis-word表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)

3.例如一段代码：
当点击a标签里面的图片的时候，有虚线框，IE中图片还有边框，如何解决？
解决办法：

a{outline:none;}//主要是针对火狐等浏览器，但IE不行img{border:0;}a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。

对于a标签来说，一般简单的解决办法是：
在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

测试

但是当连接太多的时候，一个一个的加这段代码不实用

4.html中两张图横向回车导致间隙,怎么才能去除成为无间隙？

例如：div 宽300px ; img 宽100px; border:0px;

//上面情况刚好显示三张图

这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。
解决办法就是让图片浮动。

5.css ie6、ie7中overflow:hidden无效解决办法

产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。

解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug

6.表格语法

...表格位置,置左
...表格位置,置中
...背景图片的URL=就是路径网址
...设定表格边框大小(使用数字)
...设定表格的背景颜色
...设定表格边框的颜色
...设定表格暗边框的颜色
...设定表格亮边框的颜色
...指定内容与格线之间的间距(使用数字)
...指定格线与格线之间的距离(使用数字)
...指定表格的栏数
...设定表格外框线的显示方式
...指定表格的宽度大小(使用数字)
...指定表格的高度大小(使用数字)