显示
描述
- 通过CSS属性来设置指定元素在页面中的显示或隐藏
display属性
-
也可以设置指定元素的显示和隐藏
- 属性值为 none - 表示隐藏目标元素
-
属性值不为 none - 可以将隐藏的元素在显示出来
-
比如
- display: block
- display: inline
- display: inline-block
-
- 该属性设置隐藏效果时，会连指定元素的所占区域一同隐藏
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
div {
width: 200px;
height: 200px;
}
/*
display属性 - 也可以设置指定元素的显示和隐藏
* 属性值为 none - 表示隐藏目标元素
* 属性值不为 none - 可以将隐藏的元素在显示出来
比如：* display: block
display: inline
display: inline-block
* 该属性设置隐藏效果时，会连指定元素的所占区域一同隐藏
*/
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
display: none;
/* 将隐藏的元素显示出来 */
display: block;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
visibility属性
-
表示设置显示或隐藏
- hidden 属性值 - 表示隐藏指定元素
- visible属性值 - 表示显示指定元素
- 该属性设置隐藏效果时，不会连指定元素的所占区域一同隐藏
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
/*
visibility属性 - 表示设置显示或隐藏
* hidden属性值 - 表示隐藏指定元素
* visible属性值 - 表示显示指定元素
* 该属性设置隐藏效果时，不会连指定元素的所占区域一同隐藏
*/
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
visibility: hidden;
/* 将隐藏的元素显示出来 */
visibility: visible;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
溢出
描述
- 表示指定元素中的内容(文本、图像、等等...)超出其父级元素的所在区域
overflow属性
- 表示解决内容溢出
- visible属性值 - 表示不隐藏溢出内容（默认值）
- hidden属性值 - 表示隐藏溢出的内容
- scroll属性值 - 表示为需要隐藏的部分添加滚动条
- auto属性值 - 表示交由浏览器自动调节
<head>
<meta charset="UTF-8">
<title>内容溢出</title>
<style>
/*
overflow属性 - 表示解决内容溢出
* visible属性值 - 表示不隐藏溢出内容（默认值）
* hidden属性值 - 表示隐藏溢出的内容
* scroll属性值 - 表示为需要隐藏的部分添加滚动条
* auto属性值 - 表示交由浏览器自动调节
*/
p {
width: 200px;
height: 150px;
background-color: yellowgreen;
/* 解决内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi, corporis dolor enim facilis hic ipsam iste laborum, modi molestiae nisi officiis ratione recusandae rem repudiandae sint, sunt tenetur vel?</p>
</body>
text-overflow属性
-
表示设置文本的内容溢出
- ellipsis属性值 - 表示将溢出的内容以省略号（...）方式显示
- 该属性必须配合 overflow属性 和 white-space属性 一起使用
<head>
<meta charset="UTF-8">
<title>text-overflow属性</title>
<style>
/*
text-overflow属性 - 表示设置文本的内容溢出
* ellipsis属性值 - 表示将溢出的内容以省略号（...）方式显示
* 该属性必须配合 overflow属性 和 white-space属性 一起使用
*/
p {
width: 200px;
height: 100px;
background-color: #00c3f5;
/* 设置文本在一行显示 */
white-space: nowrap;
/* 解决文本溢出 */
text-overflow: ellipsis;
/* 解决元素内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。