元素的显示与隐藏、CSS用户界面样式

1. 元素的显示与隐藏

1. 目的：

让一个元素在页面中消失或者显示出来。

2. 场景：

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

1.1 display显示（重点）

1. display设置或检索对象是否及如何显示。

display：none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

2. 特点：隐藏之后，不再保留位置。

1.2 visibility 可见性（了解）

1. 设置或检索是否现实对象

visibility：visible   ；  对象可视
visibility：hidden   ；  对象隐藏

2. 特点： 隐藏之后，继续保留原有位置 （停职留薪）

1.3 overflow溢出（重点）

1. 检索设置当前对象的内容超过其指定高度及宽度时如何管理内容。

Document

属性	描述
visble	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出显示滚动条

显示与隐藏：

    
    
    
    
    


    
"dawang">
    
"erwang">

网页示例图：

1.4 显示与隐藏总结

Document

属性	区别	用途
display	隐藏对象，不保留位置。	配合后面js做特效，比如下拉菜单，原先没有， 鼠标经过，显示下拉菜单，应用极为广泛。
visbiility	隐藏对象，保留位置。	使用较少
overflow	只是隐藏超出大小的部分	1.可以清除浮动 。2. 保证盒子里面的内容不会超出该盒子范围

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式。

1. 更改用户的鼠标样式
2. 表单轮廓等
3. 防止表单域拖拽

2.1 鼠标样式cursor

设置或检索在对象上移动的属性表指针采用何种系统与定义的光标形状。

Document

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

鼠标当我身上查看效果哦：

 


    
    
    
    


   

                
我是小白
                
我是小手

                
我是移动

                
我是文本

                
我是禁止

            

2.2 轮廓线 outline

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

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

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

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

2.3 防止拖拽文本域resize

实际开发中，我们文本右下角是不可以拖拽的：

代码如下：

    
    
    
    
    


    请留言了

网页示例图：

这是未改的：

这是改了的：

2.4 用户界面样式总结

Document

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住pointer
轮廓线	表单默认outline	outline轮廓线，我们一般直接去掉，border是边框，我们会经常用。
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize：none；

———————————————————————————————————————————————

更新了！！！

———————————————————————————————————————————————