1. 元素的显示与隐藏
在
CSS
中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是
display visibility
和
overflow
。
他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告。
1.1 display 显示
display
设置或检索对象是否及如何显示。
display : none
隐藏对象 与它相反的是
display:block
除了转换为块级元素之外,同时还有显示元素的意
思。
特点: 隐藏之后,不再保留位置。
1.2 visibility 可见性
设置或检索是否显示对象。
visible :
对象可视
hidden :
对象隐藏
特点: 隐藏之后,继续保留原有位置。
1.3 overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible :
不剪切内容也不添加滚动条。
auto :
超出自动显示滚动条,不超出不显示滚动条
hidden :
不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll :
不管超出内容否,总是显示滚动条
![](https://img-blog.csdnimg.cn/direct/63425e02360f4f6f9d2b9e0a8993534b.png)
2. list-style 属性
list-style
简写属性在一个声明中设置所有的列表属性。
![](https://img-blog.csdnimg.cn/direct/9252b05797ef4c19b389b463072dd017.png)
3. CSS用户界面样式
所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚
动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽
3.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor : default
小白
| pointer
小手
| move
移动
| text
文本
| not-allowed
鼠标放我身上查看效果哦:
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed"> 禁止</li>
</ul>
4. 溢出的文字隐藏
4.1 word-break:自动换行
normal
使用浏览器默认的换行规则。
break-all
允许在单词内换行。
keep-all
只能在半角空格或连字符处换行。
主要处理英文单词
4.2 white-space
如何处理元素内的空白
![](https://img-blog.csdnimg.cn/direct/a2d2fb0b4de14518ada9c682c201858d.png)
4.3 text-overflow 文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记(
...
)标示对象内文本的溢出
clip :
不显示省略标记(
...
),而是简单的裁切
ellipsis :
当对象内文本溢出时显示省略标记(
...
)
注意一定要首先强制一行内显示,再次和
overflow
属性
搭配使用!!