CSS高级技巧

CSS用户界面样式

(1)、鼠标样式

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

(2)、轮廓

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ：outline: 0;或者outline: none;

(3)、防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

(4)、垂直对齐

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐

(5)、去除图片底侧空白缝隙

有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1、两者之间有默认外边距的解决方法

修改父级元素字体尺寸：font-size:0;

2、给img 添加 display：block; 转换为块级元素就不会存在问题了。

(6)、两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

一个盒子里有两个行内块，其中一个设置了margin，另一个不设置，也会下沉：

1、外边距受影响的解决办法：

修改内联元素对齐属性：vertical-align：top;

溢出的文字隐藏

(1)、word-break

normal：使用浏览器默认的换行规则。

break-all：允许在单词内换行。

keep-all：只能在半角空格或连字符处换行。

主要处理英文单词

(2)、white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容。

normal : 默认处理方式

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

(3)、text-overflow

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 不显示省略标记（...），而是简单的裁切

ellipsis : 当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性搭配使用。

1. 、多行省略号

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

实现方法：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;