定义:让一个元素在页面中隐藏或者显示出来
1. display 属性 display:block 把元素转成块级元素、显示元素display:inline把元素转成行内元素display:none 隐藏对象并且不保留元素位置 2. visibility 可见性 visibilty:inherit [默认]集成上一个父对象的可见性,(父可见,子就可见。父不可见,子也不可见)visibilty:visible 对象可见visibilty:hidden 对象隐藏,但是位置保留想要隐藏元素,同时不保留元素位置使用:display:none;相反想要隐藏元素同时保留元素位置使用:visibilty:visible
3. overflow 针对溢出的部分进行显示和隐藏 overflow:visible [默认] 全部显示。不剪切内容,也不添加滚动条,overflow:hidden 超出盒子大小的部分就隐藏overflow:scroll 总是显示滚动条,不管内容是否溢出overflow:auto 在需要的时候剪切内容并添加滚动条如果有定位的盒子,慎用 overflow:hidden,因为盒子可能会人为的超出盒子的部分,但是overflow:hidden会把多余的部分隐藏
4. outline 隐藏表单的轮廓线给表单添加ontline:0;或者 ontline:none; 样式之后就可以去掉默认的蓝色边框
防止拖拽文本域 : resize:none ;
<style> input { outline: none; } /*文本域禁止拖拽*/ textarea { resize: none; } </style> <!--取消表单轮廓线--> <input type="text"> <!--禁止文本域禁止拖拽--> <!--文本域尽量放一行显示,否则页面上会有对应的空白部分--> <textarea name="" id="" cols="30" rows="10"></textarea> 123456789101112131415 5. 溢出的文字用省略号表示
单行文本溢出显示省略号
必须满足三个条件:
white-space: nowrap //不换行 默认是(normal自动换行) 1 超出的部分隐藏
overflow:hidden 1 文字用省略号替代超出部分
text-overflow:ellipsis 1
示例代码如下:
<style> div { width: 150px; height: 80px; background-color: skyblue; margin: 100px auto; /*默认 如果文字显示不开自动换行*/ /*white-space: normal;*/ /*如果显示不开,必须一行强制显示*/ white-space: nowrap; /* 超出的部分隐藏*/ overflow:hidden; /*文字用省略号替代超出部分*/ text-overflow: ellipsis; } </style> <div> 节约水资源,节约粮食,保护大自然。八荣八耻记心中。 </div>
1234567891011121314151617181920 鼠标样式 cursor语法:li {cursor : pointer ;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
<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> 1234567