CSS 可见性 display overflow visibility

来源：互联网发布：seo招聘石家庄编辑：程序博客网时间：2024/05/22 14:01

使用CSS可以将元素进行隐藏，共有三种形式

1.overflow: hidden 将超出部分隐藏

2.display: none 直接将元素隐藏，将元素隐藏后不占位置

display：block 将元素显示(与JavaScript配合)

3.visibility:hidden 直接将元素隐藏，将元素隐藏后占原来的位置

Example:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .box{            margin: 20px auto;            height: 400px;            width: 200px;        }        .one{            height: 200px;            width: 200px;            background-color: pink;        }        .two{            height: 200px;            width: 200px;            background-color: #bbffbb;        }    </style></head><body>    <div class="box">        <div class="one"><p>Paragraph One</p></div>        <div class="two"><p>Paragraph Two</p></div>    </div></body></html>

1.使用overflow:hidden;将超出部分隐藏

2.使用display：hidden；将元素直接隐藏，可以看到paragraph one的位置被paragraph two 取代，脱离了标准文档流

3.使用visibility：hidden；元素依然占据其在标准文档流中的位置，但是不显示。

阅读全文

0 0