文章目录
一、元素的显示于隐藏
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;