visibility
-1.设置是否显示对象。与display:none不同,此属性为隐藏的对象保留其占据的物理空间
-2.如果希望对象为可视,其父对象也必须为可视的。
-3.属性值:
-visible:设置对象可视
-hidden:设置对象隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .content{ width: 100px; height: 100px; background-color: aqua; visibility: visible; } .container{ width: 200px; height: 200px; background-color: bisque; visibility: hidden; } </style> </head> <body> <div class="container"> <div class="content"> hello </div> </div> </body> </html>
overflow
-1.复合属性,设置对象处理溢出内容的方式。效果等同于overflow-x + overflow-y
-2.如果希望对象为可视,其父对象必须也为可视
-3.属性值:
visible:对溢出内容不处理,内容可能会超出容器(默认)
hidden:隐藏溢出容器的内容且不会出现滚动条
scroll:隐藏溢出容器的内容,溢出的内容将会以滚动条的方式呈现
auto:当内容没有溢出容器时不出现滚动条,当内容出现溢出时,出现滚动条,按需出现滚动条。
此为body对象和textarea的默认值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .content{ width: 200px; height: 100px; background-color: pink; overflow: auto; } </style> </head> <body> <div class="content"> 大家好 </div> </body> </html>