公共课-高级技巧

一、元素的显示于隐藏

1、display:none;

特点：

（1）没有删除结构，只是通过css样式隐藏了元素

（2）不占位置

元素的显示

display:block;

2、visibility:hidden;

特点：

（1）没有删除结构，只是通过css样式隐藏了元素

（2）占位置

元素的显示：

visibility:visible;

3、透明度修改0

opacity:0;

x取值0-1 0是完全透明，1是完全不透明

4、隐藏溢出的子元素

父元素添加样式：overflow:hidden;

二、鼠标样式

属性：cursor

属性值：

default：默认样式

pointer：小手

move：拖动

text：文本输入

三、轮廓

当鼠标单击获取焦点时四周显示的线就是轮廓

属性：outline

去掉轮廓：outline:0;或者outline:none;

四、防止多行文本框拖拽

属性：resize

resize:none;

五、文本内容或者行内元素相对于同一行内块元素垂直居中

给行内块元素添加样式：vertical-align:middle;

六、如何清除行内块元素默认的间距

转化为块状元素且浮动

display:block;
float:left;

七、两个相邻行内块元素，一个设置了外边距另外一个受影响的解决办法

给设置了外边距的元素设置样式：

vertical-align:top;

八、强制文本在同一行显示

white-space:nowrap;

九、溢出的文本隐藏

隐藏溢出的内容：overflow:hidden;

显示省略号：text-overflow:ellipsis;

要显示省略号三个条件缺一不可

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

十、设置字间距

letter-spacing: 5px;